Vue Storefront is now Alokai! Learn More
Checkout

Checkout

Coverage

The following table provides an overview of the methods and their coverage across different platforms.

MethodCommercetoolsSAPCCBigCommerceSFCCMagento
SetCustomerEmail
SetCartAddress
GetAvailableShippingMethods
SetShippingMethod
PlaceOrder

For BigCommerce, check the guide on how to set up the embedded checkout.

setCustomerEmail

setCustomerEmail sets the email of the active customer. It requires the email and returns the updated SfCart object. If the email is not valid, an error will be thrown.

Usage

const cart = await sdk.unified.setCustomerEmail({
  email: "johndoe@example.com",
});

console.log(cart.customerEmail); // johndoe@example.com

Type

export type SetCustomerEmail = (args: SetCustomerEmailArgs) => Promise<SfCart>;

export interface SetCustomerEmailArgs {
  email: string;
}

setCartAddress

setCartAddress sets the shipping address for the customer. It returns the updated SfCart object.

Usage

const cart = await sdk.unified.setCartAddress({
  shippingAddress: {
    address1: "Some Street",
    city: "New York",
    country: "United States",
    firstName: "John",
    lastName: "Doe",
    phoneNumber: "+12065550100",
    postalCode: "54-022",
    state: "NY",
    titleCode: "Mr",
  },
});

Existing Address

Commonly during the checkout process, the customer will have an existing address. In this case, you can use the SfCustomerAddress object to set the shipping address for the cart.

const { addresses } = await sdk.unified.getCustomerAddresses();
const cart = await sdk.unified.setCartAddress({
  shippingAddress: addresses[0],
});

Type

export type SetCartAddress = (args: SetShippingAddress) => Promise<SfCart>;

export interface SetShippingAddress {
  shippingAddress: SfCreateAddressBody | SfCustomerAddress;
}

export interface SfCreateAddressBody {
  address1: string;
  address2?: Maybe<string>;
  city: string;
  country: string;
  firstName: string;
  lastName: string;
  phoneNumber: string;
  postalCode: string;
  state: string;
  titleCode: string;
}

export interface SfCustomerAddress {
  id: SfId;
  address1: Maybe<string>;
  address2?: Maybe<string>;
  city: Maybe<string>;
  country: Maybe<string>;
  firstName: Maybe<string>;
  lastName: Maybe<string>;
  phoneNumber: Maybe<string>;
  postalCode: Maybe<string>;
  state: Maybe<string>;
  titleCode: Maybe<string>;
}

getAvailableShippingMethods

getAvailableShippingMethods fetches the available shipping methods based on the customer's shipping address. It returns a list of SfShippingMethods.

Usage

const { methods } = await sdk.unified.getAvailableShippingMethods();

Type

export type GetAvailableShippingMethods = () => Promise<SfShippingMethods>;

export interface SfShippingMethods {
  methods: SfShippingMethod[];
}

export interface SfShippingMethod {
  description: Maybe<string>;
  estimatedDelivery: Maybe<string>;
  id: string;
  name: string;
  price: SfMoney;
}

setShippingMethod

setShippingMethod is used to select a shipping method from the available options. It requires the id of the chosen shipping method and returns the updated SfCart object.

Usage

const { methods } = await sdk.unified.getAvailableShippingMethods();
const updatedCart = await sdk.unified.setShippingMethod({
  shippingMethodId: methods[0]?.id,
});

Type

export type SetShippingMethod = (args: SetShippingMethodArgs) => Promise<SfCart>;

export interface SetShippingMethodArgs {
  shippingMethodId: string;
}

placeOrder

placeOrder will place an order using the active cart and returns the SfOrder object created.

This method is not available for Adobe Commerce (Magento)

Usage

const order = await sdk.unified.placeOrder();

Type

export type PlaceOrder = () => Promise<SfOrder>;
export interface SfOrder {
  id: SfId;
  orderDate: string;
  status: string;
  lineItems: SfOrderLineItem[];
  subtotalPrice: SfMoney;
  totalShippingPrice: SfMoney;
  totalTax: SfMoney;
  totalPrice: SfMoney;
  shippingAddress: SfAddress;
  billingAddress: SfAddress;
  shippingMethod: SfShippingMethod;
  paymentMethod: string;
}