This guide streamlines the process of accepting transactions on your website in Bahrain. In this guide, we will walk through the steps to implement, configure, and use Tap Payment’s BenefitPay effectively in React & Vanilla JS.

🚧
BenefitPay payment method accepts the BHD currency only. As of now, it doesn't support authorization.

Pre-requisites:

Download the updated tap's BenefitPay Package from our NPM repository. BenefitPay Package
Node.js and npm must be installed on your deployment environment.
You are subscribed with Tap Payments.
API credentials, including a public test key.

Have a Quick Demo to see the expected outcomes of BenefitPay SDK.

📘
Bear in mind, the implementation of Benefit Pay results as a front kit on the host solution. Remember to refer to the recommended integration flow to fully initiate a transaction using Benefit Pay.
How to initiate a charge API

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

yarn add @tap-payments/benefit-pay-button

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 becomes ready
onClick	func	Optional	A callback function that will be called when the button is 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 encounter an error
onSuccess	func	Optional	A callback function that will be called after successfully completing the payment