{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Configuration","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":"configuration","__idx":0},"children":["Configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure the Paze button component for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, the Paze button component requires a session with Paze enabled and USD transaction data on SDK initialisation. Component configuration can be as simple as:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  buttonRenderMode: 'static',\n  emailAddress: 'customer@example.com'\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":{"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":["buttonRenderMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls presentment. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"static\""]},".",{"$$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\""]},": always show the button after SDK initialisation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"dynamic\""]},": call Paze's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["canCheckout()"]}," to determine eligibility"]}]}]}]},{"$$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":["The shopper's email address. Required for dynamic presentment. Validated as RFC 5322 when provided."]}]},{"$$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":["US phone number in E.164 format without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["+"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["15551234567"]},"). Required for dynamic presentment."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["emailAddress"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneNumber"]}," are set, the SDK passes both to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["canCheckout()"]}," in dynamic mode, but sends only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneNumber"]}," to Paze ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout()"]},"."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK loads the Paze Digital Wallet SDK, handles wallet presentment, and by default decrypts tokens and submits transactions. We also recommend implementing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetShopper"]}," on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout.initialize()"]}," to supply shopper data when the SDK submits the transaction."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  buttonRenderMode: 'dynamic',\n  emailAddress: 'customer@example.com',\n  phoneNumber: '15551234567',\n  paymentDescription: 'Order #12345',\n  billingPreference: 'ALL',\n  acceptedPaymentCardNetworks: ['VISA', 'MASTERCARD'],\n  cobrand: [{ cobrandName: 'Rewards Plus', benefitsOffered: true }],\n  performAVS: true,\n  style: {\n    color: 'pazeblue',\n    shape: 'pill',\n    label: 'check out with'\n  },\n  onInit: () => console.log('Paze initialised'),\n  onPresentmentResolved: (isVisible) => console.log('Button visible:', isVisible),\n  onCheckoutComplete: async (result) => true,\n  onPreDecryption: async () => true,\n  onPostDecryption: async (payload) => console.log(payload.fundingData.cardNetwork),\n  onPostAuthorisation: async (data) => console.log(data.systemTransactionId)\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":["buttonRenderMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls button presentment. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"static\""]},".",{"$$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":["\"dynamic\""]}]}]}]}]},{"$$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":["The shopper's email for identity and presentment. Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonRenderMode"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"dynamic\""]},". If both email and phone are set, only phone is sent to Paze ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout()"]},"."]}]},{"$$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":["A phone number in US E.164 format without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["+"]},". Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonRenderMode"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"dynamic\""]},". Takes precedence over ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["emailAddress"]}," at checkout when both are set."]}]},{"$$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":"td","attributes":{},"children":["A statement descriptor forwarded to Paze. Maximum 25 characters."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingPreference"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Billing address collection in the Paze popup. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"ALL\""]},".",{"$$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":["\"ALL\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"ZIP_COUNTRY\""]}]},{"$$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":["confirmLaunch"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", Paze may show a confirmation popup before checkout."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sessionId"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional session ID echoed back by Paze. Defaults to the SDK session ID."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["acceptedShippingCountries"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The list of accepted shipping countries, in ISO 3166-1 alpha-2 format."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["acceptedPaymentCardNetworks"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accepted card networks. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["VISA"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MASTERCARD"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DISCOVER"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cobrand"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PazeCobrandConfig[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional cobrand entries for partner branding in the Paze wallet."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enhancedTransactionData"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional checkout metadata forwarded to Paze. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#enhanced-transaction-data"},"children":["Enhanced transaction data"]},"."]}]},{"$$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":["PazeButtonStyleConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Official Paze button styling. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#styling"},"children":["Styling"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["performAVS"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", includes billing address from decrypted payload in AVS fields when the SDK submits the transaction. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},". For manual backend decryption, apply AVS on your transaction request instead."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCustomValidation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => Promise<boolean>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called before checkout opens. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to prevent checkout."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your merchant branding (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clientName"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteName"]},") is configured on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout.initialize()"]},", not on the button component. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clientName"]}," maps to Paze's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["name"]}," (max 50 characters) and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["siteName"]}," maps to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brandName"]}," (max 50 characters)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"enhanced-transaction-data","__idx":4},"children":["Enhanced transaction data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enhancedTransactionData"]}," is optional metadata forwarded to Paze during ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout()"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["complete()"]},". Use it when Paze or your merchant agreement requires additional order context."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  enhancedTransactionData: {\n    ecomData: {\n      cartContainsGiftCard: false,\n      orderForPickup: false,\n      orderQuantity: '2',\n      orderHighestCost: '49.99',\n      finalShippingAddress: {\n        line1: '123 Main St',\n        city: 'New York',\n        state: 'NY',\n        zip: '10001',\n        countryCode: 'US'\n      }\n    },\n    processingNetwork: ['VISA', 'MASTERCARD']\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":["ecomData.cartContainsGiftCard"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the cart contains a gift card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ecomData.orderForPickup"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the order is for in-store or curbside pickup."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ecomData.orderQuantity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Order item count as a string."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ecomData.orderHighestCost"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Highest line-item cost as a string."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ecomData.finalShippingAddress"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Shipping address with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["line1"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["city"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["state"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["zip"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["countryCode"]},", and optional ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["line2"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["name"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["processingNetwork"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Preferred card networks for processing (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["VISA"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MASTERCARD"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DISCOVER"]},")."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":5},"children":["Styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component renders Paze's native ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<paze-button>"]}," web component. Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," object to configure official Paze button attributes:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  style: {\n    color: 'pazeblue',\n    shape: 'pill',\n    label: 'check out with',\n    disableMaxHeight: false\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":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button colour theme.",{"$$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":["white"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["whitewithoutline"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["midnightblack"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pazeblue"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shape"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button shape.",{"$$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":["default"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rectangle"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pill"]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The button label text.",{"$$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":["checkout"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["check out with"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Donate with"]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disableMaxHeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", disables the native max-height so the button fills its container."]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Don't apply custom CSS to override the Paze button appearance. Use only the supported ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," values to remain compliant with Paze branding guidelines. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/compliance"},"children":["Compliance"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":6},"children":["Event handling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  onInit: () => { },\n  onPresentmentResolved: (isVisible) => { },\n  onPazeButtonClicked: (event) => { },\n  onCheckoutComplete: async (result) => true,\n  onCheckoutIncomplete: async (result) => { },\n  onComplete: async (result) => { },\n  onPreDecryption: async () => true,\n  onPostDecryption: async (decryptedPayload) => { },\n  onPreAuthorisation: async () => null,\n  onPostAuthorisation: async (data) => { },\n  onSubmitError: async (submitError) => { },\n  onError: (error) => { }\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":"Callback"},"children":["Callback"]},{"$$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":["onInit"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after the Paze SDK is initialised for this component."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPresentmentResolved"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(isVisible: boolean) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after presentment resolves with whether the button is shown."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPazeButtonClicked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(event: Event) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when the native button is clicked, before checkout starts."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCheckoutComplete"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result: PazeCheckoutResult) => boolean | Promise<boolean>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout()"]}," returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["COMPLETE"]},". Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["complete()"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to cancel. If omitted, the SDK proceeds automatically."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCheckoutIncomplete"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result: PazeCheckoutResult) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when checkout ends without completion or is rejected by merchant validation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onComplete"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result: PazeCompleteResult) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["complete()"]}," succeeds. Use for manual decryption workflows."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => boolean | Promise<boolean>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called before SDK decryption. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to allow SDK decryption, or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," for manual decryption."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostDecryption"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(decryptedPayload: PazeDecryptTokenResponse) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after the SDK decrypts the secured payload."]}]},{"$$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":["() => boolean | PazeTransactionInitData | null | Promise<...>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called before transaction submission. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to abort, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed, or provide ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["riskScreeningData"]},"."]}]},{"$$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":["(data: PazePostAuthorisationData) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after successful authorisation with transaction IDs and state."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmitError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(submitError: BaseSubmitResult) => void | Promise<void>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when transaction submission fails."]}]},{"$$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: BaseSdkException) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a presentment, checkout, or decryption error occurs."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed callback payloads and event data structures, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"decryption-flow","__idx":7},"children":["Decryption flow"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"sdk-managed-decryption-recommended","__idx":8},"children":["SDK-managed decryption (recommended)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the SDK decrypts the secured payload after ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["complete()"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  onCheckoutComplete: async (result) => {\n    // Approve checkout to proceed\n    return true;\n  },\n\n  onPreDecryption: async () => {\n    // Allow SDK to decrypt (this is the default if omitted)\n    return true;\n  },\n\n  onPostDecryption: async (decryptedPayload) => {\n    console.log('Card network:', decryptedPayload.fundingData.cardNetwork);\n  },\n\n  onPostAuthorisation: async (data) => {\n    console.log('Transaction ID:', data.systemTransactionId);\n    await verifyPaymentOnBackend(data.systemTransactionId);\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"manual-decryption-flow","__idx":9},"children":["Manual decryption flow"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]}," to handle decryption on your backend:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n  onCheckoutComplete: async (result) => true,\n\n  onPreDecryption: async () => false,\n\n  onComplete: async (result) => {\n    const securedPayload = result.completeDecodedResponse?.securedPayload;\n\n    // POST to your backend, which calls the PXP decrypt-token API\n    await fetch('/api/paze/decrypt', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ securedPayload })\n    });\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using manual decryption, you are responsible for calling the PXP ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["decrypt-token"]}," endpoint and submitting the transaction from your backend. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/implementation#backend-decryption"},"children":["Backend decryption"]}," for the full API reference."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"fraud-detection-integration","__idx":10},"children":["Fraud detection integration"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"address-verification-avs","__idx":11},"children":["Address verification (AVS)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["performAVS: true"]}," to include billing address from the decrypted payload in the transaction request when the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SDK submits the transaction"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  billingPreference: 'ALL',\n  performAVS: true\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you enable ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["performAVS"]},", set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingPreference: \"ALL\""]}," so the Paze wallet returns a billing address for AVS. This applies only when the SDK manages decryption and authorisation. If you return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]},", add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addressVerification"]}," to your backend transaction request using the billing address from the decrypt response."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"kount-risk-screening","__idx":12},"children":["Kount risk screening"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass risk screening data through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation"]},". Disable Kount device fingerprinting with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["kountDisabled: true"]}," on SDK initialisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pxpSdk = PxpCheckout.initialize({\n  environment: 'test',\n  session: sessionData,\n  kountDisabled: false, // Set to true to disable Kount\n  // ...\n});\n\nconst pazeButton = pxpSdk.create('paze-button', {\n  onPreAuthorisation: async () => ({\n    riskScreeningData: {\n      performRiskScreening: true,\n      userIp: '192.168.1.100',\n      account: {\n        id: 'shopper-123',\n        creationDateTime: '2024-01-15T10:30:00.000Z'\n      }\n    }\n  })\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":13},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount","__idx":14},"children":["mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the Paze button in the specified container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', config);\npazeButton.mount('paze-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":15},"children":["unmount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the Paze button from the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"pazeButton.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":16},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-checkout-button","__idx":17},"children":["Basic checkout button"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  buttonRenderMode: 'static',\n  emailAddress: 'customer@example.com',\n\n  onCheckoutComplete: async () => true,\n\n  onPostAuthorisation: async (data) => {\n    await verifyPaymentOnBackend(data.systemTransactionId);\n    window.location.href = '/order-confirmation';\n  },\n\n  onError: (error) => {\n    console.error('Paze error:', error.ErrorCode, error.message);\n    showError('Payment error. Please try again.');\n  }\n});\n\npazeButton.mount('paze-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dynamic-presentment","__idx":18},"children":["Dynamic presentment"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  buttonRenderMode: 'dynamic',\n  emailAddress: customerEmail,\n  phoneNumber: '15551234567',\n\n  onPresentmentResolved: (isVisible) => {\n    if (!isVisible) {\n      showAlternativePaymentMethods();\n    }\n  },\n\n  onCheckoutComplete: async () => true,\n  onPostAuthorisation: async (data) => {\n    await verifyPaymentOnBackend(data.systemTransactionId);\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-payment-with-fraud-detection","__idx":19},"children":["Enterprise payment with fraud detection"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n  buttonRenderMode: 'dynamic',\n  emailAddress: 'customer@example.com',\n  phoneNumber: '15551234567',\n  billingPreference: 'ALL',\n  acceptedPaymentCardNetworks: ['VISA', 'MASTERCARD'],\n  performAVS: true,\n  style: { color: 'pazeblue', shape: 'pill', label: 'check out with' },\n\n  onCheckoutComplete: async (result) => {\n    // Server-side order validation before proceeding\n    return await validateOrderOnBackend(result);\n  },\n\n  onPreAuthorisation: async () => ({\n    riskScreeningData: {\n      performRiskScreening: true,\n      userIp: '192.168.1.100',\n      account: { id: 'shopper-123', creationDateTime: '2024-01-15T10:30:00.000Z' }\n    }\n  }),\n\n  onPostAuthorisation: async (data) => {\n    if (data.state === 'Authorised') {\n      await verifyPaymentOnBackend(data.systemTransactionId);\n      window.location.href = `/success?id=${data.merchantTransactionId}`;\n    }\n  },\n\n  onSubmitError: async (submitError) => {\n    console.error('Submit error:', submitError);\n    showError('Payment failed. Please try again.');\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-interfaces","__idx":20},"children":["Configuration interfaces"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pazebuttoncomponentconfig","__idx":21},"children":["PazeButtonComponentConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface PazeButtonComponentConfig extends BaseComponentConfig {\n  buttonRenderMode?: 'static' | 'dynamic';\n  emailAddress?: string;\n  phoneNumber?: string;\n  paymentDescription?: string;\n  billingPreference?: 'ALL' | 'ZIP_COUNTRY' | 'NONE';\n  confirmLaunch?: boolean;\n  sessionId?: string;\n  acceptedShippingCountries?: string[];\n  acceptedPaymentCardNetworks?: Array<'VISA' | 'MASTERCARD' | 'DISCOVER'>;\n  cobrand?: PazeCobrandConfig[];\n  enhancedTransactionData?: PazeEnhancedTransactionDataConfig;\n  style?: PazeButtonStyleConfig;\n  performAVS?: boolean;\n  onInit?: () => void;\n  onPresentmentResolved?: (isVisible: boolean) => void;\n  onPazeButtonClicked?: (event: Event) => void | Promise<void>;\n  onCheckoutComplete?: (result: PazeCheckoutResult) => boolean | Promise<boolean>;\n  onCheckoutIncomplete?: (result: PazeCheckoutResult) => void | Promise<void>;\n  onComplete?: (result: PazeCompleteResult) => void | Promise<void>;\n  onCustomValidation?: () => Promise<boolean>;\n  onPreDecryption?: () => boolean | Promise<boolean>;\n  onPostDecryption?: (decryptedPayload: PazeDecryptTokenResponse) => void | Promise<void>;\n  onPreAuthorisation?: () => boolean | PazeTransactionInitData | null | Promise<boolean | PazeTransactionInitData | null>;\n  onPostAuthorisation?: (data: PazePostAuthorisationData) => void | Promise<void>;\n  onSubmitError?: (submitError: BaseSubmitResult) => void | Promise<void>;\n  onError?: (error: BaseSdkException) => void;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pazebuttonstyleconfig","__idx":22},"children":["PazeButtonStyleConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface PazeButtonStyleConfig {\n  color?: 'white' | 'whitewithoutline' | 'midnightblack' | 'pazeblue';\n  shape?: 'default' | 'rectangle' | 'pill';\n  label?: 'checkout' | 'check out with' | 'Donate with';\n  disableMaxHeight?: boolean;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pazecobrandconfig","__idx":23},"children":["PazeCobrandConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface PazeCobrandConfig {\n  cobrandName: string;\n  benefitsOffered?: boolean;\n}\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Configuration","id":"configuration","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Enhanced transaction data","id":"enhanced-transaction-data","depth":2},{"value":"Styling","id":"styling","depth":2},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Decryption flow","id":"decryption-flow","depth":2},{"value":"SDK-managed decryption (recommended)","id":"sdk-managed-decryption-recommended","depth":3},{"value":"Manual decryption flow","id":"manual-decryption-flow","depth":3},{"value":"Fraud detection integration","id":"fraud-detection-integration","depth":2},{"value":"Address verification (AVS)","id":"address-verification-avs","depth":3},{"value":"Kount risk screening","id":"kount-risk-screening","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"mount()","id":"mount","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic checkout button","id":"basic-checkout-button","depth":3},{"value":"Dynamic presentment","id":"dynamic-presentment","depth":3},{"value":"Enterprise payment with fraud detection","id":"enterprise-payment-with-fraud-detection","depth":3},{"value":"Configuration interfaces","id":"configuration-interfaces","depth":2},{"value":"PazeButtonComponentConfig","id":"pazebuttoncomponentconfig","depth":3},{"value":"PazeButtonStyleConfig","id":"pazebuttonstyleconfig","depth":3},{"value":"PazeCobrandConfig","id":"pazecobrandconfig","depth":3}],"frontmatter":{"seo":{"title":"Configuration"}},"lastModified":"2026-06-22T14:49:35.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paze/configuration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}