Vue Storefront is now Alokai! Learn More
Checkout

Checkout

Coverageri:link

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.

setCustomerEmailri:link

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.

Usageri:link

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

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

Typeri:link

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

export interface SetCustomerEmailArgs {
  email: string;
}

setCartAddressri:link

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

Usageri:link

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 Addressri:link

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],
});

Typeri:link

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>;
}

getAvailableShippingMethodsri:link

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

Usageri:link

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

Typeri:link

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;
}

setShippingMethodri:link

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.

Usageri:link

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

Typeri:link

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

export interface SetShippingMethodArgs {
  shippingMethodId: string;
}

placeOrderri:link

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

This method is not available for Adobe Commerce (Magento)

Usageri:link

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

Typeri:link

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;
}