Creating "Buy-Again" Purchase Flows

In this tutorial, we will walk you through the process of enabling "Buy-Again" purchase flows streamlining the ordering process for customers who have large high-value carts and make standard, repeat orders. The purpose of this functionality is to streamline the purchasing process for your customers, increasing the likelihood of repeat business and building customer loyalty.

By leveraging the power of Elastic Path Commerce Cloud, an API-first commerce solution, adding this type functionality is straight forward and easy to create. The flexibility of APIs allows companies to build unique features that feel seamless to end-users. Enabling custom features like "Buy-Again" can be added without disrupting the user interface, requiring extensive plugin coding, or destabilizing and slowing down the overall system by adding custom code to the core. Instead the functionality can be added directly to the front-end without the use of iframes or other hacks, and the logic can be executed with a small amount of JavaScript calling the APIs.

Step 1: Place an Order

Before a customer can buy again, they must create and place a new order. The customer creates their first cart and completes the checkout process, this order and all details are then stored in their order history and accessible via API. This information can then be retrieved later when the customer needs to "Buy-Again”.

Step 2: Identify order to Repeat

The next step is for the customer to select the order they want to repeat, this step is traditionally taken from the order history section in an account profile, but the freedom of an API-First approach means it can happen from any location, even a link from the past order confirmation email or a reminder text. The import aspect is that the customer has an easy wait to find and identify the order they want to repeat.

sequenceDiagram
  Customer->>Profile: View Profile
  Profile->>Order History: Retrieve Order History
  Customer->>Order History: Selects Order to Repeat

Step 3: Order->Cart

Create a Function to Query the Selected Order
While the normal process is for a cart to be converted to an order, the similar schema mean the opposite is also possible and easy to accomplish. At this point, code will be called that retrieves the order and leverages the details to populate either a new or existing cart. Since pricing and inventory may have changed, rather than copy all details, instead we can simply extract the line-items from the order and add them to the user’s existing shopping cart, if no cart exists, create a new one.
Here's some example code:

const MoltinGateway = require('@moltin/sdk').gateway;

const Moltin = MoltinGateway({
  client_id: 'YOUR_CLIENT_ID',
  client_secret: 'YOUR_CLIENT_SECRET',
});

async
function repeatOrder(orderId) {
  // Get the order details
  const orderDetails = await Moltin.Orders.Get(orderId);

  // Extract line items
  const lineItems = orderDetails.data.line_items;

  // Get or create the user's cart
  const cart = await getOrCreateCart();

  // Add line items to the cart
  for (const item of lineItems) {
    await Moltin.Cart(cart.id).AddProduct(item.product_id, item.quantity);
  }
}

Step 4: Customer Reviews the Cart and Makes Changes (Optional)

Once the items from the previous order have been added to the cart, the customer can review their cart and make any necessary changes.

sequenceDiagram
  Customer->>Cart: Review Cart
  Customer->>Cart: Make Changes (Optional)

Step 5: Checkout

Finally, the customer proceeds to the standard checkout flow, completing their "Buy-Again" purchase.

sequenceDiagram
  Customer->>Checkout: Proceed to Checkout
  Checkout->>Order Confirmation: Complete Purchase

Summary

Making it easy for customers to quickly repeat their orders can increase sales and increase customer loyalty by reducing friction and improving the user experience. Unique features like this "Buy-Again" purchase flow can boost a company’s competitive advantage..

As demonstrated, the flexibility of Elastic Path Commerce Cloud’s API-first approach allowed us to implement this feature with only small and seamless front-end modifications. There was no need for complex plugins, extensions, or learning new coding techniques as it was all standard JavaScript.

Here's a diagram of the entire process:

flowchart TB
  A[Customer Makes Original Purchase] --> B[Customer Selects the Order to Repeat]
  B --> C1[[Query the Order JSON]]
  C1 --> C2{Cart Exists?}
  C2 -->|NO| C3[Create Cart]
  C2 -->|YES| C4
  C3 --> C4[[Add Line-Items to Cart]]
  C4 --> D[Customer Reviews the Cart and Makes Changes]
  D --> E[Customer Goes Through the Standard Checkout Flow]