{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details","required"]},"type":"markdown"},"seo":{"title":"Implementation","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"implementation","__idx":0},"children":["Implementation"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete guide to integrating the Paze component into your application."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Paze component provides a fast, secure payment experience using the Paze digital wallet. The component follows a simple three-step lifecycle:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Initialise:"]}," Configure the SDK with your session and transaction data."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create and mount:"]}," Build the Paze button with your configuration and render it to your page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Handle callbacks:"]}," Respond to payment success, errors, and other events."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically handles Paze wallet presentment, checkout, token decryption, and transaction processing."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Backend verification is mandatory. Always verify payments on your backend before fulfilling orders. Frontend callbacks can be manipulated by malicious users."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-start","__idx":2},"children":["Before you start"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/onboarding"},"children":["Paze onboarding"]}," in the Unity Portal before integrating the component. You will need:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Paze enabled at merchant group and site level, with your Paze client ID saved in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Paze Account Settings"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PXP API credentials (client ID and authentication token) for session creation on your backend"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["HTTPS on your site (required for Paze; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localhost"]}," is exempt for development)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A Paze merchant account linked to the Unity Portal"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set the SDK ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["environment"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["test"]}," for UAT or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["live"]}," for production. The Web SDK loads the Paze Digital Wallet SDK for you; the script URL depends on your environment:"]},{"$$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":{"align":"left","data-label":"Environment"},"children":["Environment"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Paze SDK URL"},"children":["Paze SDK URL"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["test"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://checkout.wallet.uat.earlywarning.io/web/resources/js/digitalwallet-sdk.js"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["live"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://checkout.paze.com/web/resources/js/digitalwallet-sdk.js"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Paze also requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["USD"]}," currency and a card intent in your session and SDK config. We also recommend an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetShopper"]}," callback on SDK initialisation. These are covered in the steps below."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If portal or session setup fails, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/troubleshooting#portal-and-session-setup"},"children":["Portal and session setup"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"browser-and-device-compatibility","__idx":3},"children":["Browser and device compatibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Paze for Web has specific requirements for optimal functionality."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-browsers","__idx":4},"children":["Supported browsers"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Chrome 80+ on all platforms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari 13.1+ on macOS and iOS"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Firefox 75+ on all platforms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Edge 80+ on Windows and macOS"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"device-requirements","__idx":5},"children":["Device requirements"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Android devices: Android 7.0 (Nougat) or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["iOS devices: iOS 13.1 or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: Windows 10+, macOS 10.14+, or Linux"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"configuration-requirements","__idx":6},"children":["Configuration requirements"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer must have a Paze wallet account with saved payment methods."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer's email address must match their Paze wallet registration."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-install-the-web-sdk-library","__idx":7},"children":["Step 1: Install the Web SDK library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install the latest version of the Web SDK from the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.npmjs.com/package/@pxpio/web-components-sdk","target":"_blank"},"children":["npm public registry"]},". You'll need to have Node.js 22.x or higher."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"shell","header":{"controls":{"copy":{}}},"source":"npm i @pxpio/web-components-sdk\n","lang":"shell"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Paze component is part of the main SDK package. Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," directly from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@pxpio/web-components-sdk"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-create-a-session-on-your-backend","__idx":8},"children":["Step 2: Create a session on your backend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Paze component requires a session from the PXP Sessions API. This must be done on your backend using HMAC authentication to keep your credentials secure."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"understanding-hmac-authentication","__idx":9},"children":["Understanding HMAC authentication"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Our platform uses HMAC (Hash-based Message Authentication Code) with SHA256 for authentication to ensure secure communication and data integrity. This method involves creating a signature by hashing your request data with a secret key, which must then be included in the HTTP headers of your API request."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-an-hmac-signature","__idx":10},"children":["Create an HMAC signature"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create the HMAC signature, you need to prepare a string that includes four parts concatenated together:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Timestamp"]},": The current time in ",{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"https://en.wikipedia.org/wiki/Unix_time"},"children":["Unix seconds"]}," (UTC) (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1754701373"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request ID"]},": A unique GUID for this request (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ce244054-b372-42c2-9102-f0d976db69f6"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request path"]},": The API endpoint path: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["api/v1/sessions"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request body"]},": The complete JSON request body as a minified string"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example request body to minify:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"merchant\": \"MERCHANT-1\",\n \"site\": \"SITE-1\",\n \"sessionTimeout\": 120,\n \"merchantTransactionId\": \"txn-123\",\n \"transactionMethod\": {\n \"intent\": {\n \"card\": \"Authorisation\"\n }\n },\n \"amounts\": {\n \"currencyCode\": \"USD\",\n \"transactionValue\": 99.99\n },\n \"allowTransaction\": true\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When creating the HMAC signature, the request body must be minified (no whitespace or formatting). The formatted JSON above is for readability only. Paze requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currencyCode"]}," to be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["USD"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-request-parameters","__idx":11},"children":["Session request parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The session request accepts the following parameters:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchant"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (≤ 20 characters)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your unique merchant identifier, as assigned by PXP. You can find it in the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},", by going to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Merchants"]}," and checking the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Merchant ID"]}," column."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["site"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (≤ 20 characters)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your unique site identifier, as assigned by PXP. You can find it in the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},", by going to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Sites"]}," and checking the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Site ID"]}," column."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantTransactionId"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (≤ 50 characters)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A unique identifier of your choice that represents this transaction."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sessionTimeout"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The duration of the session, in minutes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionMethod"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Details about the transaction method, including the intent for each payment type."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionMethod.intent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The transaction intent for each payment method."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionMethod.intent.card"]},{"$$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 intent for Paze transactions.",{"$$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":["Authorisation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Purchase"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Verification"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EstimatedAuthorisation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Payout"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amounts"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Details about the transaction amount."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amounts.currencyCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (3 characters)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The currency code associated with the transaction, in ISO 4217 format. Paze supports ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["USD"]}," only."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amounts.transactionValue"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The transaction amount. The numbers after the decimal will be zero padded if they are less than the expected ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currencyCode"]}," exponent. For example, USD 1 = USD 1.00. The transaction will be rejected if numbers after the decimal are greater than the expected ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currencyCode"]}," exponent (e.g., USD 1.234)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowTransaction"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether or not to proceed with the transaction."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"prepare-and-send-your-request","__idx":12},"children":["Prepare and send your request"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The HMAC signature requires combining your timestamp, request ID, request path, and request body. Here's the format:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["String to hash"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{timestamp}{requestId}{requestPath}{requestBody}"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"1754701373ce244054-b372-42c2-9102-f0d976db69f6api/v1/sessions{\"merchant\":\"MERCHANT-1\",\"site\":\"SITE-1\",\"sessionTimeout\":120,\"merchantTransactionId\":\"txn-123\",\"transactionMethod\":{\"intent\":{\"card\":\"Authorisation\"}},\"amounts\":{\"currencyCode\":\"USD\",\"transactionValue\":99.99},\"allowTransaction\":true}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["token value"]}," as the secret key to create an HMAC SHA256 hash of this string. The result will be a hex-encoded signature like:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"1DE2DFC390D7CD746A972140F26846AFA81CF85F5A0BAABA95DBC95301795EA6\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can now put together your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Authorization"]}," header. It follows this format: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PXP-UST1 {tokenId}:{timestamp}:{signature}"]},". For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"PXP-UST1 9aac6071-38d0-4545-9d2f-15b936af6d7f:1754701373:1DE2DFC390D7CD746A972140F26846AFA81CF85F5A0BAABA95DBC95301795EA6\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Lastly, send your request to the Sessions API. You'll need to add a request ID of your choice and include your client ID, which you can find in the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a full example of what your request might look like:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"curl","header":{"controls":{"copy":{}}},"source":"curl -i -X POST \\\n 'https://api-services.dev.pxp.io/api/v1/sessions' \\\n -H 'Authorization: PXP-UST1 9aac6071-38d0-4545-9d2f-15b936af6d7f:1754701373:1DE2DFC390D7CD746A972140F26846AFA81CF85F5A0BAABA95DBC95301795EA6' \\\n -H 'X-Request-Id: ce244054-b372-42c2-9102-f0d976db69f6' \\\n -H 'X-Client-Id: f47ac10b-58cc-4372-a567-0e02b2c3d479' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"merchant\": \"MERCHANT-1\",\n \"site\": \"SITE-1\",\n \"sessionTimeout\": 120,\n \"merchantTransactionId\": \"txn-123\",\n \"transactionMethod\": {\n \"intent\": {\n \"card\": \"Authorisation\"\n }\n },\n \"amounts\": {\n \"currencyCode\": \"USD\",\n \"transactionValue\": 99.99\n },\n \"allowTransaction\": true\n}'\n","lang":"curl"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-response","__idx":13},"children":["Session response"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If your request is successful, you'll receive a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["200"]}," response containing the session data. When Paze is enabled for your site, the response includes Paze configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"sessionId\": \"c5f0799b-0839-43ce-abc5-5b462a98f250\",\n \"hmacKey\": \"904bc42395d4af634e2fd48ee8c2c7f52955a1da97a3aa3d82957ff12980a7bb\",\n \"encryptionKey\": \"20d175a669ad3f8c195c9c283fc86155\",\n \"sessionExpiry\": \"2025-05-19T13:39:20.3843454Z\",\n \"allowedFundingTypes\": {\n \"cardSchemes\": [\"Visa\", \"Mastercard\", \"AmericanExpress\"],\n \"cards\": [],\n \"wallets\": {\n \"paze\": {\n \"clientId\": \"your-paze-client-id\",\n \"profileId\": \"optional-profile-id\",\n \"merchantCategoryCode\": \"category-code\"\n }\n }\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Return the session response to your frontend together with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantTransactionId"]}," you sent in the session request. Your frontend must pass the same value to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.merchantTransactionId"]}," when initialising the SDK."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Paze configuration is automatically included in the session response when Paze is configured for your site in the Unity Portal. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/onboarding"},"children":["Onboarding"]}," for portal setup steps."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-initialise-the-sdk-on-your-frontend","__idx":14},"children":["Step 3: Initialise the SDK on your frontend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," from the SDK and initialise with your configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\n\n// Get session data from your backend\nconst sessionData = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' }\n}).then(response => response.json());\n\n// Initialise the SDK\nconst merchantTransactionId = sessionData.merchantTransactionId ?? crypto.randomUUID();\n\nconst pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MERCHANT-1',\n ownerType: 'MerchantGroup',\n clientName: 'Your Merchant',\n siteName: 'Your Store',\n transactionData: {\n currency: 'USD',\n amount: 99.99,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation\n },\n merchantTransactionId,\n merchantTransactionDate: () => new Date().toISOString()\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n onGetShopper: () => Promise.resolve({ \n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe'\n })\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantTransactionId"]}," in your session request and in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.merchantTransactionId"]},". If these values differ, reconciliation, callbacks, and transaction lookups will not align."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-create-and-configure-the-paze-button","__idx":15},"children":["Step 4: Create and configure the Paze button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the SDK's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create()"]}," method to build the Paze button with your desired configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType, PazeCompleteResult } from '@pxpio/web-components-sdk';\n\nconst pazeButton = pxpSdk.create('paze-button', {\n buttonRenderMode: 'static',\n emailAddress: 'customer@example.com',\n phoneNumber: '15551234567',\n style: {\n color: 'pazeblue',\n shape: 'pill',\n label: 'check out with'\n },\n onPresentmentResolved: (isVisible) => {\n console.log('Paze button visible:', isVisible);\n },\n onCheckoutComplete: async (result) => {\n console.log('Paze checkout complete:', result);\n return true;\n },\n onComplete: async (result: PazeCompleteResult) => {\n console.log('Paze complete success', result);\n },\n onPreDecryption: async () => true,\n onPostDecryption: async (decryptedPayload) => {\n console.log('Decryption complete:', decryptedPayload.fundingData.cardNetwork);\n },\n onPostAuthorisation: async (data) => {\n // CRITICAL: Verify on backend before fulfilling order\n await verifyPaymentOnBackend(data.systemTransactionId);\n },\n onError: (error) => {\n console.error('Paze payment failed:', error);\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-options","__idx":16},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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":["Optional shopper email address for identity and presentment. Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonRenderMode"]}," is ",{"$$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":["phoneNumber"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional 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\""]},"."]}]},{"$$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":"/guides/checkout/components/web/paze/configuration#enhanced-transaction-data"},"children":["Configuration"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.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":["style.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":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["enum"]}]},{"$$mdtype":"Tag","name":"td","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":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.disableMaxHeight"]},{"$$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"]},", disables the native max-height so the button fills its container."]}]},{"$$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"]},". Not used when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]}," returns ",{"$$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":["onCustomValidation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => Promise"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called before checkout opens. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to prevent checkout."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For the full list of component callbacks, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/events"},"children":["Events"]},". For additional configuration examples, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/configuration"},"children":["Configuration"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5-mount-the-button-to-your-page","__idx":17},"children":["Step 5: Mount the button to your page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a container element to your page where the Paze button will be rendered:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Then call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount()"]}," method to render the button:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"pazeButton.mount('paze-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-6-unmount-the-component","__idx":18},"children":["Step 6: Unmount the component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When your component unmounts (e.g., when navigating away or cleaning up), call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}," method:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"return () => {\n pazeButton.unmount();\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-7-handle-callbacks","__idx":19},"children":["Step 7: Handle callbacks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Most Paze callbacks are optional. Configure them on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paze-button"]}," component to customise presentment, checkout approval, decryption, and authorisation handling."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend implementing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetShopper"]}," on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout.initialize()"]}," (not on the button component). The SDK calls it when building the transaction request after decryption. The callback is optional in code, but most integrations need shopper data for authorisation:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pxpSdk = PxpCheckout.initialize({\n // ... session and transactionData\n onGetShopper: () => Promise.resolve({\n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe'\n })\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you implement ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCheckoutComplete"]},", return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to approve checkout and proceed to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["complete()"]},", decryption, and authorisation. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to cancel."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For all component callbacks, including ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPresentmentResolved"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCheckoutComplete"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostDecryption"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},", see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/events"},"children":["Events"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Never trust frontend callbacks for order fulfilment. Always verify payments on your backend using webhooks or the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/apis/transaction/other/get-transaction-details"},"children":["Get transaction details API"]}," before fulfilling orders."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-8-backend-verification-critical","__idx":20},"children":["Step 8: Backend verification (critical)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontend callbacks can be manipulated by malicious users. You must verify all payments on your backend before fulfilling orders."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the same webhook and API verification patterns described in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/implementation#step-8-backend-verification-critical"},"children":["card implementation guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"understanding-the-paze-payment-flow","__idx":21},"children":["Understanding the Paze payment flow"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Paze payment flow consists of several stages:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Presentment:"]}," The SDK checks if the customer has a Paze wallet for the provided email address."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button click:"]}," The customer clicks the Paze button to initiate payment."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Checkout:"]}," The customer completes checkout within the Paze wallet."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Decryption:"]}," The Paze token is decrypted (SDK-managed or manual)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Authorisation:"]}," The payment is authorised with the decrypted card data."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Example showing all stages\nconst pazeButton = pxpSdk.create('paze-button', {\n buttonRenderMode: 'static',\n emailAddress: 'customer@example.com',\n \n onPresentmentResolved: (isVisible) => {\n console.log('Stage 1: Presentment resolved, visible:', isVisible);\n },\n \n onPazeButtonClicked: () => {\n console.log('Stage 2: Paze button clicked');\n trackEvent('paze_button_clicked');\n },\n \n onCheckoutComplete: async (result) => {\n console.log('Stage 3: Checkout complete');\n return true;\n },\n \n onPreDecryption: async () => {\n console.log('Stage 4a: Starting decryption');\n return true;\n },\n \n onPostDecryption: async (decryptedPayload) => {\n console.log('Stage 4b: Decryption complete');\n },\n \n onPreAuthorisation: async () => {\n console.log('Stage 5a: Preparing authorisation');\n return {\n riskScreeningData: {\n performRiskScreening: true,\n userIp: '192.168.1.100'\n }\n };\n },\n \n onPostAuthorisation: async (data) => {\n console.log('Stage 5b: Payment authorised:', data.systemTransactionId);\n await verifyPaymentOnBackend(data.systemTransactionId);\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"backend-decryption","__idx":22},"children":["Backend decryption"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]},", the SDK skips built-in decryption and authorisation. Your backend must decrypt the secured payload and submit the scheme token transaction."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-configure-the-frontend","__idx":23},"children":["1. Configure the frontend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]}," and forward the secured payload to your backend in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onComplete"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const pazeButton = pxpSdk.create('paze-button', {\n onCheckoutComplete: async () => true,\n\n onPreDecryption: async () => false,\n\n onComplete: async (result) => {\n const securedPayload = result.completeDecodedResponse?.securedPayload;\n\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":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onComplete"]}," callback receives a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PazeCompleteResult"]}," like this:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"completeResponse\": \"eyJhdWQiOi...\",\n \"completeDecodedResponse\": {\n \"payloadId\": \"5C9190F52C004d7cf1a2-d4a0-4d4d-0463-15f90ad0d801\",\n \"sessionId\": \"3247d172-1232-4175-9fa2-eabbec62950d\",\n \"securedPayload\": \"eyJhdWQHBmaW...\"\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completeDecodedResponse.securedPayload"]}," to your backend. Never call the PXP decrypt API directly from frontend code."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-decrypt-the-secured-payload","__idx":24},"children":["2. Decrypt the secured payload"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["From your backend, call the PXP decrypt-token endpoint using HMAC authentication. Use the same HMAC pattern as ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-3-create-a-session-on-your-backend"},"children":["session creation"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is the merchant backend endpoint (PXP-UST1). When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDecryption"]}," returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," or is omitted, the Web SDK decrypts internally using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["POST /api/v1/paze/decrypt-token"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ \"securedPayload\": \"...\" }"]}," and session authentication. Use the wallets endpoint below only for manual backend decryption."]}]},{"$$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":{"align":"left","data-label":"Environment"},"children":["Environment"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Endpoint"},"children":["Endpoint"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Test"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["POST https://api-services.dev.pxp.io/api/v1/wallets/Paze/decrypt-token"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Live"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["POST https://api-services.pxp.io/api/v1/wallets/Paze/decrypt-token"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Headers:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Content-Type: application/json"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Authorization: PXP-UST1 ::"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["X-Request-Id: "]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["X-Client-Id: "]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request body:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"site\": \"your-site-id\",\n \"token\": \"eyJhdWQHBmaW...\"\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token"]}," value is the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["securedPayload"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onComplete"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a sample response:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"shopper\": {\n \"firstName\": \"Test\",\n \"lastName\": \"Wallet\",\n \"fullName\": \"Test Wallet\",\n \"emailAddress\": \"customer@example.com\",\n \"phoneCountryCode\": \"1\",\n \"phoneNumber\": \"6264645283\",\n \"countryCode\": \"US\",\n \"languageCode\": \"EN\"\n },\n \"billingAddress\": {\n \"addressLine1\": null,\n \"city\": null,\n \"state\": null,\n \"countryCode\": \"US\",\n \"postalCode\": \"67051\"\n },\n \"fundingData\": {\n \"networkToken\": \"\",\n \"expirationMonth\": \"08\",\n \"expirationYear\": \"2032\",\n \"accountReference\": \"V0010013023181487240991060052\",\n \"cardNetwork\": \"VISA\",\n \"tokenUsageType\": \"PURCHASE\",\n \"dynamicDataExpiration\": \"1781938231\",\n \"eci\": \"07\",\n \"schemeTokenCryptogram\": \"\"\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-submit-the-scheme-token-transaction","__idx":25},"children":["3. Submit the scheme token transaction"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the decrypted ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingData"]}," to submit an authorisation through the PXP ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/apis/transaction"},"children":["Create transaction API"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["POST /api/v1/transactions"]},") from your backend. Authenticate with the same PXP-UST1 HMAC pattern as session creation."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"cryptogram-and-eci-handling","__idx":26},"children":["Cryptogram and ECI handling"]},{"$$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":{"align":"left","data-label":"Decrypt path"},"children":["Decrypt path"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Where cryptogram / ECI go"},"children":["Where cryptogram / ECI go"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SDK-managed"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/api/v1/paze/decrypt-token"]},")"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The gateway stores ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["schemeTokenCryptogram"]}," and ECI in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["session"]}," before the SDK submits the transaction. You do not pass them in the frontend transaction request."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Manual backend"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/api/v1/wallets/Paze/decrypt-token"]},")"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Map fields from the decrypt response into your transaction request: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingData.schemeTokenCryptogram"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingData.card.schemeTokenCryptogram"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingData.eci"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["threeDSecureData.electronicCommerceIndicator"]}," when required by your integration."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"sample-transaction-request","__idx":27},"children":["Sample transaction request"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Map decrypted Paze token data to a scheme-token card authorisation. Align ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantTransactionId"]}," with the value used at session creation and in SDK ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"merchant\": \"MERCHANT-1\",\n \"site\": \"SITE-1\",\n \"merchantTransactionId\": \"txn-123\",\n \"merchantTransactionDate\": \"2025-06-17T10:30:00.000Z\",\n \"transactionMethod\": {\n \"intent\": \"Authorisation\",\n \"entryType\": \"Ecom\",\n \"fundingType\": \"Card\"\n },\n \"fundingData\": {\n \"card\": {\n \"schemeTokenNumber\": \"\",\n \"expiryMonth\": \"08\",\n \"expiryYear\": \"2032\",\n \"walletType\": \"Paze\",\n \"schemeTokenCryptogram\": \"\"\n }\n },\n \"amounts\": {\n \"transaction\": 99.99,\n \"currencyCode\": \"USD\"\n },\n \"threeDSecureData\": {\n \"electronicCommerceIndicator\": \"07\"\n },\n \"shopper\": {\n \"id\": \"shopper-123\",\n \"email\": \"customer@example.com\",\n \"firstName\": \"John\",\n \"lastName\": \"Doe\"\n },\n \"addressVerification\": {\n \"countryCode\": \"US\",\n \"houseNumberOrName\": \"123 Main St\",\n \"postalCode\": \"67051\"\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addressVerification"]}," only when you perform AVS on the backend. Populate ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shopper"]}," from your customer records or from the decrypt response ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shopper"]}," object."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After submission, verify the transaction on your backend before fulfilling the order. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-8-backend-verification-critical"},"children":["Backend verification"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using manual decryption, you are responsible for securely calling the decrypt API and submitting the transaction from your backend. The SDK doesn't proceed with authorisation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"manual-decryption-example","__idx":28},"children":["Manual decryption example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["End-to-end frontend example that delegates decryption and payment submission to your backend:"]},{"$$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 onPreDecryption: async () => false,\n\n onComplete: async (result) => {\n const securedPayload = result.completeDecodedResponse?.securedPayload;\n\n try {\n const paymentResult = await fetch('/api/paze/decrypt-and-pay', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ securedPayload })\n }).then(res => res.json());\n\n if (paymentResult.success) {\n window.location.href = '/order-confirmation';\n } else {\n showError('Unable to complete payment');\n }\n } catch (error) {\n console.error('Manual decryption failed:', error);\n showError('Unable to complete payment');\n }\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/api/paze/decrypt-and-pay"]}," backend route should call the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#2-decrypt-the-secured-payload"},"children":["decrypt-token endpoint"]},", then submit the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#3-submit-the-scheme-token-transaction"},"children":["scheme token transaction"]}," using the decrypted ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingData"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-example","__idx":29},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a complete example showing Paze integration in a React component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\nimport { useEffect, useState } from 'react';\n\nexport default function PazePage() {\n const [sessionData, setSessionData] = useState(null);\n const [customerEmail, setCustomerEmail] = useState('customer@example.com');\n\n const createSession = async () => {\n const merchantTransactionId = crypto.randomUUID();\n const createdSession = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n merchant: \"MERCHANT-1\",\n site: \"SITE-1\",\n sessionTimeout: 120,\n merchantTransactionId,\n transactionMethod: {\n intent: {\n card: \"Authorisation\"\n }\n },\n amounts: {\n currencyCode: \"USD\",\n transactionValue: 99.99\n },\n allowTransaction: true\n })\n }).then((response) => response.json());\n setSessionData({ ...createdSession, merchantTransactionId });\n };\n\n useEffect(() => {\n createSession();\n }, []);\n\n useEffect(() => {\n if (!sessionData) {\n return;\n }\n\n const pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MERCHANT_GROUP_1',\n ownerType: 'MerchantGroup',\n clientName: 'Your Merchant',\n siteName: 'Your Store',\n transactionData: {\n currency: 'USD',\n amount: 99.99,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation,\n },\n merchantTransactionId: sessionData.merchantTransactionId,\n merchantTransactionDate: () => new Date().toISOString(),\n },\n kountDisabled: false,\n onGetShopper: async () => {\n return {\n id: 'shopper-123',\n email: customerEmail,\n firstName: 'John',\n lastName: 'Doe',\n };\n },\n });\n\n const pazeButton = pxpSdk.create('paze-button', {\n buttonRenderMode: 'dynamic',\n emailAddress: customerEmail,\n phoneNumber: '15551234567',\n billingPreference: 'ALL',\n acceptedPaymentCardNetworks: ['VISA', 'MASTERCARD'],\n performAVS: true,\n style: {\n color: 'pazeblue',\n shape: 'pill',\n label: 'check out with'\n },\n onInit: () => {\n console.log('Paze component initialised');\n },\n onPresentmentResolved: (isVisible) => {\n console.log('Paze button visible:', isVisible);\n if (!isVisible) {\n console.log('Shopper not eligible for Paze');\n }\n },\n onPazeButtonClicked: () => {\n console.log('Paze button clicked');\n trackEvent('paze_button_clicked');\n },\n onCheckoutComplete: async (result) => {\n console.log('Paze checkout complete');\n return true;\n },\n onCheckoutIncomplete: async (result) => {\n console.log('Paze checkout cancelled:', result.reason);\n },\n onPreDecryption: async () => true,\n onPostDecryption: async (decryptedPayload) => {\n console.log('Token decrypted:', decryptedPayload.fundingData.cardNetwork);\n },\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 onPostAuthorisation: async (data) => {\n if (data.state === 'Authorised') {\n const verified = await fetch('/api/verify-payment', {\n method: 'POST',\n body: JSON.stringify({\n systemTransactionId: data.systemTransactionId,\n merchantTransactionId: data.merchantTransactionId\n })\n }).then(r => r.json());\n \n if (verified.success) {\n window.location.href = `/success?orderId=${verified.orderId}`;\n }\n } else {\n console.error('Payment not authorised:', data.state);\n }\n },\n onSubmitError: async (submitError) => {\n console.error('Payment submission error:', submitError);\n },\n onError: (error) => {\n console.error('Paze error:', error);\n }\n });\n\n pazeButton.mount('paze-container');\n\n return () => {\n pazeButton.unmount();\n };\n }, [sessionData, customerEmail]);\n\n return (\n
\n

Checkout with Paze

\n
\n \n setCustomerEmail(e.target.value)}\n placeholder=\"customer@example.com\"\n />\n
\n
\n
\n );\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":30},"children":["What's next?"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you've integrated Paze, here are some recommended next steps:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/configuration"},"children":["Configuration"]},":"]}," Learn how to customise the Paze button and behaviour."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/events"},"children":["Events"]},":"]}," Explore all available callbacks and event handling."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paze/analytics"},"children":["Analytics"]},":"]}," Track Paze payment metrics and performance."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/get-started/about-webhooks"},"children":["Configure webhooks"]},":"]}," Set up server-side webhook handling for reliable payment verification."]}]}]},"headings":[{"value":"Implementation","id":"implementation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Browser and device compatibility","id":"browser-and-device-compatibility","depth":3},{"value":"Supported browsers","id":"supported-browsers","depth":4},{"value":"Device requirements","id":"device-requirements","depth":4},{"value":"Configuration requirements","id":"configuration-requirements","depth":4},{"value":"Step 1: Install the Web SDK library","id":"step-1-install-the-web-sdk-library","depth":2},{"value":"Step 2: Create a session on your backend","id":"step-2-create-a-session-on-your-backend","depth":2},{"value":"Understanding HMAC authentication","id":"understanding-hmac-authentication","depth":3},{"value":"Create an HMAC signature","id":"create-an-hmac-signature","depth":3},{"value":"Session request parameters","id":"session-request-parameters","depth":3},{"value":"Prepare and send your request","id":"prepare-and-send-your-request","depth":3},{"value":"Session response","id":"session-response","depth":3},{"value":"Step 3: Initialise the SDK on your frontend","id":"step-3-initialise-the-sdk-on-your-frontend","depth":2},{"value":"Step 4: Create and configure the Paze button","id":"step-4-create-and-configure-the-paze-button","depth":2},{"value":"Configuration options","id":"configuration-options","depth":3},{"value":"Step 5: Mount the button to your page","id":"step-5-mount-the-button-to-your-page","depth":2},{"value":"Step 6: Unmount the component","id":"step-6-unmount-the-component","depth":2},{"value":"Step 7: Handle callbacks","id":"step-7-handle-callbacks","depth":2},{"value":"Step 8: Backend verification (critical)","id":"step-8-backend-verification-critical","depth":2},{"value":"Understanding the Paze payment flow","id":"understanding-the-paze-payment-flow","depth":2},{"value":"Backend decryption","id":"backend-decryption","depth":2},{"value":"1. Configure the frontend","id":"1-configure-the-frontend","depth":3},{"value":"2. Decrypt the secured payload","id":"2-decrypt-the-secured-payload","depth":3},{"value":"3. Submit the scheme token transaction","id":"3-submit-the-scheme-token-transaction","depth":3},{"value":"Cryptogram and ECI handling","id":"cryptogram-and-eci-handling","depth":4},{"value":"Sample transaction request","id":"sample-transaction-request","depth":4},{"value":"Manual decryption example","id":"manual-decryption-example","depth":2},{"value":"Complete example","id":"complete-example","depth":2},{"value":"What's next?","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Implementation"}},"lastModified":"2026-07-02T09:47:45.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paze/implementation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}