@tap-payments/apple-pay-button

v1.0.19

Published

12 days ago

Apple Pay Button React Component

Downloads

1,130

0High
0Medium
0Low

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,
 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: '[email protected]',
     //"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')
   }}
  />
 )
}

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://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: '[email protected]',
							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>

Configurations

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

apple-pay-button

Install

Examples

ES6

Vanilla JS

Configurations