We are using Stripe Setup Intent API to create delayed payments.
What we are doing basically:
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');
When the payment method is picked - saving it with Stipe.confirmSetup(...)
method
Calculating the tax based on the user billing information location and calculating the final price including tax
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.
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.
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.
[2] https://docs.stripe.com/elements/express-checkout-element