We are integrating Google Pay via Paypal Checkout. We want the following flow:
Payment Request Dialog -> user authorizes payment amount -> show order review page -> user places order -> capture payment amount
The problem
The label of the main button in the payment sheet dialog always says "Pay" (German: Bezahlen) instead of "Continue" (German: Weiter).
This is the code (we are using the official web component library, the cfg is some basic config coming from Paypal that we just pass on to the paymentRequest). We are handling more callbackIntents than shown here, but this is just the MVP that should work:
btn.onPaymentAuthorized = (data) => { console.log("auth", data) }btn.onLoadPaymentData = (paymentData) => { console.log("load", paymentData) }btn.buttonType = "checkout"btn.buttonLocale = "de"btn.paymentRequest = { apiVersion: cfg.apiVersion, apiVersionMinor: cfg.apiVersionMinor, merchantInfo: cfg.merchantInfo, allowedPaymentMethods: cfg.allowedPaymentMethods, callbackIntents: ["PAYMENT_AUTHORIZATION"], transactionInfo: { countryCode: cfg.countryCode, currencyCode: "EUR", totalPrice: "19.99", totalPriceStatus: "ESTIMATED", // <-- should set button label to "Continue" }}The docs
According to the docs, the submit button text ist controlled either by the CheckoutOption-option or the totalPriceStatus.
But that's not what we want. Instead, we want the deault bahaviour:
By default the CheckoutOption is set to DEFAULT and depends on the totalPriceStatus status.
So since our totalPriceStatus is ESTIMATED and the checkoutOption is implicitly DEFAULT, I would expect to see a Continue button , but instead it always says Pay no matter what.
The weird part
I cannot recreate this in a Fiddle. If I take the exact same data and throw it in a fiddle, it works as expected.
The HTML:
<script src="https://unpkg.com/@google-pay/button-element@latest/dist/index.umd.js"></script><google-pay-button button-type="checkout" environment="TEST"></google-pay-button>The JS:
const buttons = document.querySelectorAll('google-pay-button');for (const button of buttons) { button.onLoadPaymentData = data => console.log("loaded", data) button.buttonLocale = 'de' button.paymentRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [ { type: "CARD", parameters: {"allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],"allowedCardNetworks": ["MASTERCARD", "DISCOVER", "VISA", "AMEX"],"billingAddressRequired": true,"assuranceDetailsRequired": true,"billingAddressParameters": { "format": "FULL" } }, tokenizationSpecification: {"type": "PAYMENT_GATEWAY","parameters": {"gateway": "paypalppcp", "gatewayMerchantId": "XXXXXXXXXX" } } } ], merchantInfo: { // merchantOrigin: "...", -- left off in the fiddle // authJwt: "....", -- left off in the fiddle, comes from paypal merchantId: "XXXXXXXXXX", merchantName: "Our Name" }, transactionInfo: { totalPriceStatus: 'ESTIMATED', totalPrice: '19.99', currencyCode: 'EUR', countryCode: 'DE', }, };}The result:
Notice that the sheet language is now English instead of German even though it's the exact same browser session with the logged in Google account, and the test payment cards have changed.
So this seems now to be decoupled from Paypal since we left off the JWT token I guess? I'm not sure where exactly Paypal comes in.
The question
Why is this happening? Could this be a translation / i18n issue? Or might this even be an issue on Paypal's side?
Further context
Since we are based in Germany, we are legally required to display specific information (such as a Terms of Service link) alongside the submit button that initiates a payment. Additionally, there are strict regulations on how that button can be labeled. Because we cannot control these aspects within the payment sheet, we are unable to complete the purchase directly from there. Instead, we must redirect to a review page to display all the necessary information.
Furthermore, UX guidelines suggest adding the Google Pay button to the product page. However, due to GDPR regulations, this is not feasible without the user's consent.