Checkout Step 4: Choose Payment Provider

In this guide, you'll learn how to implement the last step of the checkout flow, where the customer chooses the payment provider and performs any necessary actions. This is typically the fourth step of the checkout flow, but you can change the steps of the checkout flow as you see fit.

Payment Step Flow in Storefront Checkout#

The payment step requires implementing the following flow:

1. Retrieve the payment providers using the List Payment Providers API route.
2. Customer chooses the payment provider to use.
3. If the cart doesn't have an associated payment collection, create a payment collection for it using the Create Payment Collection API route.
4. Initialize the payment sessions of the cart's payment collection using the Initialize Payment Sessions API route.
   • If you're using the JS SDK, it combines the third and fourth steps in a single initiatePaymentSession function.
5. Optionally perform additional actions for payment based on the chosen payment provider. For example, if the customer chooses Stripe, you show them the UI to enter their card details.
   • You can refer to the Stripe guide for an example of how to implement this.

How to Implement the Payment Step Flow#

For example, to implement the payment step flow:

In the example above, you:

• Retrieve the payment providers from the Medusa application using the List Payment Providers API route. You use those to show the customer the available options.
• When the customer chooses a payment provider, you use the initiatePaymentSession function to create a payment collection and initialize the payment session for the chosen provider.
  • If you're not using the JS SDK, you need to create a payment collection using the Create Payment Collection API route if the cart doesn't have one. Then, you need to initialize the payment session using the Initialize Payment Session API route.
• Once the cart has a payment session, you optionally render the UI to perform additional actions. For example, if the customer chose Stripe, you can show them the card form to enter their credit card.

In the Fetch API example, the handlePayment function implements this flow by calling the different functions in the correct order.

Stripe Example#

If you're integrating Stripe in your Medusa application and storefront, refer to the Stripe guide for an example of how to handle the payment process using Stripe.