@shockoe.com/react-apple-pay

React Apple Pay Button

by: SHOCKOE.COM, LLC.

This is the React component for the Apple Pay button.

Installation

npm install @shockoe.com/react-apple-pay

yarn add @shockoe.com/react-apple-pay

Example usage

import ApplePayButton from '@shockoe.com/react-apple-pay';

const getApplePaySession = async (urlSession: string) => {
	// Call your own server to request a new merchant session.
	const response: any = await fetch('https://your-back-end/session', {
		method: 'POST',
		mode: 'cors',
		headers: {
			'Access-Control-Allow-Origin':'*',
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({appleUrl: urlSession})
	});

	return response.json();
}

/**
 * To finalize the transaction, you need to pass the encrypted payment token
 * to your payment processor using their API.
 */
const processApplePayment = (paymentData: any) => {
	return new Promise((resolve) => {
		console.log('paymentData===>', paymentData);
		setTimeout(() => {
			resolve(true);
		}, 3000);
	});
};

<ApplePayButton
	className={styles.payButton}
	merchantIdentifier="merchant.com.applepay"
	transactionInfo={{
			"countryCode": "US",
			"currencyCode": "USD",
			"merchantCapabilities": [
					"supports3DS"
			],
			"supportedNetworks": [
					"visa",
					"masterCard",
					"amex",
					"discover"
			],
			"total": {
					"label": "Demo (Card is not charged)",
					"type": "final",
					"amount": "1.99"
			}
	}}
	getAppleSession={getApplePaySession}
	processApplePayment={processApplePayment}>
	Apple Pay
</ApplePayButton>

Documentation

Visit Sandbox Testing for more information about integrating Apple Pay into your website.

Properties

Property	Type	Info
children	"element"	Requires. Child elements that will be displayed inside the button.
className	"CSS/SASS Module Class Name" | "Class Name"	Optional. The class will directly affect the styles of the button and its children.
merchantIdentifier	"string"	Required. The merchant identifier you registered with Apple for use with Apple Pay. To enable your app to use Apple Pay, register an identifier with Apple that uniquely identifies your business as a merchant able to accept payments. This ID never expires, and can be used in multiple websites and apps.
transactionInfo	"Object"	Required. The ApplePayPaymentRequest requires details including: the total payment for the transaction, the currency, and the supported payment networks. You can optionally pass lineItems to show additional charges and discounts. More Info.
getAppleSession	"Function"	Required. Provides a valid JSON payload with a valid payment session tied to your Merchant ID Your application will need to go through the Merchant Validation process to authenticate itself as a valid Merchant to process a transaction. Upon successful authentication, your server will receive a payment session to submit with your payment request to the Apple Pay JS. Refer to the instructions in Requesting an Apple Pay Payment Session document to implement your server endpoint responsible for fetching the merchant session object from Apple Pay servers. If successful, Apple Pay servers will return a merchant session object, which your server needs to then pass back as the response to the browser. More Info.
processApplePayment	"Function"	Required. Finally, you need to implement the handler that will be responsible for processing the transaction. After the user authenticates the transaction using Face ID, Touch ID, or their device passcode, this handler gets called with the encrypted Apple Pay token. To finalize the transaction, you need to pass the encrypted payment token to your payment processor using their API. The process must be through a promise, if your transaction validation flow was correct, return a resolve with the value true, otherwise a false to indicate to the payment flow that the process did not end as expected wished.

🛠 Local Environment

💽 System Requirements

• node v12^
• yarn

🏛️ Resources

• Create React App
• Apple Pay on the Web
• Husky
• ESLint
• Prettier

🧹 Linting

Linting is ran automatically on commit using Husky

This project was bootstrapped with Create React App.

🛠 Local Setup

Before building/running make sure you run one of the config commands!

1. Clone the repo
2. Install dependencies: yarn install
3. Run the build script: yarn build
4. Run script: yarn pack
5. Copy the generated gzip file to the root of your project
6. in the package.json file, add the following script inside the dependencies section:

"dependencies": {
  ...,
  "react-apple-pay": "file:./react-apple-pay-v##.##.##.tgz"
}

7. Install dependencies in your project: yarn install

Available Scripts

In the project directory, you can run:

yarn lint

Runs eslint and outputs any errors. This is done automatically on commit.

yarn lint-fix

Runs eslint and fixes any errors that it possibly can. Useful to run this before staging your changes.

yarn prettier

Runs prettier and formats all files supported by Prettier in the current directory and its subdirectories..

yarn build

Builds the Pack for production to the lib folder.

The build is minified and the filenames include the hashes.
Your Pack is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.