The Vue Storefront Essentials Course is now available! Learn More
Setup of the VSF module

Setup of the VSF module

The third part of the setup is installing Stripe integration for commercetools in your Vue Storefront middleware.

yarn add @vsf-enterprise/stripe-commercetools@^3


Add @vsf-enterprise/stripe-commercetools/server integration to the middleware with the following configuration:

// middleware.config.js

module.exports = {
  integrations: {
    // ...
    stripe: {
      location: '@vsf-enterprise/stripe-commercetools/server',
      configuration: {
        ctApi: {
          apiHost: "",
          authHost: "",
          projectKey: "my-project",
          clientId: "***",
          clientSecret: "***",
          scopes: [
        stripe: {
          profile: 'stripeProfile1'
  • configuration:
    • ctApi - An object containing credentials of your commercetools API client. Please refer to our documentation for commercetools integration for more information. Two notable differences are that:
      • the scopes array must contain manage_orders, manage_payments, and view_orders and your API client must have access to these scopes,
      • apiHost should only contain the base URL, without the path to the GraphQL endpoint. For example, https://<SHOP_DOMAIN>.com/ instead of https://<SHOP_DOMAIN>.com/vsf-ct-dev/graphql.
    • stripe:
      • profile - As prepared by us, Stripe commercetools extension supports multitenancy. This field's value allows to differentiate Stripe merchant accounts. o