Vue Storefront - mollie integration for commercetools

# Installation

To install Mollie integration into your Vue Storefront application, use the following command:

# Setup

In the nuxt.config.js file, add the @vsf-enterprise/mollie-commercetools string to the dev and prod arrays in useRawSource object:











 




 






// nuxt.config.js

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

Then, register the @vsf-enterprise/mollie-commercetools/nuxt package in the modules array:

// nuxt.config.js

export default {
  modules: [
    ['@vsf-enterprise/mollie-commercetools/nuxt']
  ]
};

TIP

If you're using the i18n module, be aware that you have to register them in the proper order. You can read more about it here (opens new window).

Open the middleware.config.js file and add the @vsf-enterprise/mollie-commercetools/server integration with the following configuration:

// middleware.config.js

module.exports = {
  integrations: {
    // ...
    mollie: {
      location: '@vsf-enterprise/mollie-commercetools/server',
      configuration: {
        ctApi: {
          apiHost: '<CT_HOST_URL>',
          authHost: '<CT_AUTH_URL>',
          projectKey: '<CT_PROJECT_KEY>',
          clientId: '<CT_CLIENT_ID>',
          clientSecret: '<CT_CLIENT_SECRET>',
          scopes: [
            'manage_orders:<CT_PROJECT_KEY>',
            'manage_payments:<CT_PROJECT_KEY>'
          ]
        },
        thankYouPageUrl: 'http://localhost:3000/checkout/thank-you'
      }
    }
  }
}
  • configuration:
    • ctApi - object containing credentials of your commercetools API client. Refer to the commercetools integration (opens new window) documentation for more information. Two notable differences are that:
      • the scopes array must contain manage_orders and manage_payments, 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://example.com/ instead of https://example.com/vsf-ct-dev/graphql,
    • thankYouPageUrl - full URL path of the thank you page.

Mollie has an official commercetools integration (opens new window), which we recommend deploying to Google Function or an AWS Lambda. Make sure to configure and deploy both the extension (opens new window) and notification (opens new window) module. Refer to the Mollie integration repository (opens new window) for more information.

Higher permissions for extensions

Mollie recommends (opens new window) using the manage_payments, view_orders, and view_customers scope for both notification and extension module.

WARNING

Our integration requires this PR (opens new window) to work correctly.

# Usage on the frontend

At first, you need to ensure that the user provided shipping information, billing address, and email address. The email address could come from either cart.customerEmail or cart.billingAddress/shippingAddress.email field. For the authenticated customer, if mentioned fields are empty, the extension will use the email address from the customer's account.

The PaymentMollieProvider.vue component — which you must add to the last step of the checkout process — will use this information to:

  1. Fetch available payment methods.
  2. Let the user select desired payment methods,
  3. Create an order,
  4. Redirect the user to the Mollie checkout.
<PaymentMollieProvider />

# Fetching order on the "Thank you" page

After completing the Mollie checkout, it redirects the user to the "Thank you" page with the cart query string in the URL. You can fetch an order based on this value using the fetchOrderByCartId method from the useMollie composable.





 










 



 










 
 





<script>
// ThankYou.vue
import { computed, useRoute, onMounted } from '@nuxtjs/composition-api';
import { SfHeading, SfButton, SfCallToAction } from '@storefront-ui/vue';
import { useMollie } from '@vsf-enterprise/mollie-commercetools';

export default {
  name: 'ThankYou',
  components: {
    SfHeading,
    SfButton,
    SfCallToAction
  },
  setup() {
    const route = useRoute();
    const { fetchOrderByCartId, order } = useMollie();

    onMounted(async () => {
      if(route.value.query.cart) {
        await fetchOrderByCartId({ cartId: route.value.query.cart });
      }
    });

    return {
      address: {
        name: 'Company Headquarter',
        street: 'St. Main 17, 53-534',
        city: 'Wroclaw, Poland',
        email: 'demo@vuestorefront.io'
      },
      orderNumber: computed(() => `#${ order.value?.id }`),
      order
    };
  }
};
</script>

← Setting locale →