Process customer orders
The customers now can do everything except actually give you their money. That's a slightly important part, so let's use the Commerce checkout process in your store.
Checkout flows can be achieved with ease using Commerce and the JS-SDK.
Firstly, you want to convert the customer's cart into an order. One JS-SDK call gets that done!
EPCC.Cart().Checkout(customer, billingAddress, shippingAddress)
Then, you need to take the order and apply the customers payment details to it.
EPCC.Orders.Payment(orderId, paymentParams)
There are many methods of payment supported by Commerce, which can create any checkout experience you want. For this tutorial, let's use a simple manual payment.
const paymentParams = {
gateway: 'manual',
method: 'purchase',
}
Commerce keeps the cart instance full for 7 days after it was created. But, what if a customer wants to make another order. You don't want them to manually have to clear their cart. You can do it for them.
EPCC.Cart().RemoveAllItems()
The RemoveAllItems method will use the cart the JS-SDK has created for the customer and empty it of all items, preparing it for any possible followup orders from the same customer!
Let's see what the store checkout-service.ts file has for us this time.
export async function checkoutCart({
customer,
billingAddress,
shippingAddress,
}: CheckoutRequest): Promise<{ updatedCart: CartItemsResponse; order: Order }> {
/*
Perform a checkout that turns our cart of items into an Order
*/
const orderResp = await EPCC.Cart().Checkout(
customer,
billingAddress,
shippingAddress
)
const paymentParams = {
gateway: 'manual',
method: 'purchase',
payment: '',
}
/*
Perform a Payment which takes the order id from our newly created order and the payment method we wish to use
*/
const paymentResp = await EPCC.Orders.Payment(
orderResp.data.id,
paymentParams
)
/*
Clear out all the items from the cart
*/
await EPCC.Cart().RemoveAllItems()
/*
Get the latest version of the empty cart
*/
const updatedCart = await EPCC.Cart().Items()
return {
updatedCart,
order: orderResp.data,
}
}
checkoutCart({ customer, billingAddress, shippingAddress }) provides all the customer data needed to make the JS-SDK requests.
Try to wire up the checkoutCart function for your store to get those payments rolling in!
The function checkoutCart is expecting a single object with two properties as the return value. It needs the latest cart, after all our updates, and the customer’s order.
Add some items to the cart and perform a full checkout to test.