baokim-react

npm i baokim-react

Usage no npm install needed!

<script type="module">
  import baokimReact from 'https://cdn.skypack.dev/baokim-react';
</script>

README

Baokim React

Installation

npm i baokim-react

How To Use

First import this component where you want to use it

import Baokim from "baokim-react";

Then just renders it:

<Baokim
    type='pro' // pro or checkout
    apiKey = 'a18ff78e7a9e44f38de372e093d87ca1'
    configOrder = {{ // order config
        mrc_order_id: `my_order_id_${Math.random().toString(36).substring(2)}_${Date.now()}`,
        total_amount: 60000,
        payment_method_type: 'card',
        description: 'thanh toan dien thoai iphone xs max gia re',
        success_url: 'http://my-merchant.com/callback-success',
        cancel_url: 'http://my-merchant.com/callback-cancel',
    }}
    configButton = {{ // button config
        title: 'Thanh toán voi baokim',
        style: {
            background: '#fff',
            color: '#333'
        }
    }}
/>

Props

Prop Description Require DefaultValue
type type for display true must be checkout or pro
apiKey key from baokim true NULL
configOrder params for send to baokim true object
configButton config for display button when type is checkout false object

configOrder

Prop Description Require Default Value
mrc_order_id merchant order id true anything string
total_amount total amount true NULL
payment_method_type payment_method_type true anything string
description description about this order false NULL
success_url webhook when order success true NULL
cancel_url webhook when order cancel true NULL

configButton

Prop Description Require Default Value
title button title false Thanh toán với bảo kim
style style css for this button false color: #333

Example

import React, { Component } from "react";
import Baokim from "baokim-react";

class App extends Component {
  render() {
        return (
            <Baokim
                type='pro' // pro or checkout
                apiKey = 'a18ff78e7a9e44f38de372e093d87ca1'
                configOrder = {{ // order config
                    mrc_order_id: `my_order_id_${Math.random().toString(36).substring(2)}_${Date.now()}`,
                    total_amount: 60000,
                    payment_method_type: 'card',
                    description: 'thanh toan dien thoai iphone xs max gia re',
                    success_url: 'http://my-merchant.com/callback-success',
                    cancel_url: 'http://my-merchant.com/callback-cancel',
                }}
                configButton = {{ // button config
                    title: 'Thanh toán voi baokim',
                    style: {
                        background: '#fff',
                        color: '#333'
                    }
                }}
            />
        );
  }
}

export default App;