{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details","required"]},"type":"markdown"},"seo":{"title":"Configuration","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"configuration","__idx":0},"children":["Configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure the Google Pay button component for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, the Google Pay button component requires the following configuration to function:"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK automatically configures ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenizationSpecification"]}," with the correct gateway and merchant ID from your session. You only need to provide ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowedPaymentMethods"]}," with the card parameters."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']\n }\n }],\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: '99.99'\n }\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","data-label":"Description"},"children":["Description "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["GooglePayPaymentDataRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The Google Pay payment request configuration containing payment methods and transaction details."]}]},{"$$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":["An array specifying the supported payment methods. At least one payment method is required."]}]},{"$$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":["The payment method type. This must be set to ",{"$$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":["Configuration for the payment method."]}]},{"$$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 of strings"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The supported card networks.",{"$$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":["VISA"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MASTERCARD"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AMEX"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DISCOVER"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["JCB"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["INTERAC"]}]}]}]}]},{"$$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 of strings"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The supported authentication methods.",{"$$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":["PAN_ONLY"]},": Unencrypted card details"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CRYPTOGRAM_3DS"]},": 3DS cryptogram authentication"]}]}]}]},{"$$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":["Details about the transaction, including the amount and currency."]}]},{"$$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":["The currency code, in ISO 4217 format (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["USD"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["GBP"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EUR"]},")."]}]},{"$$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":["The price finality status.",{"$$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":["FINAL"]},": Price is final"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ESTIMATED"]},": Price is estimated"]}]}]}]},{"$$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":["The total monetary value of the transaction as a string (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["99.99"]},")."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure additional settings and features:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n // Payment details\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],\n billingAddressRequired: true,\n billingAddressParameters: {\n format: 'FULL',\n phoneNumberRequired: true\n }\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'merchant-12345'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: '99.99',\n totalPriceLabel: 'Total',\n displayItems: [{\n label: 'Subtotal',\n type: 'SUBTOTAL',\n price: '89.99'\n }, {\n label: 'Tax',\n type: 'TAX',\n price: '10.00'\n }]\n },\n merchantInfo: {\n merchantName: 'Your store',\n merchantId: 'BCR2DN4TZ6...'\n },\n emailRequired: true,\n shippingAddressRequired: true,\n shippingAddressParameters: {\n allowedCountryCodes: ['US', 'GB'],\n phoneNumberRequired: true\n },\n shippingOptionRequired: true,\n shippingOptionParameters: {\n defaultSelectedOptionId: 'standard',\n shippingOptions: [{\n id: 'standard',\n label: 'Standard shipping (5-7 days)',\n description: 'Standard delivery',\n price: '5.99'\n }, {\n id: 'express',\n label: 'Express shipping (2-3 days)',\n description: 'Faster delivery',\n price: '12.99'\n }]\n }\n },\n\n // Button appearance\n style: {\n type: 'buy',\n color: 'default',\n height: '48px',\n width: '100%',\n borderRadius: 8,\n borderType: 'default_border',\n sizeMode: 'fill',\n locale: 'en-US'\n },\n\n // Payment options\n existingPaymentMethodRequired: false,\n collectCvc: 'default',\n\n // Consent component\n googlePayConsentComponent: consentInstance,\n onGetConsent: () => {\n return document.getElementById('consent-checkbox')?.checked || false;\n },\n\n // Event handlers\n onPreAuthorisation: async (data) => {\n return {\n riskScreeningData: {\n performRiskScreening: true,\n userIp: \"192.168.1.100\",\n account: {\n id: \"user_12345678\",\n creationDateTime: \"2024-01-15T10:30:00.000Z\"\n },\n fulfillments: [{\n type: \"Shipped\",\n recipientPerson: {\n phoneNumber: \"+1234567890\"\n }\n }]\n }\n };\n },\n\n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n window.location.href = '/success';\n }\n },\n\n onPaymentDataChanged: async (intermediatePaymentData) => {\n return {\n newTransactionInfo: {\n totalPriceStatus: 'FINAL',\n totalPrice: calculateTotal(intermediatePaymentData).toFixed(2)\n }\n };\n },\n\n onError: (error) => {\n console.error('Google Pay error:', error);\n showError(error.message);\n },\n\n onCancel: () => {\n console.log('Payment cancelled by user');\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentDataRequest"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["GooglePayPaymentDataRequest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The Google Pay payment request configuration including payment methods, transaction info, merchant info, and shipping options. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developers.google.com/pay/api/web/reference/request-objects"},"children":["Google Pay API reference"]},"."]}]},{"$$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":["GooglePayButtonStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button styling configuration including type, colour, dimensions, and locale. Defaults to standard styling."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["existingPaymentMethodRequired"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to require the user to have an existing payment method saved in their Google account. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["collectCvc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The CVC collection mode. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},".",{"$$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":["always"]},": Always collect CVC"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["never"]},": Never collect CVC"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},": Collect CVC when not using 3DS authentication"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvcVerificationPopupConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for CVC verification popup display. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{}"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["googlePayConsentComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["GooglePayConsentComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Consent component instance for payment token storage. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},". See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/recurring-payments"},"children":["Recurring payments"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Callback to check if user has given consent for token storage. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," if consented, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," otherwise."]}]},{"$$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":["(data) => Promise"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called before payment authorisation to provide additional transaction data."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result, paymentData) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called after payment authorisation completes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPaymentDataChanged"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["google.payments.api.PaymentDataChangedHandler"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for dynamic payment sheet updates. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#payment-sheet-interactions"},"children":["Payment sheet interactions"]}," below for detailed implementation guide."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGooglePaymentButtonClicked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(event) => Promise"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called when the Google Pay button is clicked."]}]},{"$$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":["Custom validation handler called before opening the payment sheet. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to block."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreRetrySoftDecline"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result) => boolean | object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Handler for retry logic after soft decline responses. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/3ds"},"children":["3D Secure"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(error) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called when an error occurs during the payment flow."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called when the user cancels the payment."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find Google's official rules around button styling in their ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developers.google.com/pay/api/web/guides/brand-guidelines"},"children":["Google Pay Brand Guidelines"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developers.google.com/pay/api/web/reference/request-objects"},"children":["API reference"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":5},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay button component renders with these default styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"style = {\n type: 'buy',\n color: 'default',\n height: '48px',\n width: '100%',\n borderRadius: 4,\n borderType: 'default_border',\n sizeMode: 'fill'\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override the default appearance by providing custom styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n paymentDataRequest: {\n // ... payment configuration\n },\n style: {\n type: 'checkout',\n color: 'black',\n height: '56px',\n width: '100%',\n borderRadius: 12,\n borderType: 'no_border',\n sizeMode: 'fill',\n locale: 'en-GB'\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["GooglePayButtonStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styling options for the Google Pay button appearance."]}]},{"$$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":["The button type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buy"]},".",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buy"]},": Standard purchase button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["book"]},": Booking button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout"]},": Checkout button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["donate"]},": Donation button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]},": Order button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pay"]},": Payment button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subscribe"]},": Subscription button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["plain"]},": Plain button without text"]}]}]}]},{"$$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":["The colour of the Google Pay button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]},".",{"$$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"]},": Adapts to user's system settings (light/dark mode)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["black"]},": Black background with white text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["white"]},": White background with black text"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.height"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button height (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["48px"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["56px"]},"). Minimum 40px, maximum 72px. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["48px"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The button width (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["240px"]},"). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border radius in pixels (0-24). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.borderType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border style. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default_border"]},".",{"$$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_border"]},": Standard border"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["no_border"]},": No border"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.sizeMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["How the button should size itself. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fill"]},".",{"$$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":["fill"]},": Button fills the container width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["static"]},": Button uses fixed width"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.locale"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The language/region code (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["en-US"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fr-FR"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ja-JP"]},"). Auto-detected from browser if not specified."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style.buttonRootNode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["HTMLDocument | ShadowRoot"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The DOM context for the button (for Shadow DOM use cases). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["document"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Google Pay has minimum and maximum size requirements to ensure button legibility and brand compliance. The minimum button height is 40px, and the maximum is 72px."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-size-recommendations","__idx":7},"children":["Button size recommendations"]},{"$$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":"Device"},"children":["Device"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Minimum height"},"children":["Minimum height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Recommended height"},"children":["Recommended height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Maximum height"},"children":["Maximum height"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["48px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["56px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["44px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["52px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["48px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["56px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["72px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"localisation","__idx":8},"children":["Localisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Google Pay automatically displays button text in the user's preferred language. You can override this by setting the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locale"]}," property:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"style: {\n type: 'buy',\n color: 'default',\n height: '48px',\n locale: 'fr-FR' // Force French language\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":9},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay button component provides event handlers to manage the complete payment flow:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const config = {\n paymentDataRequest: {\n // ... payment configuration\n },\n onGooglePaymentButtonClicked: async (event) => { },\n onPreAuthorisation: async (data) => { return null; },\n onPostAuthorisation: (result, paymentData) => { },\n onPaymentDataChanged: async (intermediatePaymentData) => { return {}; },\n onCustomValidation: async () => { return true; },\n onError: (error) => { },\n onCancel: () => { },\n onGetConsent: () => { return false; }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGooglePaymentButtonClicked: ((event: Event) => Promise)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the Google Pay button is clicked. Called before the payment sheet opens."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreAuthorisation: ((data: PreAuthorizationData \\| null) => Promise)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler called before authorisation to provide additional transaction data like 3DS or risk screening."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostAuthorisation: ((submitResult: BaseSubmitResult \\| null, paymentData: AuthorisationPaymentData) => void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the payment authorisation completes. Receives transaction result and payment data."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPaymentDataChanged: (google.payments.api.PaymentDataChangedHandler)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for dynamic updates to the payment sheet (shipping, pricing). See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#payment-sheet-interactions"},"children":["Payment sheet interactions"]}," below."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCustomValidation: (() => Promise)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom validation handler called before opening payment sheet. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError: ((error: BaseSdkException) => void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when an error prevents the payment from proceeding."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel: (() => void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the user cancels the payment flow."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent: (() => boolean)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler to get user consent status for payment token storage. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," if user consents."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreRetrySoftDecline: ((result: BaseSubmitResult) => boolean \\| object)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Handler for retry logic after soft decline. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to retry or an object with retry settings."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed information about event data structures and usage patterns, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"payment-sheet-interactions","__idx":10},"children":["Payment sheet interactions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"overview","__idx":11},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Google Pay's payment sheet supports dynamic interactions that allow you to provide real-time updates based on user selections. This creates a seamless, interactive checkout experience where shipping costs, taxes, and totals update automatically as customers make choices within the payment sheet."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment sheet interactions enable you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Calculate shipping costs dynamically"]}," based on the customer's selected address"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Update transaction amounts"]}," in real-time without page reloads"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Validate addresses"]}," and show errors for unserviceable locations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Offer multiple shipping options"]}," with different costs and delivery times"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Apply discounts or offers"]}," based on customer selections"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Collect email addresses"]}," for order confirmations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request billing addresses"]}," for payment verification"]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment sheet interactions provide a native app-like experience whilst keeping customers within the Google Pay flow, significantly reducing checkout friction and cart abandonment."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enabling-payment-sheet-interactions","__idx":12},"children":["Enabling payment sheet interactions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable dynamic interactions, configure callback intents in your payment request:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayConfig = {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'your-merchant-id'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'GBP',\n totalPriceStatus: 'FINAL',\n totalPrice: '50.00',\n displayItems: [\n {\n label: 'Subtotal',\n type: 'LINE_ITEM',\n price: '45.00'\n },\n {\n label: 'Estimated Tax',\n type: 'TAX',\n price: '5.00'\n }\n ]\n },\n \n // Enable callbacks for dynamic updates\n callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION'],\n \n // Request shipping information\n shippingAddressRequired: true,\n shippingOptionRequired: true\n },\n \n // Handle payment data changes\n onPaymentDataChanged: async (intermediatePaymentData) => {\n // Dynamic update logic here\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"callback-intents","__idx":13},"children":["Callback intents"]},{"$$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":"Intent"},"children":["Intent"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"When to use"},"children":["When to use"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SHIPPING_ADDRESS"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when shipping address changes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Calculate shipping costs and taxes based on location"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SHIPPING_OPTION"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when shipping option changes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Update totals based on selected shipping method"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["OFFER"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when offer/promo code changes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apply or validate promotional offers"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PAYMENT_AUTHORIZATION"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called before final authorisation"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Perform final validation before payment"]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PAYMENT_AUTHORIZATION"]}," callback intent is automatically added by the SDK when using payment sheet interactions. You only need to specify ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SHIPPING_ADDRESS"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SHIPPING_OPTION"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["OFFER"]}," as needed."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"shipping-address-interactions","__idx":14},"children":["Shipping address interactions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"collecting-shipping-addresses","__idx":15},"children":["Collecting shipping addresses"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Request shipping addresses by configuring the payment request:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayConfig = {\n paymentDataRequest: {\n // ... other configuration\n \n // Enable shipping address collection\n shippingAddressRequired: true,\n \n // Configure shipping address parameters\n shippingAddressParameters: {\n allowedCountryCodes: ['GB', 'FR', 'DE', 'US'], // Restrict to specific countries\n phoneNumberRequired: true // Request phone number\n },\n \n // Enable callback for address changes\n callbackIntents: ['SHIPPING_ADDRESS']\n },\n \n onPaymentDataChanged: async (intermediatePaymentData) => {\n const address = intermediatePaymentData.shippingAddress;\n \n if (address) {\n // Calculate shipping and update totals\n return await handleShippingAddressChange(address);\n }\n \n return {};\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"handling-address-changes","__idx":16},"children":["Handling address changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Respond to address changes with updated pricing and shipping options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"async function handleShippingAddressChange(address) {\n console.log('Shipping address changed:', {\n countryCode: address.countryCode,\n postalCode: address.postalCode,\n administrativeArea: address.administrativeArea\n });\n \n try {\n // 1. Validate the address\n const isValid = await validateShippingAddress(address);\n if (!isValid) {\n return {\n error: {\n reason: 'SHIPPING_ADDRESS_INVALID',\n message: 'Please enter a complete address',\n intent: 'SHIPPING_ADDRESS'\n }\n };\n }\n \n // 2. Check if we ship to this location\n const canShip = await checkShippingAvailability(address.countryCode);\n if (!canShip) {\n return {\n error: {\n reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',\n message: `We do not currently ship to ${address.countryCode}`,\n intent: 'SHIPPING_ADDRESS'\n }\n };\n }\n \n // 3. Calculate shipping cost\n const shippingCost = await calculateShipping(address);\n \n // 4. Calculate tax\n const subtotal = 45.00;\n const tax = await calculateTax(address, subtotal);\n \n // 5. Calculate new total\n const newTotal = subtotal + tax + shippingCost;\n \n // 6. Update SDK amount (synchronise with backend)\n pxpSdk.updateAmount(newTotal);\n \n // 7. Return updated transaction info\n return {\n newTransactionInfo: {\n totalPriceStatus: 'FINAL',\n totalPrice: newTotal.toFixed(2),\n totalPriceLabel: 'Total',\n displayItems: [\n {\n label: 'Subtotal',\n type: 'LINE_ITEM',\n price: subtotal.toFixed(2),\n status: 'FINAL'\n },\n {\n label: 'Shipping',\n type: 'LINE_ITEM',\n price: shippingCost.toFixed(2),\n status: 'FINAL'\n },\n {\n label: 'Tax',\n type: 'TAX',\n price: tax.toFixed(2),\n status: 'FINAL'\n }\n ]\n }\n };\n \n } catch (error) {\n console.error('Error handling address change:', error);\n return {\n error: {\n reason: 'SHIPPING_ADDRESS_INVALID',\n message: 'Unable to calculate shipping. Please try again.',\n intent: 'SHIPPING_ADDRESS'\n }\n };\n }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"address-validation-examples","__idx":17},"children":["Address validation examples"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Validate address completeness\nfunction validateShippingAddress(address) {\n const requiredFields = ['countryCode', 'postalCode', 'administrativeArea'];\n \n for (const field of requiredFields) {\n if (!address[field]) {\n console.error(`Missing required field: ${field}`);\n return false;\n }\n }\n \n // Validate postal code format\n if (address.countryCode === 'GB') {\n const ukPostcodeRegex = /^[A-Z]{1,2}\\d{1,2}[A-Z]?\\s?\\d[A-Z]{2}$/i;\n if (!ukPostcodeRegex.test(address.postalCode)) {\n console.error('Invalid UK postcode format');\n return false;\n }\n }\n \n return true;\n}\n\n// Check shipping availability\nasync function checkShippingAvailability(countryCode) {\n const shippableCountries = ['GB', 'US', 'CA', 'FR', 'DE', 'ES', 'IT'];\n return shippableCountries.includes(countryCode);\n}\n\n// Calculate shipping based on location\nasync function calculateShipping(address) {\n const shippingRates = {\n 'GB': 4.99,\n 'US': 9.99,\n 'CA': 12.99,\n 'FR': 8.99,\n 'DE': 8.99,\n 'ES': 8.99,\n 'IT': 8.99\n };\n \n return shippingRates[address.countryCode] || 15.99; // Default international rate\n}\n\n// Calculate tax based on location\nasync function calculateTax(address, subtotal) {\n const taxRates = {\n 'GB': 0.20, // 20% VAT\n 'US': 0.08, // Example sales tax\n 'CA': 0.13, // Example HST\n 'FR': 0.20, // 20% TVA\n 'DE': 0.19 // 19% MwSt\n };\n \n const rate = taxRates[address.countryCode] || 0;\n return subtotal * rate;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"shipping-option-interactions","__idx":18},"children":["Shipping option interactions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"configuring-shipping-options","__idx":19},"children":["Configuring shipping options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide multiple shipping methods for customers to choose from:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayConfig = {\n paymentDataRequest: {\n // ... other configuration\n \n // Enable shipping option selection\n shippingOptionRequired: true,\n \n // Configure available shipping options\n shippingOptionParameters: {\n defaultSelectedOptionId: 'standard', // Pre-select an option\n shippingOptions: [\n {\n id: 'standard',\n label: 'Standard Delivery',\n description: '5-7 business days'\n },\n {\n id: 'express',\n label: 'Express Delivery',\n description: '2-3 business days'\n },\n {\n id: 'next-day',\n label: 'Next Day Delivery',\n description: 'Order by 6pm for next day'\n }\n ]\n },\n \n // Enable callback for option changes\n callbackIntents: ['SHIPPING_OPTION']\n },\n \n onPaymentDataChanged: async (intermediatePaymentData) => {\n const shippingOption = intermediatePaymentData.shippingOptionData;\n \n if (shippingOption) {\n return await handleShippingOptionChange(shippingOption);\n }\n \n return {};\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"handling-shipping-option-changes","__idx":20},"children":["Handling shipping option changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Update pricing when the customer selects a different shipping method:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"async function handleShippingOptionChange(shippingOption) {\n console.log('Shipping option changed:', shippingOption.id);\n \n // Define shipping costs\n const shippingCosts = {\n 'standard': 4.99,\n 'express': 9.99,\n 'next-day': 14.99\n };\n \n const subtotal = 45.00;\n const tax = 9.00;\n const shippingCost = shippingCosts[shippingOption.id] || 4.99;\n \n // Calculate new total\n const newTotal = subtotal + tax + shippingCost;\n \n // Update SDK amount\n pxpSdk.updateAmount(newTotal);\n \n // Track shipping method selection\n trackEvent('shipping-option-selected', {\n optionId: shippingOption.id,\n cost: shippingCost\n });\n \n return {\n newTransactionInfo: {\n totalPriceStatus: 'FINAL',\n totalPrice: newTotal.toFixed(2),\n totalPriceLabel: 'Total',\n displayItems: [\n {\n label: 'Subtotal',\n type: 'LINE_ITEM',\n price: subtotal.toFixed(2)\n },\n {\n label: shippingOption.label,\n type: 'LINE_ITEM',\n price: shippingCost.toFixed(2)\n },\n {\n label: 'Tax',\n type: 'TAX',\n price: tax.toFixed(2)\n }\n ]\n }\n };\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"email-collection","__idx":21},"children":["Email collection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Request the customer's email address for order confirmations:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayConfig = {\n paymentDataRequest: {\n // ... other configuration\n \n // Request email address\n emailRequired: true\n },\n \n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n // Access email from payment data\n const customerEmail = paymentData.Email;\n \n // Send confirmation email\n sendOrderConfirmation(customerEmail, {\n orderId: result.merchantTransactionId,\n systemTransactionId: result.systemTransactionId\n });\n }\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"billing-address-collection","__idx":22},"children":["Billing address collection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Request billing address for verification:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayConfig = {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],\n \n // Request billing address\n billingAddressRequired: true,\n billingAddressParameters: {\n format: 'FULL', // or 'MIN' for minimal details\n phoneNumberRequired: false\n }\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'your-merchant-id'\n }\n }\n }],\n // ... rest of configuration\n }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"billing-address-formats","__idx":23},"children":["Billing address formats"]},{"$$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":"Format"},"children":["Format"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Fields included"},"children":["Fields included"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MIN"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Name, country code, postal code"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FULL"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Full billing address with street, city, state, postal code, country"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-interaction-example","__idx":24},"children":["Complete interaction example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a comprehensive example with all interaction types:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],\n billingAddressRequired: true,\n billingAddressParameters: {\n format: 'FULL',\n phoneNumberRequired: true\n }\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'merchant-12345'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'GBP',\n countryCode: 'GB',\n totalPriceStatus: 'FINAL',\n totalPrice: '45.00',\n totalPriceLabel: 'Total',\n displayItems: [\n {\n label: 'Wireless Headphones',\n type: 'LINE_ITEM',\n price: '39.99',\n status: 'FINAL'\n },\n {\n label: 'Estimated Tax',\n type: 'TAX',\n price: '5.01',\n status: 'PENDING'\n }\n ]\n },\n \n // Enable all interactions\n callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION'],\n \n // Email collection\n emailRequired: true,\n \n // Shipping address collection\n shippingAddressRequired: true,\n shippingAddressParameters: {\n allowedCountryCodes: ['GB', 'FR', 'DE', 'ES', 'IT', 'NL', 'BE'],\n phoneNumberRequired: true\n },\n \n // Shipping options\n shippingOptionRequired: true,\n shippingOptionParameters: {\n defaultSelectedOptionId: 'standard',\n shippingOptions: [\n {\n id: 'standard',\n label: 'Standard Delivery',\n description: '5-7 business days'\n },\n {\n id: 'express',\n label: 'Express Delivery',\n description: '2-3 business days'\n }\n ]\n }\n },\n \n // Handle dynamic updates\n onPaymentDataChanged: async (intermediatePaymentData) => {\n console.log('Payment data changed:', {\n callbackTrigger: intermediatePaymentData.callbackTrigger,\n hasShippingAddress: !!intermediatePaymentData.shippingAddress,\n hasShippingOption: !!intermediatePaymentData.shippingOptionData\n });\n \n try {\n const subtotal = 39.99;\n let shippingCost = 0;\n let tax = 0;\n let error = null;\n \n // Handle shipping address change\n if (intermediatePaymentData.shippingAddress) {\n const address = intermediatePaymentData.shippingAddress;\n \n // Validate address\n if (!address.postalCode || !address.countryCode) {\n error = {\n reason: 'SHIPPING_ADDRESS_INVALID',\n message: 'Please enter a complete address',\n intent: 'SHIPPING_ADDRESS'\n };\n }\n // Check if we ship to this country\n else if (!['GB', 'FR', 'DE', 'ES', 'IT', 'NL', 'BE'].includes(address.countryCode)) {\n error = {\n reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',\n message: `We do not ship to ${address.countryCode}`,\n intent: 'SHIPPING_ADDRESS'\n };\n }\n // Calculate shipping and tax\n else {\n const shippingRates = {\n 'GB': 4.99,\n 'FR': 8.99,\n 'DE': 8.99,\n 'ES': 8.99,\n 'IT': 8.99,\n 'NL': 8.99,\n 'BE': 8.99\n };\n shippingCost = shippingRates[address.countryCode] || 4.99;\n \n // Calculate tax\n const taxRates = {\n 'GB': 0.20,\n 'FR': 0.20,\n 'DE': 0.19,\n 'ES': 0.21,\n 'IT': 0.22,\n 'NL': 0.21,\n 'BE': 0.21\n };\n tax = subtotal * (taxRates[address.countryCode] || 0.20);\n }\n }\n \n // Handle shipping option change\n if (intermediatePaymentData.shippingOptionData) {\n const optionId = intermediatePaymentData.shippingOptionData.id;\n const shippingCosts = {\n 'standard': 4.99,\n 'express': 9.99\n };\n shippingCost = shippingCosts[optionId] || 4.99;\n }\n \n // Calculate new total\n const newTotal = subtotal + tax + shippingCost;\n \n // Update SDK amount\n pxpSdk.updateAmount(newTotal);\n \n // Return updated payment data\n const response = {\n newTransactionInfo: {\n totalPriceStatus: 'FINAL',\n totalPrice: newTotal.toFixed(2),\n totalPriceLabel: 'Total',\n displayItems: [\n {\n label: 'Wireless Headphones',\n type: 'LINE_ITEM',\n price: subtotal.toFixed(2),\n status: 'FINAL'\n },\n {\n label: 'Shipping',\n type: 'LINE_ITEM',\n price: shippingCost.toFixed(2),\n status: 'FINAL'\n },\n {\n label: 'VAT',\n type: 'TAX',\n price: tax.toFixed(2),\n status: 'FINAL'\n }\n ]\n }\n };\n \n // Add error if present\n if (error) {\n response.error = error;\n }\n \n return response;\n \n } catch (error) {\n console.error('Error in onPaymentDataChanged:', error);\n return {\n error: {\n reason: 'OTHER_ERROR',\n message: 'An error occurred. Please try again.',\n intent: 'SHIPPING_ADDRESS'\n }\n };\n }\n },\n \n // Handle successful payment\n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n console.log('Payment successful with collected data:', {\n email: paymentData.Email,\n shippingAddress: paymentData.ShippingAddress,\n shippingOption: paymentData.ShippingOption\n });\n \n // Send confirmation email\n sendOrderConfirmation(paymentData.Email, {\n orderId: result.merchantTransactionId,\n systemTransactionId: result.systemTransactionId,\n shippingAddress: paymentData.ShippingAddress\n });\n \n window.location.href = '/order-confirmation';\n }\n }\n});\n\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":25},"children":["Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay button component provides methods for lifecycle management."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount","__idx":26},"children":["mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the Google Pay button in the specified container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', config);\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":27},"children":["unmount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the Google Pay button from the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"googlePayButton.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For complete lifecycle management details, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/implementation"},"children":["Implementation"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":28},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-checkout-button","__idx":29},"children":["Basic checkout button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation with essential configuration and error handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n // Payment configuration\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'merchant-12345'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: '29.99',\n totalPriceLabel: 'Total'\n }\n },\n\n // Essential event handlers\n onGooglePaymentButtonClicked: async (event) => {\n console.log('Google Pay button clicked');\n trackEvent('google_pay_clicked');\n },\n\n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n console.log('Payment successful:', result.merchantTransactionId);\n window.location.href = '/order-confirmation';\n } else if (result && 'errorCode' in result) {\n console.error('Payment failed:', result.errorReason);\n showError('Payment failed. Please try again.');\n }\n },\n\n onError: (error) => {\n console.error('Google Pay error:', error);\n showError('Payment error. Please try again.');\n },\n\n onCancel: () => {\n console.log('Payment cancelled');\n showMessage('Payment was cancelled.');\n }\n});\n\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styled-button","__idx":30},"children":["Custom styled button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation with custom styling for brand consistency:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD'],\n allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'merchant-12345'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'GBP',\n totalPriceStatus: 'FINAL',\n totalPrice: '49.99'\n }\n },\n\n // Custom styling\n style: {\n type: 'checkout',\n color: 'black',\n height: '56px',\n width: '100%',\n borderRadius: 12,\n borderType: 'no_border',\n sizeMode: 'fill',\n locale: 'en-GB'\n },\n\n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n navigateToSuccess(result.merchantTransactionId);\n } else if (result && 'errorCode' in result) {\n handlePaymentError(result.errorReason);\n }\n }\n});\n\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-payment-with-full-features","__idx":31},"children":["Enterprise payment with full features"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive implementation with dynamic pricing, shipping, and complete event handling:"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For detailed implementation of shipping address handling and dynamic pricing logic, see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#payment-sheet-interactions"},"children":["Payment sheet interactions"]}," section above."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n // Payment details with shipping\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],\n allowedAuthMethods: ['CRYPTOGRAM_3DS'],\n billingAddressRequired: true,\n billingAddressParameters: {\n format: 'FULL',\n phoneNumberRequired: true\n }\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'enterprise-merchant-789'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: '129.99',\n displayItems: [{\n label: 'Subtotal',\n type: 'SUBTOTAL',\n price: '119.99'\n }, {\n label: 'Shipping',\n type: 'LINE_ITEM',\n price: '10.00'\n }]\n },\n merchantInfo: {\n merchantName: 'Enterprise Store',\n merchantId: 'BCR2DN4TZ6...'\n },\n emailRequired: true,\n shippingAddressRequired: true,\n shippingAddressParameters: {\n allowedCountryCodes: ['US', 'GB', 'CA'],\n phoneNumberRequired: true\n },\n shippingOptionRequired: true,\n shippingOptionParameters: {\n defaultSelectedOptionId: 'standard',\n shippingOptions: [{\n id: 'standard',\n label: 'Standard Shipping (5-7 days)',\n description: 'Standard delivery',\n price: '5.99'\n }, {\n id: 'express',\n label: 'Express Shipping (2-3 days)',\n description: 'Faster delivery',\n price: '12.99'\n }]\n }\n },\n\n // Custom styling\n style: {\n type: 'buy',\n color: 'default',\n height: '52px',\n width: '100%',\n borderRadius: 8,\n sizeMode: 'fill'\n },\n\n // Pre-authorisation with transaction data\n onPreAuthorisation: async (data) => {\n console.log('Preparing transaction...');\n \n return {\n riskScreeningData: {\n performRiskScreening: true,\n excludeDeviceData: false,\n userIp: \"192.168.1.100\",\n account: {\n id: \"user_12345678\",\n creationDateTime: \"2024-01-15T10:30:00.000Z\"\n },\n items: [{\n price: 119.99,\n quantity: 1,\n category: 'electronics',\n sku: 'PROD-001'\n }],\n fulfillments: [{\n type: \"Shipped\",\n shipping: {\n shippingMethod: \"Express\"\n },\n recipientPerson: {\n phoneNumber: \"+1234567890\",\n email: \"customer@example.com\"\n }\n }]\n },\n psd2Data: {\n scaExemption: 'LowValue'\n }\n };\n },\n\n // Dynamic payment sheet updates\n onPaymentDataChanged: async (intermediatePaymentData) => {\n const intent = intermediatePaymentData.callbackTrigger;\n \n if (intent === 'SHIPPING_OPTION') {\n const shippingOptionId = intermediatePaymentData.shippingOptionData?.id;\n const shippingCost = shippingOptionId === 'express' ? 12.99 : 5.99;\n const subtotal = 119.99;\n const total = (subtotal + shippingCost).toFixed(2);\n \n return {\n newTransactionInfo: {\n totalPriceStatus: 'FINAL',\n totalPrice: total,\n displayItems: [{\n label: 'Subtotal',\n type: 'SUBTOTAL',\n price: subtotal.toFixed(2)\n }, {\n label: 'Shipping',\n type: 'LINE_ITEM',\n price: shippingCost.toFixed(2)\n }]\n }\n };\n }\n \n if (intent === 'SHIPPING_ADDRESS') {\n const country = intermediatePaymentData.shippingAddress?.countryCode;\n \n // Validate shipping country\n if (!['US', 'GB', 'CA'].includes(country)) {\n return {\n error: {\n reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',\n message: 'We do not ship to this country',\n intent: 'SHIPPING_ADDRESS'\n }\n };\n }\n }\n \n return {};\n },\n\n // Complete event handling\n onGooglePaymentButtonClicked: async (event) => {\n console.log('Google Pay button clicked');\n trackAnalyticsEvent('google_pay_clicked', {\n amount: 129.99,\n currency: 'USD'\n });\n },\n\n onPostAuthorisation: (result, paymentData) => {\n console.log('Payment completed:', result);\n \n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n const orderId = result.merchantTransactionId;\n const email = paymentData.Email;\n const shippingAddress = paymentData.ShippingAddress;\n \n trackAnalyticsEvent('purchase_success', {\n orderId,\n amount: 129.99,\n currency: 'USD'\n });\n \n // Create order with shipping details\n createOrder({\n orderId,\n email,\n shippingAddress,\n amount: 129.99\n });\n \n showSuccessMessage('Payment successful!');\n setTimeout(() => {\n window.location.href = `/order-confirmation?id=${orderId}`;\n }, 2000);\n } else {\n console.error('Payment failed:', result.errorReason);\n trackAnalyticsEvent('purchase_failed', {\n reason: result.errorReason\n });\n showErrorDialog('Payment failed: ' + result.errorReason);\n }\n },\n\n onError: (error) => {\n const errorMessage = error.ErrorCode === 'SDK_ERROR'\n ? 'Failed to load Google Pay. Please check your connection.'\n : `Payment error: ${error.message}`;\n \n console.error('Google Pay error:', error);\n trackAnalyticsEvent('google_pay_error', {\n errorCode: error.ErrorCode,\n errorMessage: error.message\n });\n \n showErrorDialog(errorMessage);\n },\n\n onCancel: () => {\n console.log('Payment cancelled');\n trackAnalyticsEvent('google_pay_cancelled');\n showMessage('Payment was cancelled.');\n }\n});\n\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payment-with-recurring-consent","__idx":32},"children":["Payment with recurring consent"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation with consent component for saving payment methods:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create consent component first\nconst consentConfig = {\n label: 'Save my payment method for future purchases',\n checked: false\n};\nconst consentComponent = pxpSdk.create('google-pay-consent', consentConfig);\nconsentComponent.mount('consent-container');\n\n// Create Google Pay button with linked consent\nconst googlePayButton = pxpSdk.create('google-pay-button', {\n paymentDataRequest: {\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedCardNetworks: ['VISA', 'MASTERCARD'],\n allowedAuthMethods: ['CRYPTOGRAM_3DS']\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n parameters: {\n gatewayMerchantId: 'merchant-12345'\n }\n }\n }],\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: '9.99',\n totalPriceLabel: 'Monthly Subscription'\n }\n },\n\n // Link consent component\n googlePayConsentComponent: consentComponent,\n \n // Alternative: Use onGetConsent callback\n onGetConsent: () => {\n const hasConsent = consentComponent.getValue() as boolean;\n console.log('User consent:', hasConsent);\n return hasConsent;\n },\n\n onPostAuthorisation: (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n // Success - MerchantSubmitResult\n const hasConsent = consentComponent.getValue() as boolean;\n \n if (hasConsent) {\n console.log('Payment method saved for recurring payments');\n savePaymentToken(result.merchantTransactionId);\n }\n \n window.location.href = '/subscription-active';\n }\n },\n\n onError: (error) => {\n console.error('Subscription error:', error);\n showError('Unable to start subscription. Please try again.');\n }\n});\n\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"consent-component-configuration","__idx":33},"children":["Consent component configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["google-pay-consent"]}," component is an optional checkbox for collecting customer consent to store payment methods. It can be linked to the Google Pay button for use cases like recurring payments, subscriptions, or express checkout."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The consent component is separate from recurring payment configuration. Recurring payments are enabled by adding ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recurring"]}," configuration to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]}," in SDK initialisation. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/google-pay/recurring-payments"},"children":["Recurring payments"]}," for details."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-1","__idx":34},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const consentComponent = pxpSdk.create('google-pay-consent', {\n label: 'Save my payment method for future purchases',\n checked: false\n});\n\nconsentComponent.mount('consent-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration-1","__idx":35},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const consentComponent = pxpSdk.create('google-pay-consent', {\n // Basic configuration\n label: 'I agree to save my payment method for faster checkout',\n checked: false,\n \n // Visual configuration\n checkedColor: '#4CAF50',\n tabIndex: 5,\n \n // Label styling\n labelStyles: {\n checked: {\n color: '#4CAF50',\n fontWeight: '600',\n fontSize: '14px'\n },\n unchecked: {\n color: '#666666',\n fontSize: '14px',\n fontWeight: '400'\n }\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text label displayed next to the checkbox. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'I agree to store my card information for faster checkout in the future'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Initial checked state of the checkbox. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkedColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom colour for the checkbox when checked (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'#4CAF50'"]},"). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'#292CF5'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabIndex"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tab index for keyboard navigation. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styles for the label in different states. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles.checked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styles applied to the label when checkbox is checked. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles.unchecked"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styles applied to the label when checkbox is unchecked. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linking-consent-to-button","__idx":36},"children":["Linking consent to button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Link the consent component to your Google Pay button:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create consent component\nconst consentComponent = pxpSdk.create('google-pay-consent', {\n label: 'Save my payment method',\n checked: false\n});\n\n// Create Google Pay button with consent reference\nconst googlePayButton = pxpSdk.create('google-pay-button', {\n paymentDataRequest: {\n // ... payment configuration\n },\n \n // Link the consent component\n googlePayConsentComponent: consentComponent,\n\n onPostAuthorisation: async (result, paymentData) => {\n if (result && 'merchantTransactionId' in result) {\n console.log('Payment successful');\n // Store payment token if consent was given\n }\n }\n});\n\n// Mount both components\nconsentComponent.mount('consent-container');\ngooglePayButton.mount('google-pay-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-callback-instead-of-component","__idx":37},"children":["Using callback instead of component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Alternatively, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent"]}," callback if managing consent state separately:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const googlePayButton = pxpSdk.create('google-pay-button', {\n paymentDataRequest: {\n // ... payment configuration\n },\n \n // Simple boolean consent callback\n onGetConsent: () => {\n // Return true if customer has given consent\n return document.getElementById('my-consent-checkbox').checked;\n },\n \n onPostAuthorisation: async (result, paymentData) => {\n // Handle payment based on consent\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["googlePayConsentComponent"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent"]}," are provided, the consent component takes priority. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onGetConsent"]}," callback won't be called if a consent component is linked."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"consent-styling","__idx":38},"children":["Consent styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the appearance for different states:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const consentComponent = pxpSdk.create('google-pay-consent', {\n label: 'Save my payment method',\n checkedColor: '#FF5722', // Custom brand color\n labelStyles: {\n checked: {\n color: '#2E7D32',\n fontWeight: 'bold',\n fontSize: '16px',\n textDecoration: 'underline'\n },\n unchecked: {\n color: '#757575',\n fontWeight: 'normal',\n fontSize: '14px'\n }\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-interfaces","__idx":39},"children":["Configuration interfaces"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"googlepaybuttoncomponentconfig","__idx":40},"children":["GooglePayButtonComponentConfig"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The main configuration interface for the Google Pay button component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface GooglePayButtonComponentConfig extends BaseComponentConfig {\n paymentDataRequest: GooglePayPaymentDataRequest;\n style?: GooglePayButtonStyle;\n existingPaymentMethodRequired?: boolean;\n collectCvc?: 'always' | 'never' | 'default';\n cvcVerificationPopupConfig?: CvcVerificationPopupConfig;\n googlePayConsentComponent?: GooglePayConsentComponent;\n onGetConsent?: () => boolean;\n onPreAuthorisation?: (data: PreAuthorizationData | null) => Promise;\n onPostAuthorisation?: (submitResult: BaseSubmitResult | null, paymentData: AuthorisationPaymentData) => void;\n onPaymentDataChanged?: google.payments.api.PaymentDataChangedHandler;\n onGooglePaymentButtonClicked?: (event: Event) => Promise;\n onCustomValidation?: () => Promise;\n onPreRetrySoftDecline?: (result: BaseSubmitResult) => boolean | {\n retry: boolean;\n updatedConfigs?: object;\n };\n onError?: (error: BaseSdkException) => void;\n onCancel?: () => void;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"googlepayconsentcomponentconfig","__idx":41},"children":["GooglePayConsentComponentConfig"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configuration interface for the consent component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface GooglePayConsentComponentConfig extends BaseComponentConfig {\n label?: string;\n checked?: boolean;\n checkedColor?: string;\n tabIndex?: number;\n labelStyles?: {\n checked?: CSSProperties;\n unchecked?: CSSProperties;\n };\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"googlepaybuttonstyle","__idx":42},"children":["GooglePayButtonStyle"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Styling configuration interface:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface GooglePayButtonStyle {\n type?: 'buy' | 'book' | 'checkout' | 'donate' | 'order' | 'pay' | 'subscribe' | 'plain';\n color?: 'default' | 'black' | 'white';\n height?: string;\n width?: string;\n borderRadius?: number;\n borderType?: 'default_border' | 'no_border';\n sizeMode?: 'fill' | 'static';\n buttonRootNode?: HTMLDocument | ShadowRoot | undefined;\n locale?: string;\n}\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Configuration","id":"configuration","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Button size recommendations","id":"button-size-recommendations","depth":3},{"value":"Localisation","id":"localisation","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Payment sheet interactions","id":"payment-sheet-interactions","depth":2},{"value":"Overview","id":"overview","depth":3},{"value":"Enabling payment sheet interactions","id":"enabling-payment-sheet-interactions","depth":3},{"value":"Callback intents","id":"callback-intents","depth":3},{"value":"Shipping address interactions","id":"shipping-address-interactions","depth":3},{"value":"Collecting shipping addresses","id":"collecting-shipping-addresses","depth":4},{"value":"Handling address changes","id":"handling-address-changes","depth":4},{"value":"Address validation examples","id":"address-validation-examples","depth":4},{"value":"Shipping option interactions","id":"shipping-option-interactions","depth":3},{"value":"Configuring shipping options","id":"configuring-shipping-options","depth":4},{"value":"Handling shipping option changes","id":"handling-shipping-option-changes","depth":4},{"value":"Email collection","id":"email-collection","depth":3},{"value":"Billing address collection","id":"billing-address-collection","depth":3},{"value":"Billing address formats","id":"billing-address-formats","depth":4},{"value":"Complete interaction example","id":"complete-interaction-example","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"mount()","id":"mount","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic checkout button","id":"basic-checkout-button","depth":3},{"value":"Custom styled button","id":"custom-styled-button","depth":3},{"value":"Enterprise payment with full features","id":"enterprise-payment-with-full-features","depth":3},{"value":"Payment with recurring consent","id":"payment-with-recurring-consent","depth":3},{"value":"Consent component configuration","id":"consent-component-configuration","depth":2},{"value":"Basic usage","id":"basic-usage-1","depth":3},{"value":"Advanced configuration","id":"advanced-configuration-1","depth":3},{"value":"Linking consent to button","id":"linking-consent-to-button","depth":3},{"value":"Using callback instead of component","id":"using-callback-instead-of-component","depth":3},{"value":"Consent styling","id":"consent-styling","depth":3},{"value":"Configuration interfaces","id":"configuration-interfaces","depth":2},{"value":"GooglePayButtonComponentConfig","id":"googlepaybuttoncomponentconfig","depth":3},{"value":"GooglePayConsentComponentConfig","id":"googlepayconsentcomponentconfig","depth":3},{"value":"GooglePayButtonStyle","id":"googlepaybuttonstyle","depth":3}],"frontmatter":{"seo":{"title":"Configuration"}},"lastModified":"2026-05-08T12:23:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/google-pay/configuration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}