This guide is aimed at advanced users who have some experience with Spree API and Stripe.
You also need to install Spree Stripe extension before.
If you’re using the standard Spree Storefront, then you can skip this tutorial as quick checkout is already built in.
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
-
For Web and JS, please review:
- Express Checkout Element
- We also recommend reviewing the spree_stripe implementation in Stimulus.js
- For iOS, please review:
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):Update the checkout
Update the checkout
Update order
true
indicating that the order is from quick checkout. It is required as the address details you will receive from Apple Pay or Google Pay are not complete and wouldn’t be valid for the standard checkout.Customer’s first name, e.g. John
Customer’s last name, e.g. Doe
Customer’s city, e.g. Mountain View
Customer’s zip code, e.g. 94043
Customer’s country ISO, e.g. US
Customer’s address state, e.g. CA (empty string is also accepted)
Set it to
CLEAR
to clear the existing billing address (this prevents the order from accidentally advancing to the payment
step).Move the order to the delivery step
Move the order to the delivery step
Endpoint documentationThis will return you an order response, and you can update the payment element with a new total (you should use
Advance order to the delivery step
true
indicating that the order is from quick checkoutYou don’t have to send
shipping_method_id
if you don’t have it yet, but if you received Shipping Method/Rate changed
event, and you already have the selected shipping method, then you can send it.total_minus_store_credits
for total) and shipping rates.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 documentationSelect shipping method
Shipping method ID of the selected shipping rate
total_minus_store_credits
Confirming the payment
Now you should make several more calls to the backendConfirm that the order is ready for the payment
Confirm that the order is ready for the payment
Validate order for payment
200
response code means that the order is ready for the payment.Update the address with more data
Update the address with more data
You should have a lot more information about the customer (in previous events, Stripe probably will not provide you information such as customer address), so send them to the backend:Endpoint documentation
Update the order
Customer’s email, e.g. [email protected]
true
indicating that the order is from quick checkoutCustomer’s first name, e.g. John
Customer’s last name, e.g. Doe
Customer’s address, e.g. 123 Main St
Customer’s address 2, e.g., Apt. 1
Customer’s zip code, e.g. 94043
Customer’s country ISO, e.g. US
Customer’s address state, e.g. CA (empty string is also accepted)
Customer’s phone number, e.g. +1234567890
Set it to
true
so the order does not advance to the next stateMove the order to the payment step
Move the order to the payment step
Endpoint documentation
Move the order to the payment step
Shipping method ID of the selected shipping rate
<PAYMENT INTENT ID>
should be Spree’s internal payment intent ID, which you will receive when you create the payment intent. Do not confuse it with Stripe’s payment intent ID.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:
Confirm payment intent
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.Reset order addresses