javascriptstripe-paymentsgoogle-paygoogle-wallet

Customise Google Pay Modal with Stripe


We are using Stripe Setup Intent API to create delayed payments.

What we are doing basically:

  1. Loading and mounting Stripe.Elements
        // Create a Stripe client
        this.stripePayment = stripe;

        this.stripeElements = this.stripePayment.elements({
            clientSecret: setupIntent.clientSecret,
            locale: 'en',
        } as never);

        this.paymentElement = this.stripeElements.create('payment', {
            wallets: {
                googlePay: 'auto'
            }
        });
        this.paymentElement.mount('#stripe-payment-element');
  1. When the payment method is picked - saving it with Stipe.confirmSetup(...) method

  2. Calculating the tax based on the user billing information location and calculating the final price including tax

  3. Let user pay via our Stripe/BE integration which uses the following model

export interface CheckoutSubscriptionsRequest {
    payloadBody: {
        numberOfAddOns?: number;
        planId?: string,
        price?: number,
        promoCode: string;
        paymentMethodId?: string;
        zipcode?: string;
    }
    isAddOn?: boolean;
    invoiceId?: string;
}

Everything is working fine besides the confusing text in the Google Pay modal. The problem is that it says: Pay [your company] $0 and the button says 'Pay'.
While we aren't paying right now, we are just saving payment information for the next step. enter image description here

So the main question is: Is it possible to customise the Google Pay modal somehow? Is it designed for the delayed payments?
And if not - any suggestions how to build an understandable UI are appreciated.


Solution

  • Unfortunately it is not possible to set a custom amount like this for the Payment Sheet at the moment when you are using a Setup Intent. When using the payment element for a one time payment or subscription, that sheet will show the proper amount, but when $0 is being paid right now $0 shows up on the sheet.

    Stripe's Payment Request Button, which consists of a single button for Apple Pay, Google Pay, or Link does have the ability to show arbitrary values via specifying the amount when creating the payment request[1]. So if you really want this UI, you can hide the wallets from your Payment Element and use a PRB to display this sheet. Though that would add extra complexity to your page, and modern integrations are recommended to use the Express Checkout Element[2] instead of the PRB, and unfortunately the ECE has the same limitation of now being able to show an amount in setup mode.

    [1] https://docs.stripe.com/stripe-js/elements/payment-request-button?client=html#html-js-create-payment-request-instance

    [2] https://docs.stripe.com/elements/express-checkout-element