@tap-payments/benefit-pay-button
v1.0.17
Published
just for wrapping benefit pay button to be used in react
Downloads
609
Maintainers
mostafaabobakr.tap
i.mousa
mahmoudallam
aya_tap
mud_fahmi
ahmedkaram-tap
haitham-tap
muhammadazhar007
elsharkawy
waqast
hala.q
reham_alsabbagh
kalpanatap
sadbarkhattakKeywords
Readme
benefit-pay-button
Handling Benefit Pay button in React and vanilla JS
Install
This is a React module available through the
npm registry. Installation is done using the
npm install command:
npm install @tap-payments/benefit-pay-button---------------------------- OR -------------------------
yarn add @tap-payments/benefit-pay-buttonExamples
ES6
import React from 'react'
import { BenefitPayButton, Edges, Locale } from '@tap-payments/benefit-pay-button'
const App = () => {
return (
<BenefitPayButton
// required (The public Key provided by Tap)
operator={{
publicKey: 'pk_test_XXXXXXXX'
}}
// optional (to enable the debug mode)
debug={true}
// required
merchant={{
// required (The merchant identifier provided by Tap)
id: 'merchant_xxxxxxxxxx'
}}
// required
transaction={{
// required (The amount to be charged)
amount: '12',
// required (The currency of the amount)
currency: 'BHD'
}}
reference={{
transaction: 'txn_123',
order: 'ord_123'
}}
// optional (The billing contact information)
customer={{
//"OPTIONAL : Customer ID",
names: [
{
// required : en or ar",
lang: Locale.EN,
// required : First name of the customer.",
first: 'test',
// required : Last name of the customer.",
last: 'tester',
// optional : Middle name of the customer.",
middle: 'test'
}
],
// optional: Defines the contact details for the customer
contact: {
// optional: The customer's email",
email: '[email protected]',
// optional: The customer's phone number"
phone: {
// required: The customer's country code",
countryCode: '+20',
// required: The customer's phone number
number: '1000000000'
}
}
}}
//optional (for styling button)
interface={{
// optional (The locale of the Apple Pay button and it can be one of these locales:[EN,AR])
locale: Locale.EN,
// optional (The border of the button and it can be one of these values:[curved,straight])
edges: Edges.CURVED
}}
post={{
url: ''
}}
// optional (A callback function that will be called when you button is clickable)
onReady={() => {
console.log('Ready')
}}
// optional (A callback function that will be called when the button clicked)
onClick={() => {
console.log('Clicked')
}}
// optional (A callback function that will be called when you cancel the payment)
onCancel={() => console.log('cancelled')}
// optional (A callback function that will be called when you have an error)
onError={(err) => console.log('onError', err)}
// optional (A async function that will be called after creating the token successfully)
onSuccess={(data) => {
// do your stuff here...
console.log(data)
}}
// optional (A async function that called once, the charge api is called and successfully returned a charge id in the response)
onChargeCreated={(chargeID) => {
// do your stuff here...
console.log('charge created')
}}
/>
)
}Vanilla JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>apple pay button</title>
<script src="https://tap-sdks.b-cdn.net/benefit-pay/build-1.0.16/main.js"></script>
</head>
<body>
<div id="benefit-pay-button"></div>
<script type="text/javascript">
const { render, Edges, Locale, ThemeMode } = window.TapBenefitpaySDK
render(
{
operator: {
publicKey: 'pk_test_XXXXXXXX'
},
debug: true,
merchant: {
id: 'merchant_xxxxxxxxxx'
},
transaction: {
amount: '12',
currency: 'BHD'
},
reference: {
transaction: 'txn_123',
order: 'ord_123'
},
customer: {
names: [
{
lang: Locale.EN,
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: '[email protected]',
phone: {
countryCode: '20',
number: '1000000000'
}
}
},
interface: {
locale: Locale.EN,
edges: Edges.CURVED
},
post: {
url: ''
},
onReady: () => {
console.log('Ready')
},
onClick: () => {
console.log('Clicked')
},
onCancel: () => console.log('cancelled'),
onError: (err) => console.log('onError', err),
onSuccess: (data) => {
console.log(data)
}
},
'benefit-pay-button'
)
</script>
</body>
</html>Configurations
| Name | Type | R/O | Description |
| ---------------------------------- | ------ | ---------- | --------------------------------------------------------------------------------------- |
| operator | object | Required | The operator object that contains the public key + hashString |
| operator.publicKey | string | Required | The public key provided by Tap |
| operator.hashString | string | Optional | The hash string can be set it to secure your transaction |
| environment | string | Required | The environment of the SDK and it can be one of these environments: [Development, Live] |
| debug | bool | Optional | To enable the debug mode |
| merchant | object | Required | The merchant object that contains the merchant identifier |
| merchant.id | string | Required | The merchant identifier provided by Tap |
| transaction | object | Required | The transaction object that contains the amount and currency |
| transaction.amount | string | Required | The amount to be charged |
| transaction.currency | string | Required | The currency of the amount |
| reference | object | Optional | The reference object that contains the transaction and order references |
| reference.transaction | string | Optional | passed by the merchant for further processing whenever needed. |
| reference.order | string | Optional | passed by the merchant for further processing whenever needed. |
| customer | object | Optional | The customer object that contains the customer details |
| customer.id | object | Optional | The customer ID |
| customer.names | array | Optional | The customer names and it can be one of these values: [EN, AR] |
| customer.names[idx].lang | string | Required | The customer name language and it can be one of these values: [EN, AR] |
| customer.names[idx].first | string | Required | The customer first name |
| customer.names[idx].last | string | Required | The customer last name |
| customer.names[idx].middle | string | Optional | The customer middle name |
| customer.contact | object | Optional | The customer contact object that contains the email and phone number |
| customer.contact.email | string | Optional | The customer email |
| customer.contact.phone | object | Optional | The customer phone object that contains the country code and number |
| customer.contact.phone.countryCode | string | Required | The customer country code |
| customer.contact.phone.number | string | Required | The customer phone number |
| interface | object | Optional | The interface object that contains the locale and edges |
| interface.locale | string | Optional | The locale of the Apple Pay button and it can be one of these locales: [EN, AR] |
| interface.edges | string | Optional | The border of the button and it can be one of these values: [CURVED, STRAIGHT] |
| post | object | Optional | This is the webhook for your server, if you want us to update you server to server. |
| onReady | func | Optional | A callback function that will be called when the button become ready |
| onClick | func | Optional | A callback function that will be called when the button clicked |
| onCancel | func | Optional | A callback function that will be called when you cancel the payment |
| onError | func | Optional | A callback function that will be called when you have an error |
| onSuccess | func | Optional | A callback function that will be called after finishing the payment successfully |