Checkout Step 4: Choose Payment Provider

The last step before completing the order is choosing the payment provider and performing any necessary actions.

The actions required after choosing the payment provider are different for each provider. So, this guide doesn't cover that.

Payment Step Flow#

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.
4. Initialize the payment sessions of the cart's payment collection using the Initialize Payment Sessions API route.
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.

---

Code Example#

For example, to implement the payment step flow:

In the example above, you:

• Retrieve the payment providers from the Medusa application. You use those to show the customer the available options.
• When the customer chooses a payment provider, you:
  1. Check whether the cart has a payment collection. If not, create one using the Create Payment Collection API route.
  2. Initialize the payment session for the chosen payment provider 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.

Edit this page