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;