{"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 Google Pay component into your application."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay component provides a fast, secure payment experience across devices and platforms. The component follows a simple three-step lifecycle:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Initialise:"]}," Configure the SDK with your session and transaction data."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create & mount:"]}," Build the Google Pay button with your configuration and render it to your page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Handle callbacks:"]}," Respond to payment success, errors, and other events."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically handles Google Pay authorization, tokenisation, and transaction processing."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Backend verification is mandatory. Always verify payments on your backend before fulfilling orders. Frontend callbacks can be manipulated by malicious users."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-start","__idx":2},"children":["Before you start"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use the Google Pay component, you first need to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Complete the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/onboarding"},"children":["Google Pay onboarding"]}," process in the Unity Portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure your website is served over HTTPS (required for Google Pay)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure your Google Pay merchant account and link it to the Unity Portal."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"browser-and-device-compatibility","__idx":3},"children":["Browser and device compatibility"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Google Pay for Web has specific requirements for optimal functionality."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-browsers","__idx":4},"children":["Supported browsers"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Chrome 61+ on all platforms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari 12.1+ on macOS and iOS"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Firefox 62+ on all platforms"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Edge 79+ 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 5.0 (Lollipop) or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["iOS devices: iOS 12.1 or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: Windows 7+, macOS 10.11+, 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 supported payment method saved in their Google account"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["For biometric authentication, the device must support fingerprint or face recognition"]}]},{"$$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 Google Pay component is part of the main SDK package. Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," directly from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@pxpio/web-components-sdk"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-get-your-api-credentials","__idx":8},"children":["Step 2: Get your API credentials"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In order to initialise Components for Web, you'll need to send authenticated requests to the PXP API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To get your credentials:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.pxp.io","target":"_blank"},"children":["Unity Portal"]},", go to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Merchant setup > Merchant groups"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select a merchant group."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Inbound calls"]}," tab."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Copy the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Client ID"]}," in the top-right corner."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["New token"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose a number of days before token expiry. For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["30"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save"]}," to confirm. Your token is now created."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Copy the token ID and token value. Make sure to keep these confidential to protect the integrity of your authentication process."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As best practice, we recommend regularly generating and implementing new tokens."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-create-a-session-on-your-backend","__idx":9},"children":["Step 3: Create a session on your backend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay component requires a session from the PXP Sessions API. This must be done on your backend using HMAC authentication to keep your credentials secure."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed HMAC authentication instructions, see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/implementation#step-3-create-a-session-on-your-backend"},"children":["card implementation guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-request-example","__idx":10},"children":["Session request example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"merchant\": \"MERCHANT-1\",\n \"site\": \"SITE-1\",\n \"sessionTimeout\": 120,\n \"merchantTransactionId\": \"txn-123\",\n \"transactionMethod\": {\n \"intent\": {\n \"card\": \"Authorisation\"\n }\n },\n \"amounts\": {\n \"currencyCode\": \"USD\",\n \"transactionValue\": 25.00\n },\n \"allowTransaction\": true\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"session-response","__idx":11},"children":["Session response"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The session response will include Google Pay configuration if it's enabled for your site:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"sessionId\": \"c5f0799b-0839-43ce-abc5-5b462a98f250\",\n \"hmacKey\": \"904bc42395d4af634e2fd48ee8c2c7f52955a1da97a3aa3d82957ff12980a7bb\",\n \"encryptionKey\": \"20d175a669ad3f8c195c9c283fc86155\",\n \"sessionExpiry\": \"2025-05-19T13:39:20.3843454Z\",\n \"allowedFundingTypes\": {\n \"cardSchemes\": [\"Visa\", \"Mastercard\", \"AmericanExpress\"],\n \"cards\": [],\n \"wallets\": {\n \"googlePay\": {\n \"merchantId\": \"BCR2DN4TWWPKJ45P\",\n \"merchantName\": \"Your Store Name\",\n \"gatewayMerchantId\": \"gateway-merchant-id\"\n }\n }\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay configuration is automatically included in the session response when Google Pay is configured for your site in the Unity Portal."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-initialise-the-sdk-on-your-frontend","__idx":12},"children":["Step 4: Initialise the SDK on your frontend"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Import ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout"]}," from the SDK and initialise with your configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\n\n// Get session data from your backend\nconst sessionData = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' }\n}).then(response => response.json());\n\n// Initialise the SDK\nconst pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MERCHANT-1',\n ownerType: 'MerchantGroup',\n transactionData: {\n currency: 'USD',\n amount: 25,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation\n },\n merchantTransactionId: crypto.randomUUID(),\n merchantTransactionDate: () => new Date().toISOString()\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n onGetShopper: () => Promise.resolve({ \n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe'\n })\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5-create-and-configure-the-google-pay-button","__idx":13},"children":["Step 5: Create and configure the Google Pay button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the SDK's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["create()"]}," method to build the Google Pay button with your desired configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n style: {\n type: 'buy',\n color: 'black',\n },\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],\n },\n }],\n transactionInfo: {\n currencyCode: 'USD',\n countryCode: 'US',\n transactionId: sessionData.merchantTransactionId,\n totalPriceStatus: 'FINAL',\n totalPrice: '25',\n displayItems: [\n {\n label: 'Total',\n type: 'LINE_ITEM',\n price: '25',\n status: 'FINAL'\n }\n ],\n totalPriceLabel: 'Total',\n checkoutOption: 'DEFAULT'\n },\n },\n onPreAuthorisation: async () => {\n return {};\n },\n onPostAuthorisation: (data: any) => {\n // CRITICAL: Verify on backend before fulfilling order\n await verifyPaymentOnBackend(data);\n },\n onError: (error: any) => {\n console.error('Google Pay failed:', error);\n },\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-options","__idx":14},"children":["Configuration options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button styling options."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.type"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button label type. Possible values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'buy'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'plain'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'checkout'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'order'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'pay'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'subscribe'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'donate'"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button colour. Possible values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'black'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'white'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest"]},{"$$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":["Google Pay payment data request configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.allowedPaymentMethods"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of allowed payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.allowedPaymentMethods[].type"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment method type (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'CARD'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.allowedPaymentMethods[].parameters"]},{"$$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":["Payment method parameters."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.allowedPaymentMethods[].parameters.allowedCardNetworks"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported card networks (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['VISA', 'MASTERCARD', 'AMEX']"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.allowedPaymentMethods[].parameters.allowedAuthMethods"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Allowed authentication methods (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["['PAN_ONLY', 'CRYPTOGRAM_3DS']"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo"]},{"$$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":["Transaction information."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.currencyCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Currency code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'USD'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.countryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Country code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'US'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.transactionId"]},{"$$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":["Unique transaction identifier."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.totalPriceStatus"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Total price status (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'FINAL'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.totalPrice"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Total price as a string."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.displayItems"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["array"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of line items to display."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.totalPriceLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label for total price."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest.transactionInfo.checkoutOption"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Checkout option (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'DEFAULT'"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired before authorisation. Return an empty object ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{}"]}," to proceed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired when payment succeeds."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["function"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback fired when an error occurs."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-6-mount-the-button-to-your-page","__idx":15},"children":["Step 6: Mount the button to your page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a container element to your page where the Google Pay button will be rendered:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Then call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount()"]}," method to render the button:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"googlePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-7-unmount-the-component","__idx":16},"children":["Step 7: Unmount the component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When your component unmounts (e.g., when navigating away or cleaning up), call the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}," method:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"return () => {\n googlePayButton.unmount();\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-8-handle-callbacks","__idx":17},"children":["Step 8: Handle callbacks"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"ongetshopper-callback","__idx":18},"children":["onGetShopper callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns shopper information for transaction processing."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onGetShopper: () => Promise.resolve({ \n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe',\n phoneNumber: '+1-555-0123'\n})\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onpostauthorisation-callback","__idx":19},"children":["onPostAuthorisation callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fires when payment succeeds. ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CRITICAL: Always verify on your backend before fulfilling orders."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onPostAuthorisation: async (data) => {\n // Verify payment on backend\n const verified = await fetch('/api/verify-payment', {\n method: 'POST',\n body: JSON.stringify({\n systemTransactionId: data.systemTransactionId,\n merchantTransactionId: data.merchantTransactionId\n })\n }).then(r => r.json());\n \n if (verified.success) {\n globalThis.location.href = `/success?orderId=${verified.orderId}`;\n }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Never trust frontend callbacks for order fulfillment. Always verify payments on your backend using webhooks or the Query Transaction API before fulfilling orders."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-9-backend-verification-critical","__idx":20},"children":["Step 9: Backend verification (CRITICAL)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontend callbacks can be manipulated by malicious users. You must verify all payments on your backend before fulfilling orders."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the same webhook and API verification patterns described in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/implementation#step-8-backend-verification-critical"},"children":["card implementation guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-example","__idx":21},"children":["Complete example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a complete example showing Google Pay integration in a React component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType } from '@pxpio/web-components-sdk';\nimport { useEffect, useState } from 'react';\n\nexport default function GooglePayPage() {\n const [sessionData, setSessionData] = useState(null);\n\n const createSession = async () => {\n const createdSession = await fetch('/api/sessions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n merchant: \"MERCHANT-1\",\n site: \"SITE-1\",\n sessionTimeout: 120,\n merchantTransactionId: crypto.randomUUID(),\n transactionMethod: {\n intent: {\n card: \"Authorisation\"\n }\n },\n amounts: {\n currencyCode: \"USD\",\n transactionValue: 25.00\n },\n allowTransaction: true\n })\n\n }).then((response) => response.json());\n setSessionData(createdSession);\n };\n\n useEffect(() => {\n createSession();\n }, []);\n\n useEffect(() => {\n if (!sessionData) {\n return;\n }\n\n const pxpSdk = PxpCheckout.initialize({\n environment: 'test',\n session: sessionData,\n ownerId: 'MECHANT_GROUP_1',\n ownerType: 'MerchantGroup',\n transactionData: {\n currency: 'USD',\n amount: 25,\n entryType: 'Ecom',\n intent: {\n card: IntentType.Authorisation,\n },\n merchantTransactionId: sessionData.merchantTransactionId,\n merchantTransactionDate: () => new Date().toISOString(),\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n onGetShopper: async () => {\n return {\n id: 'shopper-123',\n email: 'customer@example.com',\n firstName: 'John',\n lastName: 'Doe',\n };\n },\n });\n\n const googlePayButton = pxpSdk.create('google-pay-button', {\n style: {\n type: 'buy',\n color: 'black',\n },\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],\n },\n }],\n transactionInfo: {\n currencyCode: 'USD',\n countryCode: 'US',\n transactionId: sessionData.merchantTransactionId,\n totalPriceStatus: 'FINAL',\n totalPrice: '25',\n displayItems: [\n {\n label: 'Total',\n type: 'LINE_ITEM',\n price: '25',\n status: 'FINAL'\n }\n ],\n totalPriceLabel: 'Total',\n checkoutOption: 'DEFAULT'\n },\n },\n onPreAuthorisation: async () => {\n return {};\n },\n onPostAuthorisation: async (data: any) => {\n console.log('Google Pay transaction completed:', data.systemTransactionId, data.merchantTransactionId);\n // CRITICAL: Verify on backend before fulfilling order\n await verifyPaymentOnBackend(data);\n },\n onError: (error: any) => {\n console.error('Google Pay failed:', error);\n },\n });\n\n googlePayButton.mount('google-pay-container');\n\n return () => {\n googlePayButton.unmount();\n };\n }, [sessionData]);\n\n return (\n \n );\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"whats-next","__idx":22},"children":["What's next?"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you've integrated Google Pay, here are some recommended next steps:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/configuration"},"children":["Configuration"]},":"]}," Learn how to customise the Google Pay button and behavior."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/events"},"children":["Events"]},":"]}," Explore all available callbacks and event handling."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/troubleshooting"},"children":["Testing"]},":"]}," Use test cards and sandbox environment to test your integration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/get-started/about-webhooks"},"children":["Configure webhooks"]},":"]}," Set up server-side webhook handling for reliable payment verification."]}]}]},"headings":[{"value":"Implementation","id":"implementation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Browser and device compatibility","id":"browser-and-device-compatibility","depth":3},{"value":"Supported browsers","id":"supported-browsers","depth":4},{"value":"Device requirements","id":"device-requirements","depth":4},{"value":"Configuration requirements","id":"configuration-requirements","depth":4},{"value":"Step 1: Install the Web SDK library","id":"step-1-install-the-web-sdk-library","depth":2},{"value":"Step 2: Get your API credentials","id":"step-2-get-your-api-credentials","depth":2},{"value":"Step 3: Create a session on your backend","id":"step-3-create-a-session-on-your-backend","depth":2},{"value":"Session request example","id":"session-request-example","depth":3},{"value":"Session response","id":"session-response","depth":3},{"value":"Step 4: Initialise the SDK on your frontend","id":"step-4-initialise-the-sdk-on-your-frontend","depth":2},{"value":"Step 5: Create and configure the Google Pay button","id":"step-5-create-and-configure-the-google-pay-button","depth":2},{"value":"Configuration options","id":"configuration-options","depth":3},{"value":"Step 6: Mount the button to your page","id":"step-6-mount-the-button-to-your-page","depth":2},{"value":"Step 7: Unmount the component","id":"step-7-unmount-the-component","depth":2},{"value":"Step 8: Handle callbacks","id":"step-8-handle-callbacks","depth":2},{"value":"onGetShopper callback","id":"ongetshopper-callback","depth":3},{"value":"onPostAuthorisation callback","id":"onpostauthorisation-callback","depth":3},{"value":"Step 9: Backend verification (CRITICAL)","id":"step-9-backend-verification-critical","depth":2},{"value":"Complete example","id":"complete-example","depth":2},{"value":"What's next?","id":"whats-next","depth":2}],"frontmatter":{"seo":{"title":"Implementation"}},"lastModified":"2026-06-12T11:56:36.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/google-pay/implementation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}