Integrating with Payment Service Provider

Do your research

Integrating with a Payment service provider (PSP for short) is hard. Because it deals with real money, even the tiniest bug can be costly.

That's why, before deciding to create a custom one, you should first check if there's already existing integration with the PSP of your choice, such as the ones we offer for Adyen (opens new window) or Mollie (opens new window).

If you find existing integration, follow its documentation to install and set it up. Otherwise, follow the Writing custom integration.

However, regardless if you'll use existing integration or create a custom one, you should read this guide (opens new window) from the commercetools team to get an overview of the payments integration flow.

Writing custom integration

The typical PSP integration for commercetools consists of two extensions:

• one extension called when commercetools creates or modifies Payment object,
• another extension called when PSP triggers specific events to update the status of the Payment object.

Both can be deployed as a serverless function (AWS Lambda, Google Cloud Function, Azure Function) or as pods in the Kubernetes cluster. You can use this approach with any Single Page Application, not only Vue Storefront.

However, if you want to do this Vue Storefront way, you follow the Integrating payments (opens new window) document.

To create a custom integration, you need to:

• Perfectly understand payment flow in already existing integrations (opens new window),
• Create type of Payment object (opens new window) for selected PSP,
• Create and modify commercetools Payment object (opens new window) (there also might be a GraphQL approach) via middleware based on frontend actions,
• Add Payment (opens new window) to the Cart and make an Order from cart (opens new window),
• Update Payment (opens new window) based on actions,
• Prepare an endpoint for webhook from your PSP if available,
• Add Authorize, Charge and Refund, Transactions (opens new window) to the payment object (might be based on webhook),
• Check for price mismatches during every step (user might modify price from second tab),
• Update Order (opens new window) status.