Vue Storefront is now Alokai! Learn More
Checkout

Checkout

Introduction

This section will cover the basics of the checkout process. We will also cover how to collect billing and shipping info, create an order and apply coupons.

Collecting shipping info

To collect shipping info, you can use the createCartAddress method. It requires cartId as a parameter.

const cartAddress = await sdk.sapcc.createCartAddress({
  cartId: '00035084',
  address: {
    titleCode: 'mr',
    firstName: 'John',
    lastName: 'Doe',
    line1: 'Some Street',
    postalCode: '54-022',
    country: { isocode: 'GB' },
    town: 'Radom'
  }
});

If you are placing an order as an authenticated user and would like to re-use some address saved in your address book, you might want to use the replaceCartAddress method. It requires cartId and addressId as parameters.

await sdk.sapcc.replaceCartAddress({
  cartId: '00035084',
  addressId: '8796716793879'
});

Creating an order

To create an order, you can use the placeOrder method. It requires cartId as a parameter.

const order = await sdk.sapcc.placeOrder({ cartId: '00035084' });

Fetching user order

To fetch an order for both logged-in and guest users, you can use the getUserOrder method. As a parameter, you should pass the orders GUID (Globally Unique Identifier) or order CODE.

const order = await sdk.sapcc.getUserOrder({ code: '00035084' });

Fetching user order history

To fetch an order history for both logged-in and guest users, you can use the getUserOrderHistory method.

const orderHistory = await sdk.sapcc.getUserOrderHistory();

Applying vouchers

To apply a voucher to the cart, you can use the addCartVoucher method. It requires cartId and voucherId as parameters.

await sdk.sapcc.addCartVoucher({
  cartId: '00035084',
  voucherId: 'springfestival'
});

Removing vouchers

To remove a voucher from the cart, you can use the removeCartVoucher method. It requires cartId and voucherId as parameters.

await sdk.commerce.removeCartVoucher({
  cartId: '00035084',
  voucherId: 'springfestival'
});