- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
- User Guide
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
- User Guide
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:
- Retrieve the payment providers using the List Payment Providers API route.
- Customer chooses the payment provider to use.
- If the cart doesn't have an associated payment collection, create a payment collection for it.
- Initialize the payment sessions of the cart's payment collection using the Initialize Payment Sessions API route.
- 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:
1// assuming the cart is previously fetched2const cart = {3 // cart object...4}5 6const retrievePaymentProviders = async () => {7 const { payment_providers } = await fetch(8 `http://localhost:9000/store/payment-providers?region_id=${9 cart.region_id10 }`, {11 credentials: "include",12 headers: {13 "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",14 },15 })16 .then((res) => res.json())17 18 return payment_providers19}20 21const selectPaymentProvider = async (22 selectedPaymentProviderId: string23) => {24 let paymentCollectionId = cart.payment_collection?.id25 26 if (!paymentCollectionId) {27 // create payment collection28 const { payment_collection } = await fetch(29 `http://localhost:9000/store/payment-collections`,30 {31 credentials: "include",32 method: "POST",33 headers: {34 "Content-Type": "application/json",35 "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",36 },37 body: JSON.stringify({38 cart_id: cart.id,39 }),40 }41 )42 .then((res) => res.json())43 44 paymentCollectionId = payment_collection.id45 }46 47 // initialize payment session48 await fetch(`http://localhost:9000/store/payment-collections/${49 paymentCollectionId50 }/payment-sessions`,51 {52 credentials: "include",53 method: "POST",54 headers: {55 "Content-Type": "application/json",56 "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",57 },58 body: JSON.stringify({59 provider_id: selectedPaymentProviderId,60 }),61 })62 .then((res) => res.json())63 64 // re-fetch cart65 const { 66 cart: updatedCart,67 } = await fetch(68 `http://localhost:9000/store/carts/${cart.id}`, 69 {70 credentials: "include",71 headers: {72 "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",73 },74 }75 )76 .then((res) => res.json())77 78 return updatedCart79}80 81const getPaymentUi = () => {82 const activePaymentSession = cart?.payment_collection?.83 payment_sessions?.[0]84 if (!activePaymentSession) {85 return86 }87 88 switch(true) {89 case activePaymentSession.provider_id.startsWith("pp_stripe_"):90 // TODO handle Stripe UI91 return "You chose stripe!"92 case activePaymentSession.provider_id93 .startsWith("pp_system_default"):94 return "You chose manual payment! No additional actions required."95 default:96 return `You chose ${97 activePaymentSession.provider_id98 } which is in development.`99 }100}101 102const handlePayment = () => {103 retrievePaymentProviders()104 105 // ... customer chooses payment provider106 // const providerId = ...107 108 selectPaymentProvider(providerId)109 110 getPaymentUi()111}
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:
- Check whether the cart has a payment collection. If not, create one using the Create Payment Collection API route.
- 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.
Was this page helpful?