vue-storefront-1 icon indicating copy to clipboard operation
vue-storefront-1 copied to clipboard

[RFC] Payment Gateway Integration

Open sandermangel opened this issue 5 years ago • 5 comments

One of the more challenging parts of the checkout has been payment gateways. This RFC is an effort to streamline integrations, offering standardized workflows.

Since integrations like these touch the stack on every level and need tight integration in both the frontend, as well as the underlying e-commerce engine, a clear separation of concerns should be made. The frontend and middleware should be as agnostic as possible, containing little to no business logic.

This RFC focusses more on the high-level architecture than specific implementation details, although these are welcome of course.

Integration divided into actions

For a generic Payment Gateway, assuming we're dealing with online payments (Credit Card, Sofort, iDeal, etc), the integration can be divided into various actions. Below an overview of the actions with a short introduction into requirements and challenges.

1. Fetching payment methods

Payment methods are to be displayed in the frontend in the Checkout UI. These payment methods might be simple options or have their own UI like a Credit Card asking for card number and name. The methods to be displayed may vary depending on variables of the order being created; subtotal, billing country or the types of items.

2. Communication with Gateway

The selected payment method, with any user input added, is bundled with order details and send of to the Payment Gateway. Here it's important to note this has to be done encrypted. Optionally the user might need to be redirected to an external page to finalize the payment.

3. Payment status callback

Once the payment has been processed by the payment gateway a callback is done to the originating platform. This updates the order registering a payment, or a failure.

New proposed integration

The new flow has a clear separation of concerns where business logic is focussed in the underlying e-commerce platform, the middleware merely transforms data and the VueJS app handles presentation.

Payment Gateway Integration diagram

sandermangel avatar Jul 03 '19 09:07 sandermangel