Vue Storefront External Checkout

With this extension you can use your CMS checkout (e.g. Magento) instead of default Vue Storefront checkout. This plugin requires cart and user sync on your backend (see integrations )

Current CMS integrations for this extension

• Magento 2

How it works?

When user tries to enter your Vue Storefront checkout:

1. The extension synchronizes cart and user data with your backend CMS
2. User is redirected to your CMS checkout (extension overrides /checkout route).

Installation

Which version should I use ?

Magento Version	External Checkout Latest Version
VueStorefront 1.8	vsf-external-checkout 1.x
VueStorefront 1.9	vsf-external-checkout 2.x
VueStorefront 1.11+	vsf-external-checkout 3.x

Manual installation

1. Download the latest release and extract it in src/modules/external-checkout

2. Add CMS address to your config/local.json file.

"externalCheckout": {
  "cmsUrl" : "https://yourcmsaddress.com"
}

3. Enable cart synchronization for your Vue Storefront instance in config/local.json

cart": {
  "synchronize": true,
  ...
}

4. Register the extension in src/modules/client.ts file and disable the 'Instant checkout' module

import { ExternalCheckout } from './external-checkout'
// import { InstantCheckout } from './instant-checkout'

export const registerModules: VueStorefrontModule[] = [
   // other extensions
  ExternalCheckout,
  // InstantCheckout,
]

5. Install the appropriate module for your CMS. Currently only Magento 2 is supported.

Installation with Yarn

This feature is not yet supported

How to use for a specific stores in a multistore setup

You can specify which storeviews should use the external checkout by adding each store code to your config/local.json file.

"externalCheckout": {
  "cmsUrl" : "https://yourcmsaddress.com",
  "stores": {
    "se": {
      "cmsUrl": "https://yourcmsaddress.com"
    },
    "dk": {
      "cmsUrl": "https://yourcmsaddress.com"
    }
  }
}

How to integrate with other CMS

If you want to integrate this extension with your backend CMS make sure that entering {your_CMS_url}/vue/cart/sync/token/{user-token}/cart/{cart_token} will do the following:

1. Synchronize cart and user data between Vue Storefront and your CMS
2. Redirect user to external checkout

Suggestions

For integrations with Magento 2, also have a look at this module that allows you to run Magento 2 in checkout only mode

About Vendic

Vendic develops technically challenging e-commerce websites using Magento 2, as well as innovative headless PWA shops. Feel free to check out our projects on our website.