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

Create a new file in the sdk/modules in your Next.js app and add a new file for the Stripe CommerceTools module:

sdk/modules/stripe-ct.ts

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

export const stripeCt = defineSdkModule(({ buildModule, config }) =>
  buildModule(stripeCtModule<StripeCTModule>, {
    apiUrl: `${config.apiUrl}/stripe`,
    ssrApiUrl: `${config.ssrApiUrl}/stripe`,
    publishableKey: '<your-stripe-publishable-key>',
  }),
);

sdk/modules/index.ts

export * from './stripe-ct';
// ... other module exports

Now you can use the Stripe CommerceTools module in your application through the SDK.

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.