Overview
Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay flow. Designed to be used within justifi-modular-checkout.
Usage
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-apple-pay</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.esm.js"></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.js"
></script>
<style>
/** These are the available parts for styling the component. */ ::part(button){' '}
{
// button styles
}
</style>
</head>
<body>
<justifi-modular-checkout
auth-token="authToken"
checkout-id="ch_123"
>
<justifi-apple-pay />
<justifi-checkout-summary />
</justifi-modular-checkout>
</body>
</html>
Props, Events & Methods
| Name | Type | Required | Default | Description |
|---|
button-style | `ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE` | No |
button-type | `ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE |
country-code | string | No | "US" | |
disabled | boolean | No | false | |
height | string | No | "48px" | |
initiative-context | string | No | "dev-checkout.justifi-staging.com" | |
merchant-display-name | string | No | "JustiFi Checkout" | |
merchant-identifier | string | No | "merchant.com.staging-justifi.checkout-dev" | |
show-skeleton | boolean | No | true | |
width | string | No | "100%" | |
Events
applePayStarted: Fires when the Apple Pay sheet is presented.applePayCompleted: Fires when payment completes; includes success status and payment method details.applePayCancelled: Fires when the user dismisses the Apple Pay sheet.applePayError: Surfaces tokenization failures (network issues, validation errors, etc.).
Public methods
isSupported() – Check if Apple Pay is available on the current device/browser.getPaymentMethods() – Returns available payment method types.abort() – Programmatically cancel an in-progress Apple Pay session.
Theming & Layout
- Styling is intentionally limited to keep Apple compliance.
| Part | Description | DOM target |
|---|
::part(skeleton) | | — |