apple-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, Environment, Locale } from '@tap-payments/benefit-pay-button'
const App = () => {
return (
<BenefitPayButton
// required (The public Key provided by Tap)
operator={{
publicKey: 'pk_test_XXXXXXXX'
}}
// required (The environment of the SDK and it can be one of these environments)
environment={Environment.Development}
// 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'
}}
// 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: 'test@gmail.com',
// 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
}}
// 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)
}}
/>
)
}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>Benefitpay Button</title>
<script src="https://tap-sdks.b-cdn.net/benefit-pay/build-0.0.12-test/main.js"></script>
</head>
<body>
<div id="benefit-pay-button"></div>
<script type="text/javascript">
const { renderBenefitPayButton, Edges, Environment, Locale, ThemeMode } = window.TapSDKs
renderBenefitPayButton(
{
operator: {
publicKey: 'pk_test_XXXXXXXX'
},
environment: Environment.Development,
debug: true,
merchant: {
id: 'merchant_xxxxxxxxxx'
},
transaction: {
amount: '12',
currency: 'BHD'
},
customer: {
names: [
{
lang: Locale.EN,
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: 'test@gmail.com',
phone: {
countryCode: '20',
number: '1000000000'
}
}
},
interface: {
locale: Locale.EN,
edges: Edges.CURVED
},
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 |
| 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] |
| 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 |