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

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