{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition","endpoint"]},"type":"markdown"},"seo":{"title":"Apple Pay","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":"apple-pay","__idx":0},"children":["Apple Pay"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable secure, biometric-authenticated checkout on Safari and iOS devices."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay is automatically included in your drop-in when enabled in your session and when the customer's device supports it. The drop-in handles all Apple Pay setup, button rendering, and payment processing automatically."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"key-benefits","__idx":2},"children":["Key benefits"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Automatic detection:"]}," Only shows on Safari/iOS with Apple Pay configured"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Native experience:"]}," Uses device's native Apple Pay sheet with Face ID/Touch ID"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Zero configuration:"]}," Drop-in handles merchant IDs and tokenisation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Unified callbacks:"]}," Same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSuccess"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}," as other payment methods"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Fastest checkout:"]}," Customers tap, authenticate, and complete their payment (typically under 3 seconds)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":3},"children":["How it works"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer clicks \"Apple Pay\" in the accordion. A native payment sheet appears (iOS/macOS)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer authenticates with Face ID, Touch ID, or passcode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer approves the payment. The payment sheet closes automatically."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The payment is processed through Unity."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSuccess"]}," callback fires."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":4},"children":["Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure Apple Pay-specific settings and callbacks for dynamic pricing updates."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-properties","__idx":5},"children":["Configuration properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following properties are available for Apple Pay configuration:"]},{"$$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":{"width":"50%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","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":["shippingContactConfiguration"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayShippingContactConfiguration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for collecting the shipping address. Should be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingContactConfiguration"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingContactConfiguration"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayBillingContactConfiguration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for collecting the billing address. Should be used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingContactConfiguration"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingContactSelected"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(contact) => Promise<ApplePayShippingContactUpdate>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a shipping contact is selected by the customer or when Apple Pay automatically applies the user's default shipping address"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingMethodSelected"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(method) => Promise<ApplePayShippingMethodUpdate>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a shipping method is selected by the customer"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPaymentMethodSelected"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(paymentMethod) => Promise<ApplePayPaymentMethodUpdate>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a payment method is selected by the customer or when Apple Pay automatically selects a default payment method (for example, the top card in the user's wallet)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCouponCodeChanged"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(couponCode) => Promise<ApplePayCouponCodeUpdate>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when coupon code is entered"]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Callbacks may be invoked even when the user doesn't explicitly perform an action. This can occur when Apple Pay applies default selections."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"contact-fields-and-pre-filling","__idx":6},"children":["Contact fields and pre-filling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay allows you to collect contact information (shipping and billing addresses) and optionally pre-fill this information for the customer. For example, you can pre-fill a logged-in user's saved address from your database, or leave the fields empty to let Apple Pay use the customer's default address from their wallet."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following properties are available for contact configuration:"]},{"$$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":{"width":"50%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","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":["requireShippingContactFields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayContactField[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of required shipping fields that the customer must provide (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['email', 'phone', 'name', 'postalAddress']"]},"). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[]"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingContact"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayPaymentContact"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pre-filled shipping contact information shown by default. The customer can modify these values. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requireBillingContactFields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayContactField[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of required billing fields that the customer must provide (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['postalAddress', 'name']"]},"). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[]"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingContact"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayPaymentContact"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pre-filled billing contact information shown by default. The customer can modify these values. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"available-contact-fields","__idx":7},"children":["Available contact fields"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["email"]}," - Email address"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phone"]}," - Phone number"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["name"]}," - Full name"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postalAddress"]}," - Postal/shipping address"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneticName"]}," - Phonetic name (for Japanese and Chinese)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"contact-object-properties","__idx":8},"children":["Contact object properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When pre-filling contact information using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingContact"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingContact"]},", the following properties are available:"]},{"$$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":{"width":"30%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"70%","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":["givenName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["First name (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'John'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["familyName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Last name (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'Doe'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["emailAddress"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Email address (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'john.doe@example.com'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneNumber"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Phone number with country code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'+1234567890'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addressLines"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Street address lines (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['123 Main St', 'Apt 4B']"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locality"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["City (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'New York'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["administrativeArea"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["State/Province code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'NY'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'CA'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postalCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ZIP/Postal code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'10001'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["country"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Country name (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'United States'"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["countryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ISO 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":["phoneticGivenName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Phonetic first name (for Japanese/Chinese names)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneticFamilyName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Phonetic last name (for Japanese/Chinese names)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":9},"children":["Example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to require specific fields and pre-fill contact information for a logged-in user:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"applePay: {\n  // Shipping contact configuration\n  shippingContactConfiguration: {\n    // REQUIRED: Fields the customer must provide\n    requireShippingContactFields: ['email', 'phone', 'name', 'postalAddress'],\n    \n    // OPTIONAL: Pre-fill shipping information (customer can modify)\n    shippingContact: {\n      givenName: 'John',\n      familyName: 'Doe',\n      emailAddress: 'john.doe@example.com',\n      phoneNumber: '+1234567890',\n      addressLines: ['123 Main St', 'Apt 4B'],\n      locality: 'New York',\n      administrativeArea: 'NY',\n      postalCode: '10001',\n      country: 'United States',\n      countryCode: 'US'\n    }\n  },\n  \n  // Billing contact configuration\n  billingContactConfiguration: {\n    // REQUIRED: Fields the customer must provide for AVS verification\n    requireBillingContactFields: ['postalAddress', 'name'],\n    \n    // OPTIONAL: Pre-fill billing information (customer can modify)\n    billingContact: {\n      givenName: 'John',\n      familyName: 'Doe',\n      addressLines: ['123 Main St'],\n      locality: 'New York',\n      administrativeArea: 'NY',\n      postalCode: '10001',\n      country: 'United States',\n      countryCode: 'US'\n    }\n  }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-points","__idx":10},"children":["Key points"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required fields"]},": When you specify ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requireShippingContactFields"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requireBillingContactFields"]},", Apple Pay enforces that the customer provides these fields before payment can be completed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pre-filled data"]},": The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingContact"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingContact"]}," objects provide default values that appear in the payment sheet, saving the customer time. The customer can still modify these values."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Validation"]},": Even if you pre-fill data, the customer can change it. Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingContactSelected"]}," callback to validate the final address before completing payment."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"summary","__idx":11},"children":["Summary"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following table summarises how contact configuration properties work:"]},{"$$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":"Configuration"},"children":["Configuration"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Purpose"},"children":["Purpose"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Effect"},"children":["Effect"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requireShippingContactFields: ['email', 'phone', 'name', 'postalAddress']"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specify ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["required"]}," fields"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Customer ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["must"]}," provide these fields to complete payment"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingContact: { givenName: 'John', ... }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Provide ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["default"]}," values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["These values appear ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pre-filled"]}," in the payment sheet (customer can modify)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Both together"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Require fields + pre-fill"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Customer sees pre-filled data but must ensure all required fields are complete"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"settings-used-from-global-configuration","__idx":12},"children":["Settings used from global configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay inherits the following settings from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["methodConfig.global"]},":"]},{"$$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":{"width":"40%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"60%","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":["acceptedCardNetworks"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Which card brands to accept through Apple Pay (falls back to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["session.allowedFundingTypes.cardSchemes"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowedCardFundingSource"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Which funding types to accept (Credit, Debit, Prepaid)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionInfo.countryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Country code for the transaction (falls back to Unity Portal merchant country: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.merchantConfiguration.countryCode"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionInfo.merchantDisplayName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Merchant name shown in Apple Pay sheet (falls back to Unity Portal merchant name: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteConfig.merchantConfiguration.merchantName"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionInfo"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Other transaction display information (totalLabel, lineItems, etc.)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingOptions"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Available shipping options"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(paymentMethod) => boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls whether to show consent checkbox for Apple Pay"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(paymentMethod, data) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when user cancels Apple Pay payment (dismisses payment sheet)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-example","__idx":13},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example demonstrates a full Apple Pay configuration with global settings, contact configuration, and all callback implementations:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"methodConfig: {\n  global: {\n    // Apple Pay uses these settings\n    acceptedCardNetworks: ['Visa', 'Mastercard', 'American Express'],\n    allowedCardFundingSource: ['CREDIT', 'DEBIT'],\n    transactionInfo: {\n      countryCode: 'US',\n      merchantDisplayName: 'Demo Store',\n      totalLabel: 'Total Amount',\n      totalStatus: 'FINAL',\n      lineItems: [\n        { label: 'Subtotal', amount: '95.00' },\n        { label: 'Tax', amount: '5.00' }\n      ]\n    },\n    shippingOptions: [\n      { id: 'ground', label: 'Ground Shipping', amount: '5.00', description: 'Arrives in 5-7 days' },\n      { id: 'express', label: 'Express Shipping', amount: '15.00', description: 'Arrives in 2-3 days' }\n    ]\n  },\n  applePay: {\n    // Shipping contact configuration\n    shippingContactConfiguration: {\n      // Require specific shipping fields from the customer\n      requireShippingContactFields: ['email', 'phone', 'name', 'postalAddress']\n    },\n    \n    // Billing contact configuration (optional)\n    billingContactConfiguration: {\n      // Require specific billing fields from the customer\n      requireBillingContactFields: ['postalAddress', 'name']\n    },\n    \n    // Called when shipping contact is selected\n    onShippingContactSelected: async (contact) => {\n      console.log('Shipping contact selected:', contact);\n      \n      // Update pricing based on shipping location\n      return {\n        newTotal: {\n          label: 'Total',\n          amount: '105.00',\n          type: 'final'\n        },\n        newLineItems: [\n          { label: 'Subtotal', amount: '95.00', type: 'final' },\n          { label: 'Shipping', amount: '10.00', type: 'final' }\n        ]\n      };\n    },\n    \n    // Called when shipping method is selected\n    onShippingMethodSelected: async (method) => {\n      console.log('Shipping method selected:', method);\n      \n      // Update total based on shipping method\n      const shippingCost = method.identifier === 'express' ? 15.00 : 5.00;\n      const newTotal = 95.00 + shippingCost;\n      \n      // Optional: Update session on backend for consistency\n      // await updateSessionOnBackend(sessionData.sessionId, {\n      //   amounts: { transactionValue: newTotal, currencyCode: 'USD' }\n      // });\n      \n      return {\n        newTotal: {\n          label: 'Total',\n          amount: newTotal.toFixed(2),\n          type: 'final'\n        },\n        newLineItems: [\n          { label: 'Subtotal', amount: '95.00', type: 'final' },\n          { label: 'Shipping', amount: shippingCost.toFixed(2), type: 'final' }\n        ]\n      };\n    },\n    \n    // Called when payment method (card type) is selected\n    onPaymentMethodSelected: async (paymentMethod) => {\n      console.log('Payment method selected:', paymentMethod);\n      \n      // Add credit card processing fee for credit cards\n      const creditCardFee = paymentMethod.type === 'credit' ? 2.50 : 0;\n      \n      return {\n        newTotal: {\n          label: 'Total',\n          amount: (100.00 + creditCardFee).toFixed(2),\n          type: 'final'\n        },\n        newLineItems: [\n          { label: 'Subtotal', amount: '100.00', type: 'final' },\n          ...(creditCardFee > 0 ? [{ label: 'Credit Card Fee', amount: creditCardFee.toFixed(2), type: 'final' }] : [])\n        ]\n      };\n    },\n    \n    // Called when coupon code is entered\n    onCouponCodeChanged: async (couponCode) => {\n      console.log('Coupon code entered:', couponCode);\n      \n      // Validate coupon and apply discount\n      const coupons: Record<string, number> = {\n        'SAVE10': 10.00,\n        'SAVE20': 20.00,\n        'WELCOME5': 5.00\n      };\n      \n      const discount = coupons[couponCode.toUpperCase()] || 0;\n      \n      return {\n        newTotal: {\n          label: 'Total',\n          amount: (100.00 - discount).toFixed(2),\n          type: 'final'\n        },\n        newLineItems: [\n          { label: 'Subtotal', amount: '100.00', type: 'final' },\n          ...(discount > 0 ? [{ label: 'Discount', amount: (-discount).toFixed(2), type: 'final' }] : [])\n        ]\n      };\n    }\n  }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apple-pay-requirements","__idx":14},"children":["Apple Pay requirements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay requires the following to function correctly:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTTPS"]},": Your website must be served over HTTPS. Apple Pay doesn't work on HTTP connections."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Domain verification"]},": Your domain must be registered and verified in the Unity Portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant certificate"]},": Apple Pay merchant certificate must be configured in the Unity Portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Browser compatibility"]},": Apple Pay is supported on Safari and Safari WebView. It works on:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari on macOS"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari on iOS (iPhone 6 or later, iPad Air 2 or later)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari WebView in native iOS apps"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Customer setup"]},": The customer must have at least one card added to their Apple Wallet."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"implementation","__idx":15},"children":["Implementation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apple Pay works through the standard implementation, with no Apple Pay-specific code needed for basic usage:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import CheckoutDropIn from '@pxpio/web-components-sdk/src/checkoutDropIn/CheckoutDropIn';\nimport IntentType from '@pxpio/web-components-sdk/src/basePxpCheckout/types/IntentType';\nimport PaymentMethod from '@pxpio/web-components-sdk/src/components/checkoutDropInComponents/types/PaymentMethod';\nimport { BaseSubmitResult } from '@pxpio/web-components-sdk/src/checkoutDropIn/types/BaseSubmitResult';\nimport BaseSdkException from '@pxpio/web-components-sdk/src/types/sdkExceptions/BaseSdkException';\n\n// Get session from backend (with Apple Pay enabled)\nconst sessionData = await fetch('/api/create-session', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' }\n}).then(response => response.json());\n\n// Initialise Drop-in\nconst checkoutDropIn = CheckoutDropIn.initialize({\n  environment: 'test',\n  session: sessionData, // Must include applePay in allowedFundingTypes.wallets\n  ownerId: 'MERCHANT-1',\n  ownerType: 'MerchantGroup',\n  transactionData: {\n    currency: 'USD',\n    amount: 99.99,\n    entryType: 'Ecom',\n    intent: {\n      card: IntentType.Authorisation,\n      paypal: IntentType.Authorisation\n    },\n    merchantTransactionId: crypto.randomUUID(),\n    merchantTransactionDate: () => new Date().toISOString()\n  },\n  onGetShopper: () => Promise.resolve({ id: 'shopper-001' }),\n  onSuccess: async (result: BaseSubmitResult) => {\n    console.log('Apple Pay payment successful!');\n    console.log('System transaction ID:', result.systemTransactionId);\n    console.log('Payment method:', result.paymentMethod); // Will be \"ApplePay\"\n    \n    // CRITICAL: Verify on backend\n    await verifyPaymentOnBackend(result);\n  },\n  onError: (error: BaseSdkException) => {\n    console.error('Apple Pay error:', error);\n    \n    // Handle specific error scenarios\n    if (error.ErrorCode === 'SDK0615') {\n      // User cancelled Apple Pay - don't show error\n      console.log('User cancelled Apple Pay');\n    } else if (error.ErrorCode === 'SDK1119') {\n      // Apple Pay payment failed\n      alert('Apple Pay payment failed. Please try a different payment method.');\n    } else if (error.ErrorCode === 'SDK0601') {\n      // Apple Pay not available\n      alert('Apple Pay is not available on this device or browser.');\n    } else if (error.message.toLowerCase().includes('declined')) {\n      alert('Payment declined. Please try a different payment method.');\n    } else {\n      alert(`Payment failed: ${error.message}`);\n    }\n  }\n});\n\n// Mount Drop-in\ncheckoutDropIn.create('checkout-drop-in-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-configuration-backend","__idx":16},"children":["Session configuration (backend)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable Apple Pay in your session request:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// BACKEND: Create session with Apple Pay enabled\nconst sessionRequest = {\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: 99.99\n  },\n  allowedFundingTypes: {\n    card: true,\n    wallets: {\n      applePay: true  // Enable Apple Pay\n    }\n  },\n  allowTransaction: true,\n  serviceType: \"CheckoutDropIn\"\n};\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"handling-responses","__idx":17},"children":["Handling responses"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apple-pay-callback-data","__idx":18},"children":["Apple Pay callback data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When an Apple Pay payment succeeds, your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSuccess"]}," callback receives the same standard result as other payment methods:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onSuccess: (result: BaseSubmitResult) => {\n  console.log('Payment Details:');\n  console.log('- System Transaction ID:', result.systemTransactionId);\n  console.log('- Merchant Transaction ID:', result.merchantTransactionId);\n  console.log('- Payment Method:', result.paymentMethod); // \"ApplePay\"\n  \n  // Note: Amount, currency, and card details must be retrieved from backend\n  // Apple Pay tokenises cards - actual card details are not exposed\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"error-handling","__idx":19},"children":["Error handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Handle Apple Pay-specific errors:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import BaseSdkException from '@pxpio/web-components-sdk/src/types/sdkExceptions/BaseSdkException';\n\nonError: (error: BaseSdkException) => {\n  // Use error.ErrorCode for SDK-defined errors\n  if (error.ErrorCode === 'SDK0615') {\n    // Apple Pay session was cancelled by the user\n    console.log('User cancelled Apple Pay');\n    // Don't show error - user intentionally closed payment sheet\n  } else if (error.ErrorCode === 'SDK1119') {\n    // Apple Pay payment failed\n    alert('Apple Pay payment failed. Please try a different payment method.');\n  } else if (error.ErrorCode === 'SDK0601') {\n    // Apple Pay not available\n    alert('Apple Pay is not available on this device or browser.');\n  } else if (error.message.toLowerCase().includes('declined')) {\n    alert('Payment declined. Please try a different payment method.');\n  } else if (error.message.toLowerCase().includes('not set up') || \n             error.message.toLowerCase().includes('wallet')) {\n    alert('Apple Pay is not set up. Please add a card to Apple Wallet.');\n  } else if (error.message.toLowerCase().includes('restricted')) {\n    alert('Apple Pay is restricted on this device.');\n  } else {\n    alert(`Payment failed: ${error.message}`);\n  }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"backend-verification","__idx":20},"children":["Backend verification"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Always verify Apple Pay payments on your backend to ensure payment success before fulfilling orders:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import PaymentMethod from '@pxpio/web-components-sdk/src/components/checkoutDropInComponents/types/PaymentMethod';\nimport { BaseSubmitResult } from '@pxpio/web-components-sdk/src/checkoutDropIn/types/BaseSubmitResult';\nimport BaseSdkException from '@pxpio/web-components-sdk/src/types/sdkExceptions/BaseSdkException';\n\nonSuccess: async (result: BaseSubmitResult) => {\n  // Send to backend for verification\n  const verified = await fetch('/api/verify-payment', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      systemTransactionId: result.systemTransactionId,\n      merchantTransactionId: result.merchantTransactionId\n    })\n  }).then(r => r.json());\n  \n  if (verified.success) {\n    window.location.href = `/success?orderId=${verified.orderId}`;\n  } else {\n    alert('Payment verification failed');\n  }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"backend-verification-code","__idx":21},"children":["Backend verification code"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the following backend code to verify Apple Pay transactions via the PXP API:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// BACKEND: Verify Apple Pay payment\napp.post('/api/verify-payment', async (req, res) => {\n  const { systemTransactionId, merchantTransactionId } = req.body;\n  \n  try {\n    // Query PXP API to get transaction details\n    const txnPath = `api/v1/transactions/${systemTransactionId}`;\n    const { authHeader, requestId } = createAuthHeader(\n      txnPath,\n      '',\n      process.env.PXP_TOKEN_ID,\n      process.env.PXP_TOKEN_VALUE\n    );\n    \n    const transaction = await fetch(\n      `https://api-services.pxp.io/${txnPath}`,\n      {\n        headers: {\n          'X-Client-Id': process.env.PXP_CLIENT_ID,\n          'X-Request-Id': requestId,\n          'Authorization': authHeader\n        }\n      }\n    ).then(r => r.json());\n    \n    // Verify transaction state\n    if (transaction.state !== 'Authorised' && transaction.state !== 'Captured') {\n      return res.json({ success: false, error: 'Transaction not successful' });\n    }\n    \n    // Verify merchant transaction ID matches\n    if (transaction.merchantTransactionId !== merchantTransactionId) {\n      return res.json({ success: false, error: 'Transaction ID mismatch' });\n    }\n    \n    // Verify amount matches expected amount from your order records\n    const order = await getOrderByMerchantTransactionId(merchantTransactionId);\n    const txnAmount = transaction.amounts?.transactionValue || transaction.amount || 0;\n    if (Math.abs(txnAmount - order.amount) > 0.01) {\n      return res.json({ success: false, error: 'Amount mismatch' });\n    }\n    \n    // Apple Pay payments show as Card funding type in PXP API\n    const fundingType = transaction.fundingData?.fundingType || \n                       transaction.fundingType || \n                       'Unknown';\n    if (fundingType !== 'Card') {\n      return res.json({ success: false, error: 'Invalid funding type' });\n    }\n    \n    // Fulfill order\n    const orderId = await fulfillOrder(transaction);\n    \n    return res.json({ success: true, orderId });\n    \n  } catch (error) {\n    console.error('Verification error:', error);\n    return res.json({ success: false, error: 'Verification failed' });\n  }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"recurring-payments","__idx":22},"children":["Recurring payments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Drop-in supports Apple Pay recurring payments for subscription-based services and merchant-initiated transactions (MITs). Configure the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurring"]}," object in your transaction data to set up the initial payment, then use the stored ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gatewayTokenId"]}," for subsequent charges."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["PXP doesn't provide an automatic payment scheduler. You must implement your own scheduling system to initiate subsequent recurring charges via the Transactions API."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Drop-in doesn't support Apple Pay's native recurring payment features (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurringPaymentRequest"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deferredPaymentRequest"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["automaticReloadPaymentRequest"]},"). For those features, use the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/apple-pay/recurring-payments"},"children":["Apple Pay button Ccmponent"]}," instead. Drop-in uses the standard ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurring"]}," object approach, which works across all payment methods."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"how-recurring-payments-work","__idx":23},"children":["How recurring payments work"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The recurring payment flow involves two phases:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Phase 1: Initial setup (via Drop-in)"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurring"]}," object in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]}," with frequency and expiration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer authenticates with Face ID/Touch ID and completes the Apple Pay payment."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Drop-in automatically sets ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["processingModel"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MerchantInitiatedInitialRecurring"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The backend stores the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gatewayTokenId"]}," from the transaction response."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you include the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurring"]}," object in your transaction data, Drop-in automatically sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["processingModel"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MerchantInitiatedInitialRecurring"]}," for the initial transaction."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Phase 2: Subsequent charges (via backend API)"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your scheduling system triggers a charge based on the configured frequency."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your backend calls the Transactions API using the stored ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gatewayTokenId"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["processingModel"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MerchantInitiatedSubsequentRecurring"]}," for subsequent charges."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The payment processes without customer interaction."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"initial-recurring-payment-setup","__idx":24},"children":["Initial recurring payment setup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure recurring payment frequency in your Drop-in initialisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import CheckoutDropIn from '@pxpio/web-components-sdk/src/checkoutDropIn/CheckoutDropIn';\nimport IntentType from '@pxpio/web-components-sdk/src/basePxpCheckout/types/IntentType';\nimport { BaseSubmitResult } from '@pxpio/web-components-sdk/src/checkoutDropIn/types/BaseSubmitResult';\nimport BaseSdkException from '@pxpio/web-components-sdk/src/types/sdkExceptions/BaseSdkException';\n\n// Get session from backend (with Apple Pay enabled)\nconst response = await fetch('/api/create-session', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' }\n});\n\nconst result = await response.json();\nconst sessionData = result.data;\n\n// Initialise Drop-in with Apple Pay recurring configuration\nconst checkoutDropIn = CheckoutDropIn.initialize({\n  environment: 'test',\n  session: sessionData,\n  ownerId: 'MERCHANT-1',\n  ownerType: 'MerchantGroup',\n  transactionData: {\n    currency: 'USD',\n    amount: 9.99,\n    entryType: 'Ecom',\n    intent: {\n      card: IntentType.Authorisation,\n      paypal: IntentType.Authorisation\n    },\n    merchantTransactionId: crypto.randomUUID(),\n    merchantTransactionDate: () => new Date().toISOString(),\n    // Recurring configuration for processing model\n    recurring: {\n      frequencyInDays: 30,           // Bill every 30 days\n      frequencyExpiration: '2025-12-31' // Token expires on this date\n    }\n  },\n  onGetShopper: () => Promise.resolve({ id: 'customer-123' }),\n  methodConfig: {\n    global: {\n      transactionInfo: {\n        countryCode: 'US',\n        merchantDisplayName: 'Subscription Service',\n        totalLabel: 'Monthly Subscription',\n        totalStatus: 'FINAL',\n        lineItems: [\n          { label: 'Premium Plan', amount: '9.99' }\n        ]\n      }\n    },\n    applePay: {\n      // No specific recurring configuration needed for Drop-in\n      // Drop-in uses the standard recurring object above\n    }\n  },\n  onSuccess: async (result: BaseSubmitResult) => {\n    console.log('Apple Pay recurring payment setup completed');\n    \n    // Verify and store gatewayTokenId on backend\n    const response = await fetch('/api/verify-and-setup-recurring', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({\n        systemTransactionId: result.systemTransactionId,\n        merchantTransactionId: result.merchantTransactionId,\n        paymentMethod: 'ApplePay'\n      })\n    }).then(r => r.json());\n    \n    if (response.success) {\n      window.location.href = `/subscription-success?subscriptionId=${response.subscriptionId}`;\n    }\n  },\n  onError: (error: BaseSdkException) => {\n    if (error.ErrorCode === 'SDK0615') {\n      console.log('User cancelled Apple Pay');\n      return;\n    }\n    console.error('Apple Pay subscription setup failed:', error);\n    alert(`Subscription setup failed: ${error.message}`);\n  }\n});\n\ncheckoutDropIn.create('checkout-drop-in-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"backend-store-recurring-payment-token","__idx":25},"children":["Backend: Store recurring payment token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the initial payment, extract and store the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gatewayTokenId"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// BACKEND: Verify Apple Pay payment and set up recurring subscription\napp.post('/api/verify-and-setup-recurring', async (req, res) => {\n  const { systemTransactionId, merchantTransactionId, paymentMethod } = req.body;\n  \n  try {\n    // Query PXP API to get transaction details\n    const txnPath = `api/v1/transactions/${systemTransactionId}`;\n    const { authHeader, requestId } = createAuthHeader(\n      txnPath,\n      '',\n      process.env.PXP_TOKEN_ID,\n      process.env.PXP_TOKEN_VALUE\n    );\n    \n    const transaction = await fetch(\n      `https://api-services.pxp.io/${txnPath}`,\n      {\n        headers: {\n          'X-Client-Id': process.env.PXP_CLIENT_ID,\n          'X-Request-Id': requestId,\n          'Authorization': authHeader\n        }\n      }\n    ).then(r => r.json());\n    \n    // Verify transaction is successful\n    if (transaction.state !== 'Authorised' && transaction.state !== 'Captured') {\n      return res.json({ success: false, error: 'Transaction not successful' });\n    }\n    \n    // Store gatewayTokenId for recurring charges\n    if (transaction.fundingData?.gatewayTokenId) {\n      const subscription = await database.subscriptions.insert({\n        shopperId: req.user.shopperId,\n        gatewayTokenId: transaction.fundingData.gatewayTokenId,\n        paymentMethod: paymentMethod,\n        amount: transaction.amounts?.transactionValue || 0,\n        currency: transaction.amounts?.currencyCode || 'USD',\n        frequencyInDays: 30,\n        nextChargeDate: calculateNextChargeDate(30),\n        status: 'active',\n        createdAt: new Date()\n      });\n      \n      return res.json({ success: true, subscriptionId: subscription.id });\n    }\n    \n    return res.json({ success: false, error: 'No gateway token found' });\n    \n  } catch (error) {\n    console.error('Setup error:', error);\n    return res.json({ success: false, error: 'Setup failed' });\n  }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"charging-subsequent-recurring-payments","__idx":26},"children":["Charging subsequent recurring payments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the Transactions API to charge subsequent payments:"]},{"$$mdtype":"Tag","name":"Endpoint","attributes":{"method":"POST"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["/v1/transactions"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// BACKEND: Charge subsequent recurring payment\nasync function chargeRecurringPayment(subscription) {\n  const requestBody = {\n    merchant: \"MERCHANT-1\",\n    site: \"SITE-1\",\n    merchantTransactionId: `recurring-${Date.now()}`,\n    merchantTransactionDate: new Date().toISOString(),\n    transactionMethod: {\n      intent: \"Purchase\",\n      entryType: \"Ecom\",\n      fundingType: \"Card\"\n    },\n    fundingData: {\n      card: {\n        gatewayTokenId: subscription.gatewayTokenId\n      }\n    },\n    amounts: {\n      transaction: subscription.amount,\n      currencyCode: subscription.currency\n    },\n    recurring: {\n      processingModel: \"MerchantInitiatedSubsequentRecurring\"\n    }\n  };\n  \n  const path = 'api/v1/transactions';\n  const { authHeader, requestId } = createAuthHeader(\n    path,\n    JSON.stringify(requestBody),\n    process.env.PXP_TOKEN_ID,\n    process.env.PXP_TOKEN_VALUE\n  );\n  \n  const response = await fetch(\n    `https://api-services.pxp.io/${path}`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        'X-Client-Id': process.env.PXP_CLIENT_ID,\n        'X-Request-Id': requestId,\n        'Authorization': authHeader\n      },\n      body: JSON.stringify(requestBody)\n    }\n  );\n  \n  const result = await response.json();\n  \n  if (result.state === 'Captured' || result.state === 'Authorised') {\n    await database.subscriptions.update(subscription.id, {\n      lastChargeDate: new Date(),\n      nextChargeDate: calculateNextChargeDate(subscription.frequencyInDays),\n      lastTransactionId: result.systemTransactionId\n    });\n    \n    console.log('Recurring charge successful:', result.systemTransactionId);\n    return { success: true, transactionId: result.systemTransactionId };\n  } else {\n    console.error('Recurring charge failed:', result);\n    return { success: false, error: result.errorReason };\n  }\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/transactions/initiate-transactions"},"children":["Learn more about initiating transactions via API"]},"."]}]},"headings":[{"value":"Apple Pay","id":"apple-pay","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Key benefits","id":"key-benefits","depth":3},{"value":"How it works","id":"how-it-works","depth":2},{"value":"Configuration","id":"configuration","depth":2},{"value":"Configuration properties","id":"configuration-properties","depth":3},{"value":"Contact fields and pre-filling","id":"contact-fields-and-pre-filling","depth":3},{"value":"Available contact fields","id":"available-contact-fields","depth":4},{"value":"Contact object properties","id":"contact-object-properties","depth":4},{"value":"Example","id":"example","depth":4},{"value":"Key points","id":"key-points","depth":4},{"value":"Summary","id":"summary","depth":4},{"value":"Settings used from global configuration","id":"settings-used-from-global-configuration","depth":3},{"value":"Complete example","id":"complete-example","depth":3},{"value":"Apple Pay requirements","id":"apple-pay-requirements","depth":3},{"value":"Implementation","id":"implementation","depth":2},{"value":"Session configuration (backend)","id":"session-configuration-backend","depth":3},{"value":"Handling responses","id":"handling-responses","depth":2},{"value":"Apple Pay callback data","id":"apple-pay-callback-data","depth":3},{"value":"Error handling","id":"error-handling","depth":3},{"value":"Backend verification","id":"backend-verification","depth":2},{"value":"Backend verification code","id":"backend-verification-code","depth":3},{"value":"Recurring payments","id":"recurring-payments","depth":2},{"value":"How recurring payments work","id":"how-recurring-payments-work","depth":3},{"value":"Initial recurring payment setup","id":"initial-recurring-payment-setup","depth":3},{"value":"Backend: Store recurring payment token","id":"backend-store-recurring-payment-token","depth":3},{"value":"Charging subsequent recurring payments","id":"charging-subsequent-recurring-payments","depth":3}],"frontmatter":{"seo":{"title":"Apple Pay"}},"lastModified":"2026-05-06T10:44:47.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/drop-in/web/apple-pay","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}