Setup of the SDK module

This SDK module should be used only client-side. It won't work server-side.

The last part of the setup is installing Stripe SDK module for commercetools in your Alokai application. Also, make sure you've already installed the @vsf-enterprise/sdk package. Minimum supported version is 1.0.0.

yarn

yarn add @vsf-enterprise/sdk @vsf-enterprise/stripe-commercetools-sdk

In the root of your project, create a file named sdk.config.ts and initialize an empty configuration object in it.

// sdk.config.ts

export default defineSdkConfig(({ buildModule, middlewareModule, getRequestHeaders, config }) => ({
  // ..
}));

Import the integration's SDK module. By default, it is a function that returns a set of module methods. Alokai modules export a type of those methods as well.

// sdk.config.ts

import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
import type { StripeCTModule } from '@vsf-enterprise/stripe-commercetools-sdk';

export default defineSdkConfig(({ buildModule, middlewareModule, getRequestHeaders, config }) => ({
  // ..
}));

Finally we can add our own sdk module using buildModule available in defineSdkConfig autoimported method.

// sdk.config.ts

import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
import type { StripeCTModule } from '@vsf-enterprise/stripe-commercetools-sdk';
import { buildModule } from '@vsf-enterprise/sdk';

export default defineSdkConfig(({ buildModule, middlewareModule, getRequestHeaders, config }) => ({
  // ..
  stripeCt: buildModule<StripeCTModule>(stripeCtModule, {
    apiUrl: `${middlewareUrl}/stripe`,
    publishableKey: '<your-stripe-publishable-key>'
  })
}));

How to build middleware module

More information about middleware modules and how to build them, can be found in SDK documentation

Basic SDK usage

To use the initialized SDK, you should import it from the sdk.config.ts file. Then, based on the namespace, you can access the module's methods.

import { useSdk } from './sdk';

const sdk = useSdk();

// Using the module's methods
const { paymentElement } = await sdk.stripeCt.mountPaymentElement({ cart });

// Using lib methods
const paymentElementAppearance = sdk.stripeCt.lib.buildAppearance('night');

// Using extend methods
const product = await sdk.stripeCt.getPaymentStatus('payment-id');

The simplest example of composing shared methods to make a payment can be found here.

Documentation of all Stripe-commercetools SDK methods can be found in the API Reference. There you can learn how to customize exampled linked above.