@tap-payments/benefit-pay-button NPM

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-button

Examples

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'
			}}
			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: '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
			}}
			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)
			}}
		/>
	)
}

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.10/main.js"></script>
	</head>

	<body>
		<div id="benefit-pay-button"></div>
		<script type="text/javascript">
			const { render, Edges, Environment, Locale, ThemeMode } = window.TapBenefitpaySDK
			render(
				{
					operator: {
						publicKey: 'pk_test_XXXXXXXX'
					},
					environment: Environment.Development,
					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: 'test@gmail.com',
							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.namesidx.lang	string	`Required`	The customer name language and it can be one of these values: EN, AR
customer.namesidx.first	string	`Required`	The customer first name
customer.namesidx.last	string	`Required`	The customer last name
customer.namesidx.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