Developer Hints

In the web component jwt parameter

Here you'll find some example implementations to generate the jwt needed to initialize the checkout web component

import * as jwt from 'jsonwebtoken';

const payload = {
    iss: 'https://your-shop.com',
    aud: 'https://your-shop.com',
    iat: Math.floor(Date.now() / 1000), // Current timestamp in seconds
    nbf: Math.floor(Date.now() / 1000), // Current timestamp in seconds
    exp: Math.floor(Date.now() / 1000) + 60, // Current timestamp + 60 seconds
    basketId: basketId, // Replace with your actual basketId
    rBasketId: require('crypto').createHash('sha256').update(basketId + '.' + salt).digest('hex'),
};

const shopSecret = 'YourSecretShopKey'; // Set your secret shop key here.

const jwtToken = jwt.sign(payload, shopSecret, { algorithm: 'HS256' });

Decode the cbd parameter

For better understanding of how the handle the cbd parameter on your Order Success Page.

Decoding and verifying the cbd parameter signature

You can use the following code to decode and verify the received cbd parameter.

import * as crypto from 'crypto';

// Replace these values with your actual data
const shopSecret = 'YourShopSecret';
const payloadToSign = {
    // Your payload data here
};

// Encode the payload as JSON and then base64
const payload = Buffer.from(JSON.stringify(payloadToSign)).toString('base64');

// Calculate the HMAC-SHA256 signature using your shop secret and encode it directly as base64
const signature = crypto.createHmac('sha256', shopSecret).update(payload).digest('base64');

// Combine the payload and signature with a period (.) separator
const jwtToken = `${payload}.${signature}`;

How we encode the cbd parameter

The following examples show how we encode the cdb parameter before the redirect to your Order Success Page is triggered.

You don't need to implement this on your shop, but it may be useful if you want to cover your decoding implementation with tests.

import * as crypto from 'crypto';

// Replace these values with your actual data
const shopSecret = 'YourShopSecret';
const payloadToSign = {
    // Your payload data here
};

// Encode the payload as JSON and then base64
const payload = Buffer.from(JSON.stringify(payloadToSign)).toString('base64');

// Calculate the HMAC-SHA256 signature using your shop secret and encode it directly as base64
const signature = crypto.createHmac('sha256', shopSecret).update(payload).digest('base64');

// Combine the payload and signature with a period (.) separator
const jwtToken = `${payload}.${signature}`;

In order to fully get the checkout component working within your local development setup you may need a HTTPS connection. On server deployments this is addressed already. But for a local development environment you need to generate a certificate, e.g. with mkcert:

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem localhost

Then add within your local application the generated keys and certificates:

import fs from 'fs';
import path from 'path';

const config: NuxtConfig = {
  ...

  server: {
    ...
    https: {
      key: fs.readFileSync(path.resolve(__dirname, '.cert/key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, '.cert/cert.pem')),
    },
  },

  ....
};

export default config;

For regular NodeJS-based builds it's sufficient to add these environment variables to get the development environment to use HTTPS:

HTTPS=true
SSL_CRT_FILE=./.cert/cert.pem
SSL_KEY_FILE=./.cert/key.pem

Keep in mind, that these SSL certificates are not secure and you will receive an error in your browser. For development purposes you can either install the certificate in your local keystore or let the browser ignore this error, e.g. in Chrome you can add --ignore-certifcate-errors to ignore these error.

Developer Hints

In the web component jwt parameter

Decode the cbd parameter

Decoding and verifying the cbd parameter signature

How we encode the cbd parameter

Local SSL