Checkout

The checkout modules of the MyParcel js-pdk are used to render the checkout components and functionality in your application. The checkout module of the js-pdk consists of four parts:

• checkout-core
• checkout-delivery-options
• checkout-separate-address-fields
• checkout-tax-fields

# Project structure

# Checkout core

The checkout core is needed for all other checkout functionality. It contains the logic to communicate with the PDK backend and to determine which fields are used.

npm install @myparcel-pdk/checkout

// <workspace root>/views/checkout-core/package.json
{
  "name": "@my-scope/checkout-core",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@myparcel-pdk/checkout": "^1.0.0-alpha.1"
  }
}

In src/main.ts, you can import the checkout-core module and use it in your application:

import {createPdkCheckout} from '@myparcel-pdk/checkout';

createPdkCheckout({
  // configuration
});

See the PdkCheckoutConfig type for all available configuration options.

# Delivery options

The Delivery Options module is used to render the delivery options in your checkout. It uses @myparcel/delivery-options to render the delivery options and communicates with the PDK backend.

// <workspace root>/views/checkout-delivery-options/package.json
{
  "name": "@my-scope/checkout-delivery-options",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@myparcel-pdk/checkout": "^1.0.0-alpha.1"
  }
}

Initialize the checkout delivery options module:

// src/main.ts
import {
  initializeCheckoutDeliveryOptions,
  usePdkCheckout,
} from '@myparcel-pdk/checkout';

usePdkCheckout().onInitialize(initializeCheckoutDeliveryOptions);

# Separate address fields

If you want to support our separate address fields, you need to set up this module. It contains logic to support the following fields:

• street
• number
• number_suffix

// <workspace root>/views/checkout-separate-address-fields/package.json
{
  "name": "@my-scope/checkout-separate-address-fields",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@myparcel-pdk/checkout": "^1.0.0-alpha.1"
  }
}

Initialize the checkout separate address fields module:

// src/main.ts
import {
  initializeCheckoutSeparateAddressFields,
  usePdkCheckout,
} from '@myparcel-pdk/checkout';

usePdkCheckout().onInitialize(initializeCheckoutSeparateAddressFields);

# Tax fields

The tax fields are two additional fields that can be used to collect the tax number of the customer. It contains logic to support the following fields:

• vat_number
• eori_number

// <workspace root>/views/checkout-tax-fields/package.json
{
  "name": "@my-scope/checkout-tax-fields",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@myparcel-pdk/checkout": "^1.0.0-alpha.1"
  }
}

Initialize the checkout tax fields module:

// src/main.ts
import {
  initializeCheckoutTaxFields,
  usePdkCheckout,
} from '@myparcel-pdk/checkout';

usePdkCheckout().onInitialize(initializeCheckoutTaxFields);