Learn about PXP's Apple Pay component for Web.
Apple Pay is one of the most secure and convenient payment methods available, widely adopted across e-commerce, retail, and mobile applications. Apple Pay leverages biometric authentication and device-specific security features to provide customers with a seamless and secure checkout experience that reduces friction and increases conversion rates.
With the Apple Pay component, you can benefit from:
- Secure checkout: Use Apple's industry-leading security with tokenised payments, biometric authentication (Touch ID/Face ID), and device-specific encryption that never exposes actual card details.
- Seamless experience: Provide customers with pre-populated shipping and billing information from their Apple ID, eliminating manual form filling and reducing checkout abandonment.
- Native integration: Leverage Apple's official payment sheet that customers recognise and trust, maintaining consistency with their device experience.
- Real-time updates: Dynamically update totals, shipping costs, and available options based on customer selections without requiring page reloads.
- Flexible customisation: Choose between Apple's official SDK rendering or custom CSS implementation to match your brand while maintaining Apple Pay compliance.
- Multi-network support: Accept payments from major card networks including Visa, Mastercard, American Express, and Discover through a single integration.
The Apple Pay component will automatically determine availability based on the customer's device, browser, and region. Apple Pay is available on Safari on macOS and iOS devices, and requires the customer to have a supported payment method configured in their Wallet app.
The Apple Pay component offers two rendering approaches to accommodate different integration needs:
- Official Apple Pay SDK (recommended): Use Apple's official
<apple-pay-button>web component for authentic appearance and behaviour. With automatic updates from Apple and built-in accessibility features, this is the simplest way to provide a consistent user experience. - Custom CSS: Get complete control over button appearance while maintaining Apple Pay functionality. With advanced styling options and custom animations and effects, you can match the button to your brand's look and feel.
You can configure the component to drive your desired flow:
- Immediate payment flow: A synchronous, single-step payment process where the customer completes the payment immediately during checkout and you receive the payment confirmation right away.
- Authorisation flow: An asynchronous, two-step payment process where the customer authorises the payment and you choose whether to capture the funds later. This provides flexibility for order validation and inventory management.
| Aspect | Immediate payment | Authorisation flow |
|---|---|---|
| Intent | Capture | Confirm followed by Capture. |
| Process | Captures payment immediately in one step. | Stores authorisation, later captures funds after order validation. |
| Confirmation | No additional confirmation needed. | Requires confirmation step with capture logic. |
| Flexibility | Immediate payment completion. | Can adjust order, validate inventory, and calculate final costs. |
| Use cases | Digital products and simple orders. | Complex orders, inventory validation, and shipping calculation. |
| Time limit | Immediate settlement. | Authorisation valid for up to 7 days before expiration. |
When you initiate a transaction, you provide key information about the transaction method, amount, and currency.
The transaction method consists of:
- The entry type, which describes the origin of the transaction. For Apple Pay for Web, this is always
Ecom(e-commerce). - The funding type, which describes the payment method used (Apple Pay wallet).
- The intent, which describes the purpose and flow of the transaction.
Apple Pay supports the following intents:
| Intent | Description |
|---|---|
Create | Initialise a payment session and prepare for authorisation. |
Confirm | Authorise a payment and hold funds for later capture. |
Capture | Transfer authorised funds to your account and complete the transaction. |
Void | Cancel a transaction that has been authorised but not captured. |
Refund | Return funds to a customer for a completed transaction. |
Apple Pay availability varies by region and is automatically detected by the component:
- Americas: United States, Canada, Mexico, Brazil.
- Europe: United Kingdom, France, Germany, Italy, Spain, Netherlands, and 40+ other countries.
- Asia-Pacific: Australia, China, Hong Kong, Japan, Singapore, South Korea, and others. For a full list of supported countries and regions, see Apple's official website.
The component automatically detects regional availability and only displays the Apple Pay button when the service is available in the customer's location and on their device.