Front-Commerce Payments

Front-Commerce contains mechanisms that allow to process payments in a platform-agnostic way. Payment interactions occur from Front-Commerce GraphQL/Node.js middleware so that remote systems (OMS, ERP softwares …) will only receive Orders when they are paid.

Payment platforms integrated as a Front-Commerce Payment are compatible with every eCommerce platform that Front-Commerce supports. They also are aimed at being as frictionless as possible for Customers, so payment inputs are usually embedded in the checkout page to prevent redirecting Customers to third-party providers. Per their nature follow the Direct Order payment workflow.

Supported Payment platforms

Front-Commerce Payments are currently available for the platforms below, learn how to install each one of them from the related documentation page:

If you want to use a Payment platform not yet listed above, please contact us so we can provide information about a potential upcoming native support for it.

How is a Front-Commerce Payment method integrated with eCommerce platforms

Front-Commerce handle payments directly, without the need for a payment integration in your eCommerce system. However, Front-Commerce provides a generic Payment method tailored for your eCommerce platform so that you can still benefit from its order management features and workflows.

From your eCommerce system’s perspective, a payment made with Front-Commerce is integrated in a similar way than checks / wire payments (sometimes named “offline payment”). The difference is that Front-Commerce will update orders statuses upon receiving automatic notifications from the payment service.

Implement a new Front-Commerce Payment method

Work In Progress This section is not as detailed as we would love it to be. Please let us know if you need further information before we improve it.

Front-Commerce allows you to implement your own payment method. New embedded payment methods have to be registered from a GraphQL module. Let’s create a new “PWAy” payment module for a fictive payment provider.

  1. create a new GraphQL module
  2. add a depency upon "Magento2/Checkout"

    export default {
      namespace: "Payments/PWAy",
      dependencies: ["Magento2/Checkout"]
    };
    
  3. register the payment method from the module’s contextEnhancer

    export default {
      namespace: "Payments/PWAy",
      dependencies: ["Magento2/Checkout"],
      contextEnhancer: ({ loaders }) => {
        // [...] initialization here
    
        const chargeTransactionForOrder = (paymentData, orderId) => {
           /* … the actual code that will charge the transaction (might delegate to a loader) … */
        };
    
        const METHOD_CODE = "pway_awesomecheckout";
        const METHOD_TITLE = "PWAy";
        loaders.Payment.registerEmbeddedPaymentMethod(
          METHOD_CODE,
          METHOD_TITLE,
          chargeTransactionForOrder
        );
    
        return {}; // you may export loaders here in case the payment provides custom Queries (to fetch a payment token for instance)
      }
    };
    
We encourage you to investigate payment- modules’ source code from Front-Commerce’s core to learn about advanced patterns.
Edit on GitHub