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 Elastic Path Commerce Cloud checkout process in your store.

Checkout flows can be achieved with ease using Elastic Path Commerce Cloud 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 Elastic Path Commerce Cloud, which can create any checkout experience you want. For this tutorial, let's use a simple manual payment.

const paymentParams = {
  gateway: 'manual',
  method: 'purchase',
}

Elastic Path Commerce Cloud 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.