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.
- 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
npm install apple-pay-buttonimport { ApplePayButton } from 'apple-pay-button';
function App() {
return (
<ApplePayButton onClick={() => { /* handle Apple Pay */ }} />
);
}Below is a more complete example, including Apple Pay session handling:
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 (
<div className="App">
<ApplePayButton
onClick={onClick}
style={{ width: '100%', borderRadius: '8px' }}
type="continue"
/>
</div>
);
}
// --- 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.");
};
}| 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'
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
MIT © Johan Corrales
