{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details","required"]},"type":"markdown"},"seo":{"title":"Implementation","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"implementation","__idx":0},"children":["Implementation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete guide to integrating the Apple Pay component into your application."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component provides a secure, streamlined payment experience for Apple device users. The component follows a simple three-step lifecycle:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Initialise:"]}," Configure the SDK with your session and transaction data."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create & mount:"]}," Build the Apple Pay button with your configuration and render it to your page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Handle callbacks:"]}," Respond to payment success, errors, and other events."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically handles Apple Pay authorization, tokenisation, and transaction processing."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Backend verification is mandatory. Always verify payments on your backend before fulfilling orders. Frontend callbacks can be manipulated by malicious users."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-start","__idx":2},"children":["Before you start"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use the Apple Pay component, you first need to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Complete the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/apple-pay/onboarding"},"children":["Apple Pay onboarding"]}," process in the Unity Portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure your website is served over HTTPS (required for Apple Pay)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Verify your domain with Apple Pay (configured in the Unity Portal)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"browser-and-device-compatibility","__idx":3},"children":["Browser and device compatibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay for Web has specific requirements for optimal functionality."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-browsers","__idx":4},"children":["Supported browsers"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari 11.1+ on macOS 10.13.4+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari on iOS 11.2+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Other WebKit-based browsers with Apple Pay support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"device-requirements","__idx":5},"children":["Device requirements"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["iOS devices: iPhone 6 or later, iPad Pro, iPad (5th generation) or later, iPad Air 2, iPad mini 3 or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["macOS devices: MacBook Pro with Touch Bar, MacBook Air (2018 or later), iMac Pro, Mac Pro (2019 or later), or any Mac with Touch ID"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"configuration-requirements","__idx":6},"children":["Configuration requirements"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer must have a supported payment method in their Wallet"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The device must have Touch ID, Face ID, or passcode enabled"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-install-the-web-sdk-library","__idx":7},"children":["Step 1: Install the Web SDK library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install the latest version of the Web SDK from the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.npmjs.com/package/@pxpio/web-components-sdk","target":"_blank"},"children":["npm public registry"]},". You'll need to have Node.js 22.x or higher."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"npm i @pxpio/web-components-sdk\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component is part of the main SDK package. Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," directly from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@pxpio/web-components-sdk"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-get-your-api-credentials","__idx":8},"children":["Step 2: Get your API credentials"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In order to initialise Components for Web, you'll need to send authenticated requests to the PXP API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To get your credentials:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},", go to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Merchant groups"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select a merchant group."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Inbound calls"]}," tab."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Copy the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Client ID"]}," in the top-right corner."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New token"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose a number of days before token expiry. For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["30"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]}," to confirm. Your token is now created."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Copy the token ID and token value. Make sure to keep these confidential to protect the integrity of your authentication process."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As best practice, we recommend regularly generating and implementing new tokens."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-create-a-session-on-your-backend","__idx":9},"children":["Step 3: Create a session on your backend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component requires a session from the PXP Sessions API. This must be done on your backend using HMAC authentication to keep your credentials secure."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed HMAC authentication instructions, see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/implementation#step-3-create-a-session-on-your-backend"},"children":["card implementation guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-request-example","__idx":10},"children":["Session request example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"merchant\": \"MERCHANT-1\",\n \"site\": \"SITE-1\",\n \"sessionTimeout\": 120,\n \"merchantTransactionId\": \"txn-123\",\n \"transactionMethod\": {\n \"intent\": {\n \"card\": \"Purchase\"\n }\n },\n \"amounts\": {\n \"currencyCode\": \"USD\",\n \"transactionValue\": 25.00\n },\n \"allowTransaction\": true\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-response","__idx":11},"children":["Session response"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The session response will include Apple Pay configuration if it's enabled for your site:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"sessionId\": \"c5f0799b-0839-43ce-abc5-5b462a98f250\",\n \"hmacKey\": \"904bc42395d4af634e2fd48ee8c2c7f52955a1da97a3aa3d82957ff12980a7bb\",\n \"encryptionKey\": \"20d175a669ad3f8c195c9c283fc86155\",\n \"sessionExpiry\": \"2025-05-19T13:39:20.3843454Z\",\n \"allowedFundingTypes\": {\n \"cardSchemes\": [\"Visa\", \"Mastercard\", \"AmericanExpress\"],\n \"cards\": [],\n \"wallets\": {\n \"applePay\": {\n \"merchantId\": \"merchant.com.yourcompany.yourapp\"\n }\n }\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantId"]}," is automatically included in the session response when Apple Pay is configured for your site in the Unity Portal."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-initialise-the-sdk-on-your-frontend","__idx":12},"children":["Step 4: Initialise the SDK on your frontend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," from the SDK and initialise with your configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\n\n// Get session data from your backend\nconst sessionData = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' }\n}).then(response => response.json());\n\n// Initialise the SDK\nconst pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MERCHANT-1',\n ownerType: 'MerchantGroup',\n transactionData: {\n currency: 'USD',\n amount: 25,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation\n },\n merchantTransactionId: crypto.randomUUID(),\n merchantTransactionDate: () => new Date().toISOString()\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n onGetShopper: () => Promise.resolve({ \n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe'\n })\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5-create-and-configure-the-apple-pay-button","__idx":13},"children":["Step 5: Create and configure the Apple Pay button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the SDK's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create()"]}," method to build the Apple Pay button with your desired configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const applePayButton = pxpSdk.create('apple-pay-button', {\n merchantDisplayName: 'Merchant Store',\n paymentDescription: 'Apple Pay payment',\n style: {\n type: 'buy',\n buttonstyle: 'black',\n locale: 'en-US',\n },\n paymentRequest: {\n merchantCapabilities: ['supports3DS'],\n supportedNetworks: ['visa', 'masterCard', 'amex'],\n countryCode: 'US',\n currencyCode: 'USD',\n total: {\n label: 'Pay',\n amount: '25.00',\n },\n },\n onPreAuthorisation: () => {\n return {};\n },\n onPostAuthorisation: (data: any) => {\n // CRITICAL: Verify on backend before fulfilling order\n await verifyPaymentOnBackend(data)\n },\n onError: (error: any) => {\n console.error('Apple Pay failed:', error);\n },\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-options","__idx":14},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantDisplayName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The name of your store displayed in the Apple Pay sheet."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDescription"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Description of the payment shown to the customer."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button styling options."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.type"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button label type. Possible values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'buy'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'donate'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'plain'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'check-out'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'book'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'subscribe'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.buttonstyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button colour. Possible values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'black'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'white'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'white-outline'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.locale"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button locale (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'en-US'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apple Pay payment request configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.merchantCapabilities"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Merchant capabilities. Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['supports3DS']"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.supportedNetworks"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported card networks. Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['visa', 'masterCard', 'amex']"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.countryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Merchant country code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'US'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.currencyCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment currency code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'USD'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.total"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Total payment information."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.total.label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label for the total amount."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentRequest.total.amount"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Total amount as a string."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired before authorisation. Return an empty object ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{}"]}," to proceed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired when payment succeeds."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired when an error occurs."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-6-mount-the-button-to-your-page","__idx":15},"children":["Step 6: Mount the button to your page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a container element to your page where the Apple Pay button will be rendered:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Then call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount()"]}," method to render the button:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"applePayButton.mount('apple-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-7-unmount-the-component","__idx":16},"children":["Step 7: Unmount the component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When your component unmounts (e.g., when navigating away or cleaning up), call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}," method:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"return () => {\n applePayButton.unmount();\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-8-handle-callbacks","__idx":17},"children":["Step 8: Handle callbacks"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"ongetshopper-callback","__idx":18},"children":["onGetShopper callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns shopper information for transaction processing."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onGetShopper: () => Promise.resolve({ \n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe',\n phoneNumber: '+1-555-0123'\n})\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onpostauthorisation-callback","__idx":19},"children":["onPostAuthorisation callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fires when payment succeeds. ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CRITICAL: Always verify on your backend before fulfilling orders."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onPostAuthorisation: async (data) => {\n // Verify payment on backend\n const verified = await fetch('/api/verify-payment', {\n method: 'POST',\n body: JSON.stringify({\n systemTransactionId: data.systemTransactionId,\n merchantTransactionId: data.merchantTransactionId\n })\n }).then(r => r.json());\n \n if (verified.success) {\n globalThis.location.href = `/success?orderId=${verified.orderId}`;\n }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Never trust frontend callbacks for order fulfillment. Always verify payments on your backend using webhooks or the Query Transaction API before fulfilling orders."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-9-backend-verification-critical","__idx":20},"children":["Step 9: Backend verification (CRITICAL)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontend callbacks can be manipulated by malicious users. You must verify all payments on your backend before fulfilling orders."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the same webhook and API verification patterns described in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/implementation#step-8-backend-verification-critical"},"children":["card implementation guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-example","__idx":21},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a complete example showing Apple Pay integration in a React component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\nimport { useEffect, useState } from 'react';\n\nexport default function ApplePayPage() {\n const [sessionData, setSessionData] = useState(null);\n\n const createSession = async () => {\n const createdSession = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: \n JSON.stringify({\n merchant: \"MERCHANT-1\",\n site: \"SITE-1\",\n sessionTimeout: 120,\n merchantTransactionId: crypto.randomUUID(),\n transactionMethod: {\n intent: {\n card: \"Authorisation\"\n }\n },\n amounts: {\n currencyCode: \"USD\",\n transactionValue: 25.00\n },\n allowTransaction: true\n })\n,\n }).then((response) => response.json());\n setSessionData(createdSession);\n };\n\n useEffect(() => {\n createSession();\n }, []);\n\n useEffect(() => {\n if (!sessionData) {\n return;\n }\n\n const pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MERCHANT_GROUP_1', // Replace with your merchant group id\n ownerType: 'MerchantGroup',\n transactionData: {\n currency: 'USD',\n amount: 25,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation,\n },\n merchantTransactionId: sessionData.merchantTransactionId,\n merchantTransactionDate: () => new Date().toISOString(),\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n onGetShopper: async () => {\n return {\n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe',\n };\n },\n });\n\n const applePayButton = pxpSdk.create('apple-pay-button', {\n merchantDisplayName: 'Merchant store',\n paymentDescription: 'Apple Pay payment',\n style: {\n type: 'buy',\n buttonstyle: 'black',\n locale: 'en-US',\n },\n paymentRequest: {\n merchantCapabilities: ['supports3DS'],\n supportedNetworks: ['visa', 'masterCard', 'amex'],\n countryCode: 'US',\n currencyCode: 'USD',\n total: {\n label: 'Pay',\n amount: '25.00',\n },\n },\n onPreAuthorisation: () => {\n return {};\n },\n onPostAuthorisation: async (data: any) => {\n console.log('Payment successful:', data.systemTransactionId, data.merchantTransactionId);\n // CRITICAL: Verify on backend before fulfilling order\n await verifyPaymentOnBackend(data)\n },\n onError: (error: any) => {\n console.error('Apple Pay failed:', error);\n },\n });\n\n applePayButton.mount('apple-pay-container');\n\n return () => {\n applePayButton.unmount();\n };\n }, [sessionData]);\n\n return (\n
\n

Apple Pay

\n
\n
\n );\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":22},"children":["What's next?"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you've integrated Apple Pay, here are some recommended next steps:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/apple-pay/customisation"},"children":["Customisation"]},":"]}," Learn how to customise the Apple Pay button appearance."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/apple-pay/events"},"children":["Events"]},":"]}," Explore all available callbacks and event handling."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/apple-pay/troubleshooting"},"children":["Testing"]},":"]}," Use test cards and sandbox environment to test your integration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/get-started/about-webhooks"},"children":["Configure webhooks"]},":"]}," Set up server-side webhook handling for reliable payment verification."]}]}]},"headings":[{"value":"Implementation","id":"implementation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Browser and device compatibility","id":"browser-and-device-compatibility","depth":3},{"value":"Supported browsers","id":"supported-browsers","depth":4},{"value":"Device requirements","id":"device-requirements","depth":4},{"value":"Configuration requirements","id":"configuration-requirements","depth":4},{"value":"Step 1: Install the Web SDK library","id":"step-1-install-the-web-sdk-library","depth":2},{"value":"Step 2: Get your API credentials","id":"step-2-get-your-api-credentials","depth":2},{"value":"Step 3: Create a session on your backend","id":"step-3-create-a-session-on-your-backend","depth":2},{"value":"Session request example","id":"session-request-example","depth":3},{"value":"Session response","id":"session-response","depth":3},{"value":"Step 4: Initialise the SDK on your frontend","id":"step-4-initialise-the-sdk-on-your-frontend","depth":2},{"value":"Step 5: Create and configure the Apple Pay button","id":"step-5-create-and-configure-the-apple-pay-button","depth":2},{"value":"Configuration options","id":"configuration-options","depth":3},{"value":"Step 6: Mount the button to your page","id":"step-6-mount-the-button-to-your-page","depth":2},{"value":"Step 7: Unmount the component","id":"step-7-unmount-the-component","depth":2},{"value":"Step 8: Handle callbacks","id":"step-8-handle-callbacks","depth":2},{"value":"onGetShopper callback","id":"ongetshopper-callback","depth":3},{"value":"onPostAuthorisation callback","id":"onpostauthorisation-callback","depth":3},{"value":"Step 9: Backend verification (CRITICAL)","id":"step-9-backend-verification-critical","depth":2},{"value":"Complete example","id":"complete-example","depth":2},{"value":"What's next?","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Implementation"}},"lastModified":"2026-06-12T11:56:36.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/apple-pay/implementation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}