Quick Checkout with Stripe and Storefront API

​

Prerequisites

Assume that you have a cart made with line items in it already.

Quick checkout works by handling 3 different events:

• Address change
• Shipping Method/Rate change
• Confirmation

How you should handle them depends on your platform/language:

• For Web and JS, please review:

  • Express Checkout Element
  • We also recommend reviewing the spree_stripe implementation in Stimulus.js

• For iOS, please review:

  • StripeApplePay
  • STPApplePayContext

​

Checkout Flow

​

Address change

Here we need to send some basic information about the customer’s shipping address, and we should move the order to the delivery step (don’t forget to replace the placeholders with the customer’s data):

​

Shipping Method/Rate change

Here we need to send the selected shipping method to the backend and update the total in the payment element

Endpoint documentation

curl -X PATCH '<SHOP URL>/api/v2/storefront/checkout/select_shipping_method' \
  -H 'Authorization: Bearer <Token>' \
  -H 'Content-Type: application/json' \
  -d '{
    "shipping_method_id": <Shipping Method ID>
  }'

Subsequently, update the payment element with a new total taken from the response’s total_minus_store_credits

​

Confirming the payment

Now you should make several more calls to the backend

Thereafter, you should confirm the payment intent using the Stripe library; this depends on your platform/language.

If you like to redirect the user to Spree’s order summary page, then set the return_url when confirming the payment intent to <SHOP URL>/stripe/payment_intents/<PAYMENT INTENT ID>. This will check if the payment intent is confirmed, move the order to the complete state, and redirect the user to the order summary.

If you like to make the order summary page by yourself, then after confirming the payment intent in Stripe, make this request:

curl -X POST <SHOP URL>/api/v2/storefront/stripe/payment_intents/<PAYMENT INTENT ID>/confirm \
  -H 'Authorization: Bearer <Token>'

Endpoint documentation

This will also check if the payment intent is confirmed, and it will move the order to the complete state

​

User cancels the payment

If at any point, the user cancels the payment (closes the quick checkout sheet/modal), you will need to handle this event and clear the shipping and billing address from the order as these addresses will not be valid and if someones decides to use standard checkout it could lead to errors.

curl -X PATCH <SHOP URL>/api/v2/storefront/checkout \
  -H 'Authorization: Bearer <Token>' \
  -H 'Content-Type: application/json' \
  -d '{
    "order": {
      "ship_address_id": "CLEAR",
      "bill_address_id": "CLEAR"
    }
  }'

Endpoint documentation

​

All Done!

Congrats! Now, your users should be able to pay for orders with quick checkout! Need support or want to give some feedback? You can join our community or drop us an email at [email protected].