@tap-payments/apple-pay-button NPM

apple-pay-button

Handling Apple 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/apple-pay-button

---------------------------- OR -------------------------

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

Examples

ES6

import React from 'react'
import { ApplePayButton, ButtonStyle, SupportedNetworks, Scope } from '@tap-payments/apple-pay-button'

const App = () => {
	return (
		<ApplePayButton
			// required (The public Key provided by Tap)
			publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
			// required
			merchant={{
				// required (The merchant domain name)
				domain: 'example.com',
				// optional (The merchant identifier provided by Tap)
				id: '1xxxxx8'
			}}
			// required
			transaction={{
				// required (The amount to be charged)
				amount: '12',
				// required (The currency of the amount)
				currency: 'KWD'
			}}
			// optional (The scope of the SDK and it can be one of these scopes:
			// [TapToken,AppleToken], by default it is TapToken)
			scope={Scope.TapToken}
			// optional (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)
			supportedNetworks={[SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]}
			// optional (The style of the Apple Pay button and it can be one of
			// these styles: [White,WhiteOutline,Black], by default it is WhiteOutline)
			buttonStyle={ButtonStyle.WhiteOutline}
			// optional (The billing contact information)
			billingContact={{
				// required
				email: {
					// required
					address: 'test@gmail.com'
				},
				// required
				name: {
					// required
					first: 'test',
					// required
					last: 'tester',
					// optional
					middle: 'test'
				},
				// required
				phone: {
					number: '10XXXXXX56',
					code: '+20'
				}
			}}
			// 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)
			}}
		/>
	)
}

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>
		<link rel="stylesheet" href="https://apple-pay-button.b-cdn.net/build-0.0.8-test/main.css" />
		<script src="https://apple-pay-button.b-cdn.net/build-0.0.8-test/main.js"></script>
	</head>
	<body>
		<div id="apple-pay-button"></div>
		<script type="text/javascript">
			const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks } = window.TapSDKs
			renderApplePayButton(
				{
					// required
					publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
					// required
					merchant: {
						// required
						domain: 'example.com'
						// optional
						// id: '123...'
					},
					// required
					transaction: {
						// required
						currency: 'USD',
						// required
						amount: '100'
					},
					// optional
					scope: Scope.TapToken,
					// optional
					buttonStyle: ButtonStyle.WhiteOutline,
					// optional
					supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
					// optional (The billing contact information)
					billingContact: {
						// required
						email: {
							// required
							address: 'test@gmail.com'
						},
						// required
						name: {
							// required
							first: 'test',
							// required
							last: 'tester',
							// optional
							middle: 'test'
						},
						// required
						phone: {
							number: '10XXXXXX56',
							code: '+20'
						}
					},
					// optional
					onCancel: () => {
						console.log('onCancel')
					},
					// optional
					onError: (error) => {
						console.log('onError', error)
					},
					// optional
					onSuccess: async (data) => {
						console.log('onSuccess', data)
					}
				},
				'apple-pay-button'
			)
		</script>
	</body>
</html>

Configurations

Name	Type	R/O	Description
publicKey	`string`	`required`	The public Key provided by Tap
merchant.id	`string`	`optional`	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	`Scope`	`optional`	The scope of the SDK
supportedNetworks	`SupportedNetworks[]`	`optional`	The supported networks for the Apple Pay button
buttonStyle	`ButtonStyle`	`optional`	The style of the Apple Pay button
billingContact	`BillingContact`	`optional`	The billing contact 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