{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","code-group","br","details","required"]},"type":"markdown"},"seo":{"title":"Customisation","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":"customisation","__idx":0},"children":["Customisation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the Apple Pay component for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component comes with responsive and accessible default styling that follows Apple's design guidelines, but is designed to be customisable to match your brand and website requirements."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find Apple's official recommendations around button styling in their ",{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css"},"children":["Apple Pay button CSS guide"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api"},"children":["Apple Pay JS API reference"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"default-styling","__idx":2},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default implementation uses Apple's official JavaScript SDK with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<apple-pay-button>"]}," web component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  usingCss: false, // Default - uses official Apple Pay SDK\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    height: '44px',\n    borderRadius: '4px'\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can try out the default button types and styles with Apple's ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://applepaydemo.apple.com/","target":"_blank"},"children":["Apple Pay on the Web interactive demo"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-button-types","__idx":3},"children":["Default button types"]},{"$$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":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Use case"},"children":["Use case"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buy"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Standard purchase button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["E-commerce"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Retail"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Checkout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Billing"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["donate"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Donation button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Charities"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Crowdfunding"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["book"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Booking button."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Travel"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reservations"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["check-out"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Checkout button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Shopping cart"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["continue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Continue button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Multi-step processes"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contribute"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Contribution button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Subscriptions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Memberships"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Order button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Food delivery"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Services"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reload"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Reload button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gift cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prepaid"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Rent button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Rentals"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Subscriptions"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["set-up"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Setup button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Account setup"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configuration"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subscribe"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Subscribe button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Newsletters"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Services"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["support"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Support button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Help"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tip"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tip button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gratuities"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tips"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top-up"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Top-up button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prepaid"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Credits"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-button-styles","__idx":4},"children":["Default button styles"]},{"$$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":"Style"},"children":["Style"]},{"$$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":["black"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black background with white text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["white"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White background with black text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["white-outline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White background with a black border and black text."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-method-styling","__idx":5},"children":["CSS method styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["usingCss: true"]},", you have complete control over the button's appearance:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  usingCss: true,\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    template: '<button class=\"apple-pay-button\">Pay with Apple Pay</button>',\n    templateCSS: `\n      .apple-pay-button {\n        background-color: #000;\n        color: #fff;\n        border: none;\n        border-radius: 4px;\n        height: 44px;\n        width: 100%;\n        font-size: 16px;\n        font-weight: 500;\n        cursor: pointer;\n      }\n    `\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a full example of a CSS method implementation."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"```typescript\nconst config = {\n  merchantDisplayName: 'Urban Fashion Boutique',\n  paymentDescription: 'Designer Jacket Purchase',\n  usingCss: true, // Enable CSS method\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    locale: 'en-US',\n    template: `\n      <button class=\"custom-apple-pay-button\">\n        <svg class=\"apple-pay-icon\" viewBox=\"0 0 102 26\" width=\"102\" height=\"26\">\n          <path fill=\"currentColor\" d=\"M28.94 11.26c.09-4.21 3.48-6.26 3.64-6.37-1.98-2.9-5.06-3.3-6.16-3.34-2.62-.27-5.11 1.54-6.44 1.54-1.34 0-3.41-1.5-5.6-1.46-2.88.04-5.53 1.67-7.02 4.25-2.99 5.18-.77 12.85 2.15 17.06 1.43 2.06 3.14 4.38 5.38 4.3 2.18-.09 3-1.41 5.63-1.41 2.62 0 3.37 1.41 5.64 1.37 2.33-.04 3.83-2.11 5.26-4.18 1.66-2.39 2.34-4.7 2.38-4.82-.05-.02-4.57-1.75-4.66-6.94zM25.13 8.12c1.19-1.44 1.99-3.44 1.77-5.43-1.71.07-3.78.89-5.01 2.01-1.1 1.27-2.06 3.31-1.8 5.26 1.9.15 3.85-.97 5.04-1.84z\"/>\n          <path fill=\"currentColor\" d=\"M45.34 21.85h-4.8l-1.15-3.61h-5.02l-1.1 3.61h-4.66l5.05-15.73h5.58l5.1 15.73zm-6.47-6.82l-1.42-4.39c-.14-.44-.42-1.58-.83-3.42h-.05c-.19.95-.47 2.09-.84 3.42l-1.37 4.39h4.51z\"/>\n          <path fill=\"currentColor\" d=\"M61.11 15.23c0 2.19-.59 3.93-1.76 5.22-1.05 1.16-2.37 1.74-3.96 1.74-1.67 0-2.88-.61-3.61-1.83h-.05v6.87h-4.5V12.5c0-1.55-.04-3.14-.12-4.78h3.95l.25 2.32h.1c.94-1.75 2.48-2.62 4.62-2.62 1.54 0 2.83.61 3.86 1.83 1.03 1.22 1.55 2.85 1.55 4.9v.08zm-4.55-.13c0-1.3-.32-2.37-.95-3.21-.68-.89-1.6-1.34-2.75-1.34-.77 0-1.47.25-2.1.74-.63.49-1.06 1.15-1.29 1.97-.12.41-.18.76-.18 1.05v2.58c0 1.13.36 2.07 1.08 2.82.72.75 1.64 1.12 2.76 1.12 1.18 0 2.1-.46 2.76-1.39.66-.93.99-2.18.99-3.75v-.59z\"/>\n          <path fill=\"currentColor\" d=\"M76.47 15.23c0 2.19-.59 3.93-1.76 5.22-1.05 1.16-2.37 1.74-3.96 1.74-1.67 0-2.88-.61-3.61-1.83h-.05v6.87h-4.5V12.5c0-1.55-.04-3.14-.12-4.78h3.95l.25 2.32h.1c.94-1.75 2.48-2.62 4.62-2.62 1.54 0 2.83.61 3.86 1.83 1.03 1.22 1.55 2.85 1.55 4.9v.08zm-4.55-.13c0-1.3-.32-2.37-.95-3.21-.68-.89-1.6-1.34-2.75-1.34-.77 0-1.47.25-2.1.74-.63.49-1.06 1.15-1.29 1.97-.12.41-.18.76-.18 1.05v2.58c0 1.13.36 2.07 1.08 2.82.72.75 1.64 1.12 2.76 1.12 1.18 0 2.1-.46 2.76-1.39.66-.93.99-2.18.99-3.75v-.59z\"/>\n          <path fill=\"currentColor\" d=\"M85.44 21.85h-4.5V7.75h4.5v14.1z\"/>\n          <path fill=\"currentColor\" d=\"M96.66 18.43c0 1.14-.41 2.08-1.23 2.82-.9.82-2.19 1.23-3.87 1.23-1.55 0-2.79-.37-3.72-1.11l.53-3.53c1.04.74 2.06 1.11 3.06 1.11.64 0 1.14-.16 1.5-.47.36-.31.54-.73.54-1.26 0-.47-.18-.87-.54-1.21-.36-.34-.95-.68-1.77-1.03-2.66-1.14-3.99-2.81-3.99-5.01 0-1.14.43-2.08 1.29-2.82.86-.74 2.01-1.11 3.45-1.11 1.3 0 2.38.22 3.24.67l-.64 3.46c-.77-.45-1.54-.67-2.31-.67-.59 0-1.05.15-1.38.46-.27.25-.41.58-.41.99 0 .47.2.86.59 1.17.32.25.86.54 1.62.87 1.57.67 2.69 1.35 3.36 2.04.67.69 1.01 1.54 1.01 2.55v.01z\"/>\n        </svg>\n        <span class=\"apple-pay-text\">Buy with Apple Pay</span>\n      </button>\n    `,\n    templateCSS: `\n      .custom-apple-pay-button {\n        background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);\n        border: none;\n        border-radius: 12px;\n        height: 52px;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        color: white;\n        font-size: 16px;\n        font-weight: 600;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n      \n      .custom-apple-pay-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n        background: linear-gradient(135deg, #333 0%, #555 100%);\n      }\n      \n      .custom-apple-pay-button:active {\n        transform: translateY(0);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n      \n      .apple-pay-icon {\n        margin-right: 10px;\n        filter: brightness(1.1);\n      }\n      \n      .apple-pay-text {\n        font-weight: 600;\n        letter-spacing: 0.5px;\n      }\n      \n      @media (max-width: 480px) {\n        .custom-apple-pay-button {\n          height: 48px;\n          font-size: 15px;\n        }\n      }\n    `\n  },\n  paymentRequest: {\n    countryCode: 'US',\n    currencyCode: 'USD',\n    merchantCapabilities: ['supports3DS', 'supportsEMV'],\n    supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],\n    total: {\n      label: 'Total',\n      amount: '299.99'\n    },\n    lineItems: [\n      {\n        label: 'Designer Leather Jacket',\n        amount: '279.99'\n      },\n      {\n        label: 'Tax',\n        amount: '20.00'\n      }\n    ]\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-options","__idx":6},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay component accepts two main configuration interfaces that control its appearance and behaviour:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ApplePayButtonComponentConfig"]},", which is the main configuration class that contains all the settings needed for an Apple Pay button component, including payment details (amount, currency, merchant info), payment processing options (supported networks, billing/shipping requirements), and button appearance settings."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ApplePayButtonStyle"]},", which is is a nested configuration object within ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ApplePayButtonComponentConfig"]}," that specifically controls the visual appearance of the Apple Pay button, including the button type, style, and dimensions."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"applepaybuttoncomponentconfig","__idx":7},"children":["ApplePayButtonComponentConfig"]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Definition","header":{"title":"Definition","controls":{"copy":{}}},"source":"interface ApplePayButtonComponentConfig extends BaseComponentConfig {\n  merchantDisplayName: string;\n  paymentDescription: string;\n  paymentRequest: ApplePayPaymentRequest;\n  usingCss?: boolean;\n  style?: ApplePayButtonStyle;\n  applePayConsentComponent?: ApplePayConsentComponent;\n  onGetConsent?: () => boolean;\n  onPreAuthorisation?: () => Promise<ApplePayTransactionInitData | null>;\n  onPostAuthorisation?: (submitResult: BaseSubmitResult, applePayResult: ApplePayResult) => void;\n  onShippingContactSelected?: (contact: ApplePayContact) => Promise<ApplePayShippingContactUpdate>;\n  onShippingMethodSelected?: (method: ApplePayShippingMethod) => Promise<ApplePayShippingMethodUpdate>;\n  onPaymentMethodSelected?: (paymentMethod: ApplePayPaymentMethod) => Promise<ApplePayPaymentMethodUpdate>;\n  onCouponCodeChanged?: (couponCode: string) => Promise<ApplePayCouponCodeUpdate>;\n  onError?: (error: Error) => void;\n  onCancel?: (error: Error) => void;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Example","header":{"title":"Example","controls":{"copy":{}}},"source":"const config: ApplePayButtonComponentConfig = {\n  // Required fields\n  merchantDisplayName: 'Acme Store',\n  paymentDescription: 'Product Purchase',\n  paymentRequest: {\n    countryCode: 'US',\n    currencyCode: 'USD',\n    merchantCapabilities: ['supports3DS', 'supportsEMV'],\n    supportedNetworks: ['visa', 'masterCard', 'amex'],\n    total: {\n      label: 'Total',\n      amount: '99.99'\n    },\n    lineItems: [\n      {\n        label: 'Product',\n        amount: '89.99'\n      },\n      {\n        label: 'Tax',\n        amount: '10.00'\n      }\n    ]\n  },\n  \n  // Rendering method\n  usingCss: false,\n  \n  // Styling configuration\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    height: '48px',\n    borderRadius: '8px'\n  },\n  \n  // Apple Pay consent component\n  applePayConsentComponent: consentComponentInstance,\n  \n  // Event handlers\n  onGetConsent: () => {\n    return userHasGivenConsent();\n  },\n  \n  onPreAuthorisation: async () => {\n    return {\n      riskScreeningData: {\n        deviceSessionId: 'session-123',\n        performRiskScreening: true,\n        userIp: \"192.168.1.100\",\n        account: {\n          id: \"user_12345678\",\n          creationDateTime: \"2024-01-15T10:30:00.000Z\"\n        },\n        fulfillments: [{\n          type: \"Shipped\",\n          recipientPerson: {\n            phoneNumber: \"+1234567890\"\n          }\n        }]\n      }\n    };\n  },\n  \n  onPostAuthorisation: (result, applePayResult) => {\n    if (result instanceof AuthorisedSubmitResult) {\n      console.log('Payment successful:', result.transactionId);\n    } else {\n      console.error('Payment failed:', result.errorReason);\n    }\n  },\n  \n  onShippingContactSelected: async (contact) => {\n    return {\n      newTotal: {\n        label: 'Total',\n        amount: '109.99'\n      },\n      newLineItems: [\n        { label: 'Product', amount: '89.99' },\n        { label: 'Shipping', amount: '10.00' },\n        { label: 'Tax', amount: '10.00' }\n      ]\n    };\n  },\n  \n  onShippingMethodSelected: async (method) => {\n    return {\n      newTotal: {\n        label: 'Total',\n        amount: '104.99'\n      },\n      newLineItems: [\n        { label: 'Product', amount: '89.99' },\n        { label: method.label, amount: method.amount },\n        { label: 'Tax', amount: '10.00' }\n      ]\n    };\n  },\n  \n  onPaymentMethodSelected: async (paymentMethod) => {\n    return {\n      newTotal: {\n        label: 'Total',\n        amount: '99.99'\n      }\n    };\n  },\n  \n  onCouponCodeChanged: async (couponCode) => {\n    const discount = calculateDiscount(couponCode);\n    return {\n      newTotal: {\n        label: 'Total',\n        amount: (99.99 - discount).toFixed(2)\n      },\n      newLineItems: [\n        { label: 'Product', amount: '89.99' },\n        { label: 'Discount', amount: `-${discount.toFixed(2)}` },\n        { label: 'Tax', amount: '10.00' }\n      ]\n    };\n  },\n  \n  onError: (error) => {\n    console.error('Apple Pay error:', error);\n    showErrorMessage('Payment failed. Please try again.');\n  },\n  \n  onCancel: (error) => {\n    console.log('Payment cancelled by user');\n    trackEvent('apple_pay_cancelled');\n  }\n};\n","lang":"typescript"},"children":[]}]},{"$$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":"Property"},"children":["Property"]},{"$$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 display name for your business."]}]},{"$$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":["A description of what the payment is for."]}]},{"$$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":["ApplePayPaymentRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The Apple Pay payment configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["usingCss"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to use CSS method instead of official SDK. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$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":["ApplePayButtonStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button styling configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applePayConsentComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ApplePayConsentComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Consent component for data processing."]}]},{"$$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":["() => boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler to check if a user has given consent."]}]},{"$$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":["() => Promise<ApplePayTransactionInitData | null>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for before payment authorisation."]}]},{"$$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":["(result, applePayResult) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for after payment authorisation."]}]},{"$$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":["Event handler for when the shipping address changes."]}]},{"$$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":["Event handler for when the shipping method changes."]}]},{"$$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":["Event handler for when the payment method changes."]}]},{"$$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":["Event handler for when a coupon code is entered."]}]},{"$$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":["(error) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when an error occurs."]}]},{"$$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":["(error) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when a user cancels their payment."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"applepaybuttonstyle","__idx":8},"children":["ApplePayButtonStyle"]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Definition","header":{"title":"Definition","controls":{"copy":{}}},"source":"interface ApplePayButtonStyle {\n  type?: string;\n  buttonstyle?: string;\n  height?: string;\n  width?: string;\n  borderRadius?: string;\n  padding?: string;\n  boxSizing?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  fontFamily?: string;\n  letterSpacing?: string;\n  textTransform?: string;\n  backgroundColor?: string;\n  color?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderStyle?: string;\n  boxShadow?: string;\n  textShadow?: string;\n  opacity?: string;\n  transition?: string;\n  position?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  zIndex?: string;\n  display?: string;\n  alignItems?: string;\n  justifyContent?: string;\n  flexDirection?: string;\n  gap?: string;\n  customCSS?: string;\n  template?: string;\n  templateCSS?: string;\n  locale?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Example","header":{"title":"Example","controls":{"copy":{}}},"source":"const style: ApplePayButtonStyle = {\n  // Button type and style\n  type: 'buy',\n  buttonstyle: 'black',\n  \n  // Dimensions\n  height: '48px',\n  width: '100%',\n  borderRadius: '8px',\n  padding: '12px 16px',\n  boxSizing: 'border-box',\n  \n  // Typography\n  fontSize: '16px',\n  fontWeight: '600',\n  fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',\n  letterSpacing: '0.5px',\n  textTransform: 'none',\n  \n  // Colours\n  backgroundColor: '#000000',\n  color: '#ffffff',\n  borderColor: '#333333',\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  \n  // Effects\n  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',\n  textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',\n  opacity: '1',\n  \n  // Transitions\n  transition: 'all 0.3s ease',\n  \n  // Positioning\n  position: 'relative',\n  top: '0',\n  right: '0',\n  bottom: '0',\n  left: '0',\n  zIndex: '1',\n  \n  // Layout\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexDirection: 'row',\n  gap: '8px',\n  \n  // Custom CSS (for official SDK method)\n  customCSS: `\n    apple-pay-button:hover {\n      transform: translateY(-2px);\n    }\n  `,\n  \n  // Template (for CSS method)\n  template: '<button class=\"apple-pay-button\">Pay with Apple Pay</button>',\n  templateCSS: `\n    .apple-pay-button {\n      background-color: #000;\n      color: #fff;\n      border: none;\n      border-radius: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n    }\n  `,\n  \n  // Locale\n  locale: 'en-US'\n};\n","lang":"typescript"},"children":[]}]},{"$$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":"Property"},"children":["Property"]},{"$$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":["type"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buy"]},".",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["add-money"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["book"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buy"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["check-out"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["continue"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contribute"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["donate"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pay"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["plain"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reload"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rent"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["set-up"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subscribe"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["support"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tip"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top-up"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonstyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button style variant. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["black"]},".",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["black"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["white"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$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":["height"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button height. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["44px"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button width. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border radius for rounded corners. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4px"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The internal spacing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boxSizing"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The CSS box-sizing property. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["border-box"]},".",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["border-box"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["content-box"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The font size."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The font weight."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The font family."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["letterSpacing"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The character spacing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textTransform"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The text transformation to apply.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["none"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["uppercase"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lowercase"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["capitalize"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The background colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The text colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border thickness."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border style.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["solid"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dashed"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dotted"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["none"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boxShadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The drop shadow effect."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textShadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The text shadow effect."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The transparency level (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0-1"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transition"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The animation transitions."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["position"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The CSS positioning.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["static"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["relative"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["absolute"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fixed"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sticky"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The top position offset."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The right position offset."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The bottom position offset."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The left position offset."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["zIndex"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The stacking order."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["display"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The display type."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignItems"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The vertical flex alignment."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["justifyContent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The horizontal flex alignment."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flexDirection"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The flex direction.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["row"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["column"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["row-reverse"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["column-reverse"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gap"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The flex gap spacing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customCSS"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS rules (official SDK only)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["template"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["HTML template (CSS method only)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["templateCSS"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CSS styles (CSS method only)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locale"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The language/region code. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["en-US"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":9},"children":["Examples"]},{"$$mdtype":"Tag","name":"CodeGroup","attributes":{"mode":"tabs"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Official SDK","header":{"title":"Official SDK","controls":{"copy":{}}},"source":"const applePayComponent = pxpSdk.create('apple-pay-button', {\n  merchantDisplayName: 'Acme Electronics Store',\n  paymentDescription: 'Wireless Headphones Purchase',\n  usingCss: false, // Use official Apple Pay SDK\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    height: '50px',\n    borderRadius: '8px',\n    locale: 'en-US',\n    customCSS: `\n      apple-pay-button {\n        --apple-pay-button-width: 100%;\n        --apple-pay-button-height: 50px;\n        --apple-pay-button-border-radius: 8px;\n        --apple-pay-button-padding: 0 16px;\n        margin: 10px 0;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n        transition: all 0.3s ease;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n      }\n      \n      apple-pay-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n      }\n      \n      apple-pay-button:active {\n        transform: translateY(0);\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n      }\n    `\n  },\n  paymentRequest: {\n    countryCode: 'US',\n    currencyCode: 'USD',\n    merchantCapabilities: ['supports3DS', 'supportsEMV'],\n    supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],\n    total: {\n      label: 'Total',\n      amount: '129.99'\n    },\n    lineItems: [\n      {\n        label: 'Wireless Headphones',\n        amount: '119.99'\n      },\n      {\n        label: 'Tax',\n        amount: '10.00'\n      }\n    ],\n    requiredBillingContactFields: ['postalAddress', 'name', 'email'],\n    requiredShippingContactFields: ['postalAddress', 'name', 'phone']\n  },\n  onError: (error) => {\n    console.error('Apple Pay Error:', error);\n    showErrorMessage('Payment failed. Please try again.');\n  },\n  onPostAuthorisation: (result, applePayResult) => {\n    if (result instanceof AuthorisedSubmitResult) {\n      console.log('Payment successful:', result.transactionId);\n      window.location.href = `/order-confirmation/${result.transactionId}`;\n    } else {\n      console.error('Payment failed:', result.errorReason);\n      showErrorMessage('Payment was declined. Please try a different payment method.');\n    }\n  },\n  onCancel: () => {\n    console.log('User cancelled Apple Pay');\n    trackEvent('apple_pay_cancelled', { amount: '129.99' });\n  }\n});\n\napplePayComponent.mount('apple-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Custom CSS with shipping","header":{"title":"Custom CSS with shipping","controls":{"copy":{}}},"source":"const applePayComponent = pxpSdk.create('apple-pay-button', {\n  merchantDisplayName: 'Outdoor Adventure Gear',\n  paymentDescription: 'Camping Equipment Order',\n  usingCss: true, // Use custom CSS method\n  style: {\n    type: 'buy',\n    buttonstyle: 'black',\n    locale: 'en-US',\n    template: `\n      <button class=\"custom-apple-pay-button\" type=\"button\">\n        <div class=\"apple-pay-content\">\n          <svg class=\"apple-pay-icon\" viewBox=\"0 0 102 26\" width=\"51\" height=\"13\">\n            <path fill=\"currentColor\" d=\"M28.94 11.26c.09-4.21 3.48-6.26 3.64-6.37-1.98-2.9-5.06-3.3-6.16-3.34-2.62-.27-5.11 1.54-6.44 1.54-1.34 0-3.41-1.5-5.6-1.46-2.88.04-5.53 1.67-7.02 4.25-2.99 5.18-.77 12.85 2.15 17.06 1.43 2.06 3.14 4.38 5.38 4.3 2.18-.09 3-1.41 5.63-1.41 2.62 0 3.37 1.41 5.64 1.37 2.33-.04 3.83-2.11 5.26-4.18 1.66-2.39 2.34-4.7 2.38-4.82-.05-.02-4.57-1.75-4.66-6.94zM25.13 8.12c1.19-1.44 1.99-3.44 1.77-5.43-1.71.07-3.78.89-5.01 2.01-1.1 1.27-2.06 3.31-1.8 5.26 1.9.15 3.85-.97 5.04-1.84z\"/>\n            <path fill=\"currentColor\" d=\"M61.11 15.23c0 2.19-.59 3.93-1.76 5.22-1.05 1.16-2.37 1.74-3.96 1.74-1.67 0-2.88-.61-3.61-1.83h-.05v6.87h-4.5V12.5c0-1.55-.04-3.14-.12-4.78h3.95l.25 2.32h.1c.94-1.75 2.48-2.62 4.62-2.62 1.54 0 2.83.61 3.86 1.83 1.03 1.22 1.55 2.85 1.55 4.9v.08zm-4.55-.13c0-1.3-.32-2.37-.95-3.21-.68-.89-1.6-1.34-2.75-1.34-.77 0-1.47.25-2.1.74-.63.49-1.06 1.15-1.29 1.97-.12.41-.18.76-.18 1.05v2.58c0 1.13.36 2.07 1.08 2.82.72.75 1.64 1.12 2.76 1.12 1.18 0 2.1-.46 2.76-1.39.66-.93.99-2.18.99-3.75v-.59z\"/>\n            <path fill=\"currentColor\" d=\"M85.44 21.85h-4.5V7.75h4.5v14.1z\"/>\n          </svg>\n          <span class=\"apple-pay-text\">Buy Now</span>\n        </div>\n      </button>\n    `,\n    templateCSS: `\n      .custom-apple-pay-button {\n        width: 100%;\n        height: 52px;\n        background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);\n        border: none;\n        border-radius: 12px;\n        color: white;\n        font-size: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n        position: relative;\n        overflow: hidden;\n      }\n      \n      .custom-apple-pay-button::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n        transition: left 0.5s;\n      }\n      \n      .custom-apple-pay-button:hover::before {\n        left: 100%;\n      }\n      \n      .custom-apple-pay-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n        background: linear-gradient(135deg, #333 0%, #555 100%);\n      }\n      \n      .custom-apple-pay-button:active {\n        transform: translateY(0);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n      }\n      \n      .custom-apple-pay-button:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n        transform: none;\n      }\n      \n      .apple-pay-content {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        z-index: 1;\n        position: relative;\n      }\n      \n      .apple-pay-icon {\n        flex-shrink: 0;\n        filter: brightness(1.1);\n      }\n      \n      .apple-pay-text {\n        font-weight: 600;\n        letter-spacing: 0.5px;\n      }\n      \n      @media (max-width: 768px) {\n        .custom-apple-pay-button {\n          height: 48px;\n          font-size: 15px;\n          border-radius: 10px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        .custom-apple-pay-button {\n          height: 44px;\n          font-size: 14px;\n          border-radius: 8px;\n        }\n        \n        .apple-pay-icon {\n          width: 45px;\n          height: 11px;\n        }\n        \n        .apple-pay-text {\n          display: none;\n        }\n      }\n    `\n  },\n  paymentRequest: {\n    countryCode: 'US',\n    currencyCode: 'USD',\n    merchantCapabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],\n    supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],\n    total: {\n      label: 'Total',\n      amount: '89.97'\n    },\n    lineItems: [\n      {\n        label: 'Camping Tent',\n        amount: '69.99'\n      },\n      {\n        label: 'Sleeping Bag',\n        amount: '14.99'\n      },\n      {\n        label: 'Tax',\n        amount: '4.99'\n      }\n    ],\n    requiredBillingContactFields: ['postalAddress', 'name', 'email'],\n    requiredShippingContactFields: ['postalAddress', 'name', 'phone'],\n    shippingMethods: [\n      {\n        label: 'Standard Shipping',\n        detail: '5-7 business days',\n        amount: '0.00',\n        identifier: 'standard'\n      },\n      {\n        label: 'Express Shipping',\n        detail: '2-3 business days',\n        amount: '12.99',\n        identifier: 'express'\n      }\n    ]\n  },\n  onShippingMethodSelected: async (method) => {\n    const baseAmount = 84.98; // Subtotal + tax\n    const shippingCost = parseFloat(method.amount);\n    const newTotal = baseAmount + shippingCost;\n    \n    return {\n      newTotal: {\n        label: 'Total',\n        amount: newTotal.toFixed(2)\n      },\n      newLineItems: [\n        { label: 'Camping Tent', amount: '69.99' },\n        { label: 'Sleeping Bag', amount: '14.99' },\n        { label: 'Tax', amount: '4.99' },\n        { label: `Shipping (${method.label})`, amount: method.amount }\n      ]\n    };\n  },\n  onPostAuthorisation: (result, applePayResult) => {\n    if (result instanceof AuthorisedSubmitResult) {\n      console.log('Order successful:', result.transactionId);\n      \n      // Send order confirmation email\n      sendOrderConfirmation({\n        transactionId: result.transactionId,\n        email: applePayResult.billingContact?.emailAddress,\n        shippingAddress: applePayResult.shippingContact?.postalAddress\n      });\n      \n      // Redirect to order tracking page\n      window.location.href = `/order-tracking/${result.transactionId}`;\n    } else {\n      console.error('Order failed:', result.errorReason);\n      showErrorNotification('Order failed. Please try again or contact support.');\n    }\n  },\n  onError: (error) => {\n    console.error('Apple Pay Error:', error);\n    trackEvent('apple_pay_error', { error: error.message });\n    showErrorNotification('Payment system error. Please try again.');\n  }\n});\n\napplePayComponent.mount('apple-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","data-title":"Dynamic state management","header":{"title":"Dynamic state management","controls":{"copy":{}}},"source":"class ApplePayButtonManager {\n  private component: any = null;\n  private container: string;\n  private state: 'idle' | 'loading' | 'success' | 'error' = 'idle';\n  \n  constructor(container: string) {\n    this.container = container;\n  }\n  \n  create(theme: 'light' | 'dark' = 'light') {\n    const config = {\n      merchantDisplayName: 'TechGadget Pro Store',\n      paymentDescription: 'Wireless Gaming Headset Purchase',\n      usingCss: true,\n      style: {\n        type: 'buy',\n        buttonstyle: 'black',\n        locale: 'en-US',\n        template: this.getTemplate(),\n        templateCSS: this.getCSS(theme)\n      },\n      paymentRequest: {\n        countryCode: 'US',\n        currencyCode: 'USD',\n        merchantCapabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],\n        supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],\n        total: {\n          label: 'Total',\n          amount: '189.99'\n        },\n        lineItems: [\n          {\n            label: 'Gaming Headset Pro X',\n            amount: '169.99'\n          },\n          {\n            label: 'Extended Warranty',\n            amount: '12.99'\n          },\n          {\n            label: 'Tax',\n            amount: '7.01'\n          }\n        ],\n        requiredBillingContactFields: ['postalAddress', 'name', 'email']\n      },\n      onPostAuthorisation: (result, applePayResult) => {\n        if (result instanceof AuthorisedSubmitResult) {\n          this.setState('success');\n          setTimeout(() => {\n            window.location.href = '/payment-success';\n          }, 1500);\n        } else {\n          this.setState('error');\n          setTimeout(() => this.setState('idle'), 3000);\n        }\n      },\n      onError: (error) => {\n        this.setState('error');\n        setTimeout(() => this.setState('idle'), 3000);\n      }\n    };\n    \n    this.component = pxpSdk.create('apple-pay-button', config);\n    return this;\n  }\n  \n  mount() {\n    if (this.component) {\n      this.component.mount(this.container);\n      this.setupEventListeners();\n    }\n    return this;\n  }\n  \n  setState(newState: 'idle' | 'loading' | 'success' | 'error') {\n    this.state = newState;\n    this.updateButtonAppearance();\n  }\n  \n  private getTemplate() {\n    return `\n      <button class=\"dynamic-apple-pay-button\" type=\"button\">\n        <div class=\"button-content\">\n          <svg class=\"apple-pay-icon\" viewBox=\"0 0 102 26\" width=\"51\" height=\"13\">\n            <path fill=\"currentColor\" d=\"M28.94 11.26c.09-4.21 3.48-6.26 3.64-6.37-1.98-2.9-5.06-3.3-6.16-3.34-2.62-.27-5.11 1.54-6.44 1.54-1.34 0-3.41-1.5-5.6-1.46-2.88.04-5.53 1.67-7.02 4.25-2.99 5.18-.77 12.85 2.15 17.06 1.43 2.06 3.14 4.38 5.38 4.3 2.18-.09 3-1.41 5.63-1.41 2.62 0 3.37 1.41 5.64 1.37 2.33-.04 3.83-2.11 5.26-4.18 1.66-2.39 2.34-4.7 2.38-4.82-.05-.02-4.57-1.75-4.66-6.94zM25.13 8.12c1.19-1.44 1.99-3.44 1.77-5.43-1.71.07-3.78.89-5.01 2.01-1.1 1.27-2.06 3.31-1.8 5.26 1.9.15 3.85-.97 5.04-1.84z\"/>\n          </svg>\n          <span class=\"button-text\">Pay</span>\n          <div class=\"status-indicator\">\n            <div class=\"spinner\"></div>\n            <div class=\"checkmark\">✓</div>\n            <div class=\"error-mark\">✗</div>\n          </div>\n        </div>\n      </button>\n    `;\n  }\n  \n  private getCSS(theme: 'light' | 'dark') {\n    const colors = theme === 'dark' ? {\n      bg: '#1c1c1e',\n      text: '#ffffff',\n      hover: '#2c2c2e',\n      success: '#30d158',\n      error: '#ff453a'\n    } : {\n      bg: '#000000',\n      text: '#ffffff',\n      hover: '#333333',\n      success: '#34c759',\n      error: '#ff3b30'\n    };\n    \n    return `\n      .dynamic-apple-pay-button {\n        width: 100%;\n        height: 52px;\n        background: ${colors.bg};\n        color: ${colors.text};\n        border: none;\n        border-radius: 8px;\n        font-size: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        position: relative;\n        overflow: hidden;\n      }\n      \n      .button-content {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        gap: 8px;\n        transition: all 0.3s ease;\n      }\n      \n      .dynamic-apple-pay-button:hover {\n        background: ${colors.hover};\n        transform: translateY(-1px);\n      }\n      \n      .status-indicator {\n        position: absolute;\n        right: 16px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 20px;\n        height: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      .spinner, .checkmark, .error-mark {\n        display: none;\n        position: absolute;\n      }\n      \n      .spinner {\n        width: 16px;\n        height: 16px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top: 2px solid white;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n      }\n      \n      .checkmark {\n        color: ${colors.success};\n        font-size: 18px;\n        font-weight: bold;\n      }\n      \n      .error-mark {\n        color: ${colors.error};\n        font-size: 18px;\n        font-weight: bold;\n      }\n      \n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n      \n      /* State classes */\n      .dynamic-apple-pay-button.loading .spinner { display: block; }\n      .dynamic-apple-pay-button.success .checkmark { display: block; }\n      .dynamic-apple-pay-button.error .error-mark { display: block; }\n      \n      .dynamic-apple-pay-button.loading {\n        cursor: not-allowed;\n        opacity: 0.8;\n      }\n      \n      .dynamic-apple-pay-button.success {\n        background: ${colors.success};\n      }\n      \n      .dynamic-apple-pay-button.error {\n        background: ${colors.error};\n      }\n    `;\n  }\n  \n  private setupEventListeners() {\n    const button = document.querySelector('.dynamic-apple-pay-button');\n    if (button) {\n      button.addEventListener('click', () => {\n        if (this.state === 'idle') {\n          this.setState('loading');\n        }\n      });\n    }\n  }\n  \n  private updateButtonAppearance() {\n    const button = document.querySelector('.dynamic-apple-pay-button');\n    if (button) {\n      button.className = `dynamic-apple-pay-button ${this.state}`;\n    }\n  }\n}\n\n// Usage\nconst applePayManager = new ApplePayButtonManager('apple-pay-container');\napplePayManager.create('dark').mount();\n","lang":"typescript"},"children":[]}]}]},"headings":[{"value":"Customisation","id":"customisation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Default styling","id":"default-styling","depth":2},{"value":"Default button types","id":"default-button-types","depth":3},{"value":"Default button styles","id":"default-button-styles","depth":3},{"value":"CSS method styling","id":"css-method-styling","depth":2},{"value":"Configuration options","id":"configuration-options","depth":2},{"value":"ApplePayButtonComponentConfig","id":"applepaybuttoncomponentconfig","depth":3},{"value":"ApplePayButtonStyle","id":"applepaybuttonstyle","depth":3},{"value":"Examples","id":"examples","depth":2}],"frontmatter":{"seo":{"title":"Customisation"}},"lastModified":"2026-04-22T11:40:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/apple-pay/customisation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}