# Installation

To install Stripe integration for the Elastic Path Commerce Cloud module, use the following command:

# Setup

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

// nuxt.config.js

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

// nuxt.config.js

export default {
  modules: [
    ['@vsf-enterprise/stripe-epcc/nuxt', {
      publishableKey: 'pk_test_YOUR_PUBLISHABLE_KEY' // Stripe publishable key
    }]
  ]
};

TIP

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

Disable autoadding authorized payment in epcc middleware integration's configuration:

// middleware.config.js
module.exports = {
  integrations: {
    epcc: {
      location: '@vsf-enterprise/epcc-api/server',
      configuration: {
        // ...
        disable_manual_payment_authorize: true
      }
    }
  }
};

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

// middleware.config.js

module.exports = {
  integrations: {
    // ...
    stripe: {
      location: '@vsf-enterprise/stripe-epcc/server',
      configuration: {
        epcc: {
          client_id: '*****',
          client_secret: '*****',
          secure_cookies: false,
          forgotten_password_token_expiration: '10m',
          tax_data: {
            en: {
              default: {
                rate: 0.2
              },
              reduced: {
                rate: 0.3
              }
            },
            pl: {
              default: {
                rate: 0.23
              },
              medical: {
                rate: 0.08
              }
            }
          }
        },
        stripe: {
          secretKey: 'sk_test_YOUR_SECRET_KEY'
        }
      }
    }
  }
}

configuration:
- epcc - An exact copy of the epcc configuration that should be already in this file. The purpose of this setting is to create an instance of Moltin client (opens new window).
- stripe:
  - secretKey - Stripe account's secret key, see the API keys (opens new window) page in Stripe's documentation.

# Usage on the frontend

The integration comes with a PaymentStripeProvider.vue component that acts as a wrapper around a Stripe Card element. It automatically adds a Stripe Card element, handles payment submission, and displays any error or confirmation messages.

This component should be added into your checkout flow after creating an order.

<template>
  <--! COMPONENT'S CONTENT -->
  <div>
    <PaymentStripeProvider />
  </div>
</template>

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

export default {
  components: {
    PaymentStripeProvider
  }
};
</script>

# Setup in eCommerce

For this integration to work properly, you need to enable Stripe Payment Intents as a payment gateway (opens new window) within Elastic Path Commerce Cloud.

← Introduction

Creating custom payment component →