Handling Apple Pay button in React and vanilla JS
This is a React module available through the
npm registry. Installation is done using the
npm install command:
npm install @tap-payments/apple-pay-button---------------------------- OR -------------------------
yarn add @tap-payments/apple-pay-buttonimport React from 'react'
import {
ApplePayButton,
ThemeMode,
SupportedNetworks,
Scope,
Environment,
Locale,
ButtonType,
Edges
} from '@tap-payments/apple-pay-button'
const App = () => {
return (
<ApplePayButton
// The public Key provided by Tap
publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
//The environment of the SDK and it can be one of these environments
environment={Environment.Development}
//to enable the debug mode
debug
merchant={{
// The merchant domain name
domain: 'example.com',
// The merchant identifier provided by Tap
id: '1xxxxx8'
}}
transaction={{
// The amount to be charged
amount: '12',
// The currency of the amount
currency: 'KWD'
}}
// The scope of the SDK and it can be one of these scopes:
// [TapToken,AppleToken], by default it is TapToken)
scope={Scope.TapToken}
acceptance={{
// The supported networks for the Apple Pay button and it
// can be one of these networks: [Mada,Visa,MasterCard], by default
// we bring all the supported networks from tap merchant configuration
supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
supportedCards : ["DEBIT","CREDIT"],
supportedCardsWithAuthentications : ["3DS","EMV"]
}}
// The billing contact information
customer={{
id: 'cus_xxx',
name: [
{
//"en or ar",
lang: Locale.EN,
// "First name of the customer.",
first: 'test',
//"Last name of the customer.",
last: 'tester',
// "Middle name of the customer.",
middle: 'test'
}
],
// Defines the contact details for the customer & to be used in creating the billing contact info in Apple pay request
contact: {
//"The customer's email",
email: 'test@gmail.com',
//"The customer's phone number"
phone: {
//"The customer's country code",
countryCode: '+20',
//"The customer's phone number
number: '10XXXXXX56'
}
}
}}
//for styling button
interface={{
//The locale of the Apple Pay button and it can be one of these locales:[EN,AR]
locale: Locale.EN,
// The theme of the Apple Pay button and it can be one of
// these values : [light,Dark], by default it is detected from user device
theme: ThemeMode.DARK,
// The type of the Apple Pay
type: ButtonType.BUY,
// The border of the Apple Pay button and it can be one of these values:[curved,straight]
edges: Edges.CURVED
}}
// optional (A callback function that will be called when you cancel
// the payment process)
onCancel={() => console.log('cancelled')}
// optional (A callback function that will be called when you have an error)
onError={(err) => console.error(err)}
// optional (A async function that will be called after creating the token
// successfully)
onSuccess={async (token) => {
// do your stuff here...
console.log(token)
}}
// 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')
}}
/>
)
}<!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>
<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.19/main.css" />
<script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.19/main.js"></script>
</head>
<body>
<div id="apple-pay-button"></div>
<script type="text/javascript">
const { render, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
window.TapApplepaySDK
render(
{
publicKey: 'pk_test_7xxxxxxxxx',
environment: Environment.Development,
scope: Scope.TapToken,
merchant: {
domain: window.location.hostname,
id: 'merchant_xxxxxxxxxx'
},
transaction: {
currency: 'SAR',
amount: '3'
},
acceptance: {
supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
supportedCards: ['DEBIT', 'CREDIT'],
supportedCardsWithAuthentications: ['3DS', 'EMV']
},
customer: {
id: 'cus_xxx',
name: [
{
locale: 'en',
first: 'test',
last: 'tester',
middle: 'test'
}
],
contact: {
email: 'test@gmail.com',
phone: {
number: '10XXXXXX56',
countryCode: '+20'
}
}
},
interface: {
locale: Locale.EN,
theme: ThemeMode.DARK,
type: ButtonType.BUY,
edges: Edges.CURVED
},
onCancel: async () => {
console.log('onCancel')
},
onError: async (error) => {
console.log('onError', error)
},
onSuccess: async (data) => {
console.log('onSuccess', data)
},
onReady: async () => {
console.log('onReady')
}
},
'apple-pay-button'
)
</script>
</body>
</html>| Name | Type | R/O | Description |
|---|---|---|---|
| publicKey | string |
required |
The public Key provided by Tap |
| environment | enum |
optional |
The environment of the SDK and it can be one of these environments Environment: [Development,Production] |
| debug | boolean |
optional |
To enable the debug mode |
| merchant.id | string |
required |
The merchant identifier provided by Tap |
| merchant.domain | string |
required |
The merchant domain name |
| transaction.amount | string |
required |
The amount to be charged |
| transaction.currency | string |
required |
The currency of the amount |
| scope | enum |
optional |
The scope of the SDK |
| acceptance.supportedBrands | array |
optional |
The supported networks for the Apple Pay button |
| acceptance.supportedCards | array |
optional |
The supported cards for the Apple Pay button |
| acceptance.supportedCardsWithAuthentications | array |
optional |
The supported cards with authentications for the Apple Pay button |
| interface.theme | enum |
optional |
The theme of the Apple Pay button |
| interface.locale | Locale |
optional |
The locale of the Apple Pay button |
| interface.type | ButtonType |
optional |
The type of the Apple Pay button |
| interface.edges | ButtonType |
optional |
The border of the Apple Pay button |
| customer | object |
optional |
The Customer details information |
| onCancel | function |
optional |
A callback function that will be called when you cancel the process |
| onError | function |
optional |
A callback function that will be called when you have an error |
| onSuccess | function |
optional |
A async function that will be called after creating the token successfully |
| onClick | function |
optional |
A callback function that will be called when the button clicked |
| onReady | function |
optional |
A callback function that will be called when you button is clickable |