Setup of the VSF module

The last part of the setup is the installing Stripe integration for the commercetools module in your Vue Storefront application.

Setup

Add @vsf-enterprise/stripe-commercetools to dev and prod arrays in useRawSource object:

// nuxt.config.js

export default {
  buildModules: [
    ['@vue-storefront/nuxt', {
      coreDevelopment: true,
      useRawSource: {
        dev: [
          '@vue-storefront/commercetools',
          '@vsf-enterprise/stripe-commercetools'
        ],
        prod: [
          '@vue-storefront/commercetools',
          '@vsf-enterprise/stripe-commercetools'
        ]
      }
    }]
  ]
};

Register the @vsf-enterprise/stripe-commercetools/nuxt module with the following configuration:

// nuxt.config.js

export default {
  modules: [
    ['@vsf-enterprise/stripe-commercetools/nuxt', {
      publishableKey: 'pk_test_***'
    }]
  ]
};

If you are also using the nuxt-i18n module, you must register both packages in the proper order. You can read more about it here (opens new window).

Generally, we recommend placing the @vsf-enterprise/stripe-commercetools/nuxt module at the very top of the array.

• publishableKey - Stripe account's publishable key, see the API keys (opens new window) page in Stripe's documentation.

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: "https://api.europe-west1.gcp.commercetools.com",
          authHost: "https://auth.europe-west1.gcp.commercetools.com",
          projectKey: "my-project",
          clientId: "***",
          clientSecret: "***",
          scopes: [
            "manage_orders:my-project",
            "manage_payments:my-project",
            "view_orders:my-project"
          ]
        },
        stripe: {
          profile: 'stripeProfile1'
        }
      }
    }
  }
}

• configuration:
  • ctApi - An object containing credentials of your commercetools API client. Please refer to our documentation for commercetools integration (opens new window) 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.

Setup extension and notification modules

We created an Stripe extension for commercetools (opens new window). Make sure to configure and deploy both the extension (opens new window) and notification (opens new window) modules. Refer to the Stripe extension repository (opens new window) for more information.

Usage on the frontend

Add PaymentStripeProvider.vue components to the last step of the checkout process.

<template>
  <div>
    <PaymentStripeProvider
      v-if="cart && cart.id"
      :cartId="cart.id"
      :amount="cart.totalPrice.centAmount"
      :currency="cart.totalPrice.currencyCode"
    />
  </div>
</template>

<script>
import PaymentStripeProvider from '@vsf-enterprise/stripe-commercetools/src/components/PaymentStripeProvider';

export default {
  components: {
    PaymentStripeProvider
  },
  setup() {
    const {
      cart,
      load,
    } = useCart();

    onMounted(async () => {
      await load();
    });
    // ...

    return {
      // ...
      cart: computed(() => cart.value),
    }
  }
};
</script>

Placing an order

The integration will place an order in commercetools and add the order object to the response if the transaction is authorized. It only makes one request from the client to finalize/authorize payment and make an order.