npm package: @shockoe.com/react-apple-pay
Description: Apple Pay JS with Custom Button
Author: Alejandro Estrada
Latest version: 1.0.2

# React Apple Pay Button [![npm version](https://badge.fury.io/js/@shockoe.com%2Freact-apple-pay.svg)](https://badge.fury.io/js/@shockoe.com%2Freact-apple-pay)
by: SHOCKOE.COM, LLC.

This is the React component for the Apple Pay button.

## Installation

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

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

## Example usage
```jsx
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](https://developer.apple.com/apple-pay/sandbox-testing/) for more information about
integrating Apple Pay into your website.

### Properties

<table>
  <tr>
    <th align="left">Property</th>
    <th align="left">Type</th>
    <th align="left">Info</th>
  </tr>
  <tr>
    <td><p>children</p></td>
    <td><p><code>"element"</code></p></td>
    <td>
      <p>Requires.</p>
      <p>Child elements that will be displayed inside the button.</p>
    </td>
  </tr>
  <tr>
    <td><p>className</p></td>
    <td><p><code>"CSS/SASS Module Class Name" | "Class Name"</code></p></td>
    <td>
      <p>Optional.</p>
      <p>The class will directly affect the styles of the button and its children.</p>
    </td>
  </tr>
  <tr>
    <td><p>merchantIdentifier</p></td>
    <td><p><code>"string"</code></p></td>
    <td>
      <p>Required.</p>
      <p>The merchant identifier you registered with Apple for use with Apple Pay.</p>
      <p>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.</p>
      <p>This ID never expires, and can be used in multiple websites and apps.</p>
    </td>
  </tr>
  <tr>
    <td><p>transactionInfo</p></td>
    <td><p><code>"Object"</code></p></td>
    <td>
      <p>Required.</p>
      <p>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.</p>
      <p><a href="https://applepaydemo.apple.com/#createAPayment">More Info</a>.</p>
    </td>
  </tr>
  <tr>
    <td><p>getAppleSession</p></td>
    <td><p><code>"Function"</code></p></td>
    <td>
      <p>Required.</p>
      <p>Provides a valid JSON payload with a valid payment session tied to your Merchant ID</p>
      <p>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.</p>
			<p>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. <a href="https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/requesting_an_apple_pay_payment_session">More Info</a>.</p>
    </td>
  </tr>
  <tr>
    <td><p>processApplePayment</p></td>
    <td><p><code>"Function"</code></p></td>
    <td>
      <p>Required.</p>
      <p>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.</p>
			<p>The process must be through a promise, if your transaction validation flow was correct, return a <code>resolve</code> with the value <code>true</code>, otherwise a <code>false</code> to indicate to the payment flow that the process did not end as expected wished.</p>
    </td>
  </tr>
</table>

## 🛠 Local Environment

## 💽 System Requirements
- node v12^
- yarn

## 🏛️ Resources
- [Create React App](https://create-react-app.dev/)
- [Apple Pay on the Web](https://applepaydemo.apple.com/)
- [Husky](https://typicode.github.io/husky/#/?id=install-1)
- [ESLint](https://eslint.org/docs/latest/user-guide/getting-started)
- [Prettier](https://prettier.io/docs/en/install.html)

## 🧹 Linting
Linting is ran automatically on commit using Husky

This project was bootstrapped with [Create React App](https://github.com/facebook/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.<br />

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

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.


## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).