1.0.0-test • Published 12 days ago
@tap-payments/benefitpay-web v1.0.0-test
BenefitPay-Web
We at Tap Payments strive to make your payments easier than ever. We as a PCI compliant company, provide you a from the self solution to process BenefitPay payments in your Web applications.
Get your keys
You can always use the example keys within our example app, but we do recommend you to head to our onboarding page. You will need to register your domain
to get your Key
that you will need to activate our Card-Web
.
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-web
---------------------------- OR -------------------------
yarn add @tap-payments/benefit-pay-web
Examples
Simple Code Integration
ES6
import React from 'react'
import { BenefitPayButton, Environment, Locale } from '../src'
const App = () => {
return (
<BenefitPayButton
operator={{
publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
}}
environment={Environment.Development}
order={{
amount: '20',
currency: 'BHD'
}}
customer={{
name: [
{
lang: Locale.EN,
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: 'test@gmail.com',
phone: {
countryCode: '+20',
number: '1000000000'
}
}
}}
onReady={() => console.log('Ready')}
onClick={() => console.log('Clicked')}
onCancel={() => console.log('Cancelled')}
onError={(err) => console.log('Error', err)}
onSuccess={(data) => console.log('Success', 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" />
<script src="https://tap-sdks.b-cdn.net/benefit-pay/build-1.0.1-test/main.js"></script>
</head>
<body>
<div id="benefit-pay-button"></div>
<script type="text/javascript">
const { renderBenefitPayButton, Environment, Locale } = window.TapSDKs
renderBenefitPayButton(
{
operator: {
publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
},
environment: Environment.Development,
order: {
amount: 12,
currency: 'BHD'
},
customer: {
name: [
{
lang: Locale.EN,
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: 'test@gmail.com',
phone: {
countryCode: '20',
number: '1000000000'
}
}
},
onReady: () => console.log('Ready'),
onClick: () => console.log('Clicked'),
onCancel: () => console.log('Cancelled'),
onError: (err) => console.log('Error', err),
onSuccess: (data) => console.log('Success', data)
},
'benefit-pay-button'
)
</script>
</body>
</html>
Advanced Code Integration
ES6
import React from 'react'
import { BenefitPayButton, Environment, Locale, Edges, ThemeMode, ColorStyle } from '../src'
const App = () => {
return (
<BenefitPayButton
operator={{
publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh',
hashstring: ''
}}
environment={Environment.Development}
merchant={{
id: ''
}}
order={{
id: '',
amount: '20',
currency: 'BHD',
description: '',
reference: '',
metadata: {}
}}
customer={{
name: [Ï
{
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,
theme: ThemeMode.LIGHT,
colorStyle: ColorStyle.MONOCHROME,
loader: true
}}
onReady={() => console.log('Ready')}
onClick={() => console.log('Clicked')}
onCancel={() => console.log('Cancelled')}
onError={(err) => console.log('Error', err)}
onSuccess={(data) => console.log('Success', 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" />
<script src="https://tap-sdks.b-cdn.net/benefit-pay/build-1.0.1-test/main.js"></script>
</head>
<body>
<div id="benefit-pay-button"></div>
<script type="text/javascript">
const { renderBenefitPayButton, Edges, Environment, Locale, ThemeMode, ColorStyle } = window.TapSDKs
renderBenefitPayButton(
{
operator: {
publicKey: 'pk_test_Vlk842B1EA7tDN5QbrfGjYzh'
},
environment: Environment.Development,
order: {
amount: 12,
currency: 'BHD',
description: '',
reference: '',
metadata: {}
},
customer: {
name: [
{
lang: Locale.EN,
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: 'test@gmail.com',
phone: {
countryCode: '20',
number: '1000000000'
}
}
},
merchant: {
id: '',
},
interface: {
locale: Locale.EN,
edges: Edges.CURVED,
theme: ThemeMode.LIGHT,
colorStyle: ColorStyle.MONOCHROME,
loader: true
},
onReady: () => console.log('Ready'),
onClick: () => console.log('Clicked'),
onCancel: () => console.log('Cancelled'),
onError: (err) => console.log('Error', err),
onSuccess: (data) => console.log('Success', data),
},
'benefit-pay-button'
)
</script>
</body>
</html>
Configurations
Configuration | Description | Required | Type | Sample |
---|---|---|---|---|
operator | This is the Key that you will get after registering you domain. | True | Object | {"publicKey":"pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7", "hashstring":""} |
environment | The environment of the SDK that provided from BenefitPay | True | String | Development |
order | This is the order id that you created before or amount and currency to generate a new order. It will be linked this token. | True | Object | {"id":"", "amount":1, "currency":"SAR", "description": "description","reference":"","metadata":{}} |
invoice | This is the invoice id that you want to link this token to if any. | False | Object | {"id":""} |
merchant | This is the Merchant id that you will get after registering you bundle id. | True | Object | {"id":""} |
customer | The customer details you want to attach to this tokenization process. | True | Object | {"id":"", "name":[{"lang":"en","first":"TAP","middle":"","last":"PAYMENTS"}], "contact":{"email":"tap@tap.company", "phone":{"countryCode":"+965","number":"88888888"}}} |
interface | Needed to defines look and feel related configurations. | False | Object | {"locale": "en", "theme": "light", "edges": "curved", "direction": "dynamic", "powered": true, "colorStyle": "colored", "loader": true} |
post | This is the webhook for your server, if you want us to update you server to server. | False | Object | {"url":""} |
Documentation per variable
- operator:
- Responsible for passing the data that defines you as a merchant within Tap system.
- operator.publicKey:
- A string, which you get after registering the app bundle id within the Tap system. It is required to correctly identify you as a merchant.
- You will receive a sandbox and a production key. Use, the one that matches your environment at the moment of usage.
- operator.hashstring:
- A string, which passed while creating the charge.
- environment:
- The environment of the SDK and it can be one of these environments:
- Development
- Live
- The environment of the SDK and it can be one of these environments:
- order:
- The details about the order that you will be using the token you are generating within.
- order.id:
- The id of the
order
if you already created it using our apis.
- The id of the
- order.currency:
- The intended currency you will perform the order linked to this token afterwards.
- order.amount:
- The intended amount you will perform the order linked to this token afterwards.
- order.description:
- Optional string to put some clarifications about the order if needed.
- order.reference:
- Optional string to put a reference to link it to your system.
- order.metadata:
- Optional, It is a key-value based parameter. You can pass it to attach any miscellaneous data with this order for your own convenience.
- invoice.id:
- Optional string to pass an invoice id, that you want to link to this token afterwards.
- merchant.id:
- Optional string to pass to define a sub entity registered under your key in Tap. It is the
Merchant id
that you get from our onboarding team.
- Optional string to pass to define a sub entity registered under your key in Tap. It is the
- customer.id:
- If you have previously have created a customer using our apis and you want to link this token to him. please pass his id.
- customer.name:
- It is a list of localized names. each name will have:
- lang : the 2 iso code for the locale of this name for example
en
- first : The first name.
- middle: The middle name.
- last : The last name.
- lang : the 2 iso code for the locale of this name for example
- It is a list of localized names. each name will have:
- customer.contact.email:
- An email string for the customer we are creating. At least the email or the phone is required.
- customer.contact.phone:
- The customer's phone:
- countryCode
- number
- The customer's phone:
- interface.loader:
- A boolean to indicate wether or not you want to show a loading view on top of the card form while it is performing api requests.
- interface.locale:
- The language of the card form. Accepted values as of now are:
- en
- ar
- The language of the card form. Accepted values as of now are:
- interface.theme:
- The display style of the card form. Accepted values as of now are:
- light
- dark
- dynamic // follow the device's display style
- The display style of the card form. Accepted values as of now are:
- interface.edges:
- How do you want the edges of the card form to. Accepted values as of now are:
- curved
- flat
- How do you want the edges of the card form to. Accepted values as of now are:
- interface.cardDirection:
- The layout of the fields (card logo, number, date & CVV) within the card element itself. Accepted values as of now are:
- ltr // fields will inflate from left to right
- rtl // fields will inflate from right to left
- dynamic // fields will inflate in the locale's direction
- The layout of the fields (card logo, number, date & CVV) within the card element itself. Accepted values as of now are:
- interface.powered:
- A boolean to indicate wether or not you want to show powered by tap.
- Note, that you have to have the permission to hide it from the integration team. Otherwise, you will get an error if you pass it as false.
- interface.colorStyle:
- How do you want the icons rendered inside the card form to. Accepted values as of now are:
- colored
- monochrome
- How do you want the icons rendered inside the card form to. Accepted values as of now are:
1.0.10-development
12 days ago
1.0.8-development
13 days ago
1.0.9-development
13 days ago
1.0.7-development
14 days ago
1.0.6-development
5 months ago
1.0.5-development
5 months ago
1.0.4-test
7 months ago
1.0.3-test
7 months ago
1.0.2-test
7 months ago
1.0.1-test
8 months ago
1.0.0-test
8 months ago