Stripe card payment

What is it?

We take payment via credit or debit card on the checkouts by using Stripe Elements.

How do we use it?

The Stripe JS SDK and its React-specific implementation allows us to present normal-looking input fields for card number, expiry date and CVC, and handle things like error validation messages ourselves. However under the hood the fields are actually iframes to a Stripe domain, which means that we never have to touch card details ourselves- instead we simply request a payment identifier token from Stripe which we can later use to retrieve the money.

This means that styling and validating the fields is a little more complex than for payment methods such as direct debit where we collect payment details directly, but given the technical and legal complexity of handling card payments it's well worth the trade-off.

Like the Payment Request Button, the Stripe form fields must be have an Elements provider component somewhere above them in the component tree, which ensures they can access a Context object with details of the current Stripe account.

Specific concerns

• For recurring payments- essentially, anything besides a one-off contribution- we also have to create what's called a 'setup intent', indicating that we intend to take future payments from this card. This requires the creation of a specific client secret. We request this secret from the back end when the user completes the recaptcha field, and it's generated by the stripe-intent lambda
• The Stripe slice state, uniquely, starts out with some default errors. This is because we otherwise only learn about errors in the user's input from the change events the Element components emit as the user types, but we need to be able to handle the scenario where the user never touches the fields (ie. they select to pay by card but then immediately click the payment button).