Apple Pay Button (React) Library

A TypeScript React library for creating an Apple Pay Button, following the official Apple Pay JavaScript guidelines. Easily integrate Apple Pay into your React applications.

---

Table of Contents

- Features
- Installation
- Quick Start
- Usage
- Props
- Contributing
- License
- Resources

---

Features

- Fully customizable Apple Pay button for React
- TypeScript support
- Follows Apple Pay JavaScript guidelines
- Easy integration and event handling
- Supports all official Apple Pay button types and styles

---

Installation

``bash
npm install apple-pay-button
`

---

Quick Start

`tsx
import { ApplePayButton } from 'apple-pay-button';

function App() {
return (
{ / handle Apple Pay / }} />
);
}
`

---

Usage

Below is a more complete example, including Apple Pay session handling:

`tsx
import { ApplePayButton } from 'apple-pay-button';

function App() {
const onClick = () => {
// Define ApplePayPaymentRequest
const applePayRequest: ApplePayJS.ApplePayPaymentRequest = {
countryCode: 'US',
currencyCode: 'USD',
merchantCapabilities: ["supports3DS"],
supportedNetworks: ["visa", "masterCard", "amex", "discover"],
total: {
label: "Merchant Name",
type: "final",
amount: "10.00",
}
};

// Create ApplePaySession
const session = new ApplePaySession(3, applePayRequest);
handleEventsForApplePay(session);
session.begin();
};

return (


);
}

// --- Apple Pay session event handling ---
function handleEventsForApplePay(session: ApplePaySession) {
session.onvalidatemerchant = async (event: ApplePayJS.ApplePayValidateMerchantEvent) => {
// Call your own server to request a new merchant session.
const merchantSession = await validateMerchant(event.validationURL);
if (merchantSession) {
session.completeMerchantValidation(merchantSession);
} else {
console.error("Error during validating merchant");
}
};

session.onpaymentmethodselected = (event: ApplePayJS.ApplePayPaymentMethodSelectedEvent) => {
const update: ApplePayJS.ApplePayPaymentMethodUpdate = {
newTotal: {
label: "Merchant Name",
type: "final",
amount: "10.00",
}
};
session.completePaymentMethodSelection(update);
};

session.onshippingmethodselected = (event: ApplePayJS.ApplePayShippingMethodSelectedEvent) => {
const update: ApplePayJS.ApplePayShippingMethodUpdate = {
newTotal: {
label: "Merchant Name",
type: "final",
amount: "10.00",
}
};
session.completeShippingMethodSelection(update);
};

session.onshippingcontactselected = (event: ApplePayJS.ApplePayShippingContactSelectedEvent) => {
const update: ApplePayJS.ApplePayShippingMethodUpdate = {
newTotal: {
label: "Merchant Name",
type: "final",
amount: "10.00",
}
};
session.completeShippingContactSelection(update);
};

session.onpaymentauthorized = async (event: ApplePayJS.ApplePayPaymentAuthorizedEvent) => {
const paymentData = event.payment;
if (paymentData.token) {
// Forward token to your gateway for processing payment and return result to apple pay session
const result: ApplePayJS.ApplePayPaymentAuthorizationResult = {
status: ApplePaySession.STATUS_SUCCESS,
};
session.completePayment(result);
} else {
const result: ApplePayJS.ApplePayPaymentAuthorizationResult = {
status: ApplePaySession.STATUS_FAILURE,
};
session.completePayment(result);
}
};

session.oncancel = (event: ApplePayJS.Event) => {
console.log("Session Cancelled.");
};
}
``

---

Props

| Prop | Type | Default | Description |
|--------------|----------------------------------------------------------------------|--------------|--------------------------------------------------------------------|
| buttonStyle | 'black' \| 'white' \| 'white-outline' | 'black' | The style of the Apple Pay button. |
| type | ButtonType | 'buy' | The type of the Apple Pay button. |
| locale | string | 'en-US' | The locale for the Apple Pay button. |
| onClick | () => void | — | The callback function when the Apple Pay button is clicked. |
| style | { width?, height?, borderRadius?, padding?, boxSizing? } | — | The style object for the Apple Pay button. |
| disabled | boolean | false | Whether the Apple Pay button is disabled. |

ButtonType options:

Show ButtonType values

- 'plain'
- 'add-money'
- 'book'
- 'buy'
- 'check-out'
- 'continue'
- 'contribute'
- 'donate'
- 'order'
- 'pay'
- 'reload'
- 'rent'
- 'set-up'
- 'subscribe'
- 'support'
- 'tip'
- 'top-up'

---

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

---

License

MIT © Johan Corrales

---

Resources

- Apple Pay Button Storybook - Interactive component documentation
- Apple Pay Button Demo (Vercel) - Alternative demo site
- Apple Pay JavaScript Guidelines
- Apple Pay Demo
- Apple Pay Marketing