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:

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.

Required for all other checkout functionality.

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.

Optional: Not required if you want to use the checkout functionality without delivery options.

// <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

Optional: Not required if you want to use the checkout functionality without separate address fields.

// <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

Optional: Not required if you want to use the checkout functionality without tax fields.

// <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);
Edit this page
Last updated: 
Contributors josvanwinkelmyparcel