0.1.3 • Published 4 years ago
baokim-react v0.1.3
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;