Payment Request Button

What is it?

The Payment Request Button is a utility provided by Stripe that allows us to take payments by device or platform payment methods such as Apple Pay and Google Pay, and automatically obtain information such as the user's name, email and billing address when necessary.

How do we use it?

The Stripe Javascript SDK and Stripe 'Elements' React components enable us to detect when a user has this payment method available, render a pre-branded Apple or Google Pay button, and pass in information about the amount due and the name of the product being paid for.

When the user confirms their payment, Stripe passes us the user's email address, name and billing address details along with a payment ID which we can later use to retrieve the money, and we proceed with checkout completion in the same way we do with other payment methods.

Specific concerns

• We have two separate Stripe accounts- one for one-off contributions, and one for recurring payments- and need to make sure we are using the correct one. Going forwards this should be managed by using the ContributionsStripe wrapper component.
• Changes to the user's selected amount need to be communicated to the payment request interface object as soon as they happen.
• If the user has chosen to contribute a custom amount, we need to check its validity before the payment method's interface gets opened, and prevent opening if the amount is invalid.
• We need to validate the name, email, and state/province information in the same way as we would if the user had filled out the form themselves, to try and prevent issues downstream.
• If the user's personal details fail our validation checks we can't meaningfully recover from this- we need to prompt them to try another payment method instead.