Customer Checkout

This guide explains how to convert a cart to an order using existing customer records, accounts, or account authentication tokens in Elastic Path Commerce.

Setup

Install and configure the Shopper SDK:

npm install @epcc-sdk/sdks-shopper

Checkout Options

Choose the checkout method that best fits your use case:

Account Checkout

Use this approach for D2C storefronts and B2B scenarios where you need to associate orders with organizational accounts.

Authentication Setup

First, obtain an account management authentication token. Typically, this is done by allowing the user to login:

import { postV2AccountMembersTokens } from "@epcc-sdk/sdks-shopper";

async function loginAccountMember(username, password) {
  try {
    const response = await postV2AccountMembersTokens({
      body: {
        data: {
          type: "account_management_authentication_token",
          authentication_mechanism: "password",
          username: username,
          password: password,
        },
      },
    });

    const authToken = response.data?.data?.token;
    if (!authToken) {
      throw new Error("Authentication failed");
    }

    // Store securely
    localStorage.setItem("ep_account_management_token", authToken);
    return authToken;
  } catch (error) {
    console.error("Login failed:", error);
    throw error;
  }
}

Implementation

Provide the token as the EP-Account-Management-Authentication-Token header on the checkout request:

import {
  getCartId,
  checkoutApi,
  getV2AccountAddresses,
} from "@epcc-sdk/sdks-shopper";

async function checkoutWithAuthToken(contactInfo) {
  try {
    const cartId = getCartId();
    if (!cartId) {
      throw new Error("No cart found. Please add items to your cart first.");
    }

    // Optionally fetch saved addresses for the account
    const savedAddresses = await getV2AccountAddresses({
      path: { accountID: accountId },
    });

    // Create checkout data
    const checkoutData = {
      data: {
        contact: contactInfo,
        billing_address: savedAddresses.billing,
        shipping_address: savedAddresses.shipping,
      },
    };

    // Retrieve the stored token
    const authToken = localStorage.getItem("ep_account_management_token");

    // Checkout with authentication token
    const checkoutResponse = await checkoutApi({
      path: {
        cartID: cartId,
      },
      body: checkoutData,
      headers: {
        "EP-Account-Management-Authentication-Token": authToken,
      },
    });

    return checkoutResponse.data;
  } catch (error) {
    console.error("Authenticated checkout failed:", error);
    throw error;
  }
}

Customer ID Checkout

Use this approach when you have an existing customer record and want to streamline the checkout process without account association.

Implementation

import { getCartId, checkoutApi, paymentSetup } from "@epcc-sdk/sdks-shopper";

async function checkoutWithCustomerId(customerId, shippingAddress) {
  try {
    const cartId = getCartId();
    if (!cartId) {
      throw new Error("No cart found. Please add items to your cart first.");
    }

    // Create checkout data with customer ID
    const checkoutData = {
      data: {
        customer: {
          id: customerId,
        },
        shipping_address: shippingAddress,
        // Optionally add billing address
        billing_address: {
          first_name: "John",
          last_name: "Doe",
          line_1: "123 Billing St",
          city: "Billing City",
          postcode: "12345",
          country: "US",
        },
      },
    };

    // Checkout the cart
    const checkoutResponse = await checkoutApi({
      path: {
        cartID: cartId,
      },
      body: checkoutData,
    });

    return checkoutResponse.data;
  } catch (error) {
    console.error("Customer ID checkout failed:", error);
    throw error;
  }
}

Best Practices

1. Address Management: Consider using saved addresses with getV2AccountAddresses for better UX
2. Error Handling: Implement comprehensive error handling for network issues and validation
3. Security: Store authentication tokens securely and implement refresh logic
4. Validation: Validate all form inputs before submission
5. Loading States: Provide clear feedback during checkout process

Next Steps

• Guest Checkout
• Implement Card Payments
• Order Confirmation
• Cart Cleanup