Setup of the SDK module

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 add @vsf-enterprise/sdk@^1
yarn add @vsf-enterprise/stripe-commercetools-sdk@^1

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

// sdk.ts

const sdkConfig = {};

2. 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.ts
import { stripeCtModule } from '@vsf-enterprise/stripe-commercetools-sdk';
import type { StripeCTModule } from '@vsf-enterprise/stripe-commercetools-sdk';

const sdkConfig = {};

3. Import the buildModule() helper from the @vsf-enterprise/sdk package. It's used by the SDK core to type this module properly, which allows the IDEs to show the TSDocs when hovering on the module's method. Use the helper in your empty configuration object and pass the integration's SDK module to it.

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

const sdkConfig = {
  stripeCt: buildModule<StripeCTModule>(stripeCtModule, {
    apiUrl: 'http://localhost:8181/stripe',
    publishableKey: '<your-stripe-publishable-key>'
  })
};

Let's now investigate the buildModule() helper. It's a generic function, which expects a type of module's methods and type of module's extension (more in Extending the module chapter). This helper accepts 3 arguments:

• module init function (the default export of a module),
• module options,
• module extension (more in Extending the module chapter).

4. Now, when the sdkConfig object is ready, you should import the initSDK() function from @vsf-enterprise/sdk package and use it.

// sdk.ts

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

const sdkConfig = {
  stripeCt: buildModule<StripeCTModule>(stripeCtModule, {
    apiUrl: 'http://localhost:8181/stripe',
    publishableKey: '<your-stripe-publishable-key>'
  })
};

export const sdk = initSDK<typeof sdkConfig>(sdkConfig);

The initSDK() function is a generic function, that expects the type of the sdkConfig. It accepts the sdkConfig as an argument and returns the sdk client.

Basic SDK usage

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

import { sdk } from './sdk';

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