Custom Payment Information

Implemented payment methods don't need any additional information. The user only needs to select one of the implemented payment methods and then will be prompted to enter all the required information. However, you may require more information, for example, if you want to let users enter a comment related to the payment method/checkout. This guide explains how to achieve it in Front-Commerce.

All the code that will be created in this page should live in your own module. You can either put it in your client code or create a specific module for the payment method(s). If you create a specific one, please keep in mind that you need to register it in .front-commerce.js.

note

see the payment workflows specificities for changes to the current example for each worflow

Display a custom input for a payment method

You should register a new component in getAdditionalDataComponent.js by following this template:

my-module/web/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js

import CustomComponent from "theme/modules/CustomComponent/CustomComponent";

const ComponentMap = {
  "<method_code>": CustomComponent,
};

// ... the rest of the code should be kept intact

The Custom component referenced here should be created in your own module, and display the additional information of your payment method to the user.

my-module/web/theme/modules/CustomComponent/CustomComponent.js

import React from "react";
import SubmitPayment from "theme/modules/Checkout/Payment/SubmitPayment";

const CustomComponent = ({
  onAuthorize,
  value,
  gscAccepted,
  error,
  method,
}) => {
  const [comments, setComments] = useState(value?.comments ?? "");

  return (
    <div className="custom-component">
      <input
        onChange={(event) => setComments(event.target.value)}
        value={comments}
        type="text"
      />
      <SubmitPayment
        gscAccepted={gscAccepted}
        onSubmit={() => {
          onAuthorize(gscAccepted ? { comments } : null);
        }}
        error={error}
      />
    </div>
  );
};

export default CustomComponent;

Things to understand here:

• The SubmitPayment component is a common component across all payment methods to ensure consistency in how methods are managed.
• method the current selected method.
• value contains initial additional data (usually it is always null).
• onAuthorize should be called with the additional data on <SubmitPayment>'s on submit method.
• gscAccepted whether or not the user have accepted the general sales conditions (checkbox above the "Place my order" button). Just forward this to the <SubmitPayment> component.
• error an error object if there is an error. Just forward this to the <SubmitPayment> component.

In this example we're only setting a comments additional text input, but you can do fancier things like fetching a list for the user to pick from GraphQL and displaying them here.

Updating an existing method Additional Data

Sometimes you may need to add an extra field to the additional data of an existing payment method. You first need to check if this payment method already has an AdditionalDataComponent registered.

• If AdditionalDataComponent has been registered, you should then override the AdditionalDataComponent and add your custom modifications.
• If no AdditionalDataComponent is registered, you can then follow the Display a custom input for a payment method docs.

Adding a field to all payment methods

You should enhance the AdditionalDataComponent by following this template:

my-module/web/theme/modules/Checkout/Payment/AdditionalPaymentInformation/getAdditionalDataComponent.js

import CustomEnhancer from 'theme/modules/CustomModule/CustomEnhancer'

const ComponentMap = {
  ..., // registered additional data
};

const getAdditionalDataComponent = (method) => {
  const Component = ComponentMap[method.code];
  return CustomEnhancer(Component);
};

export default getAdditionalDataComponent;

The CustomEnhancer referenced here should be created in your own module. It should display the base component sent to it and add additional data fields and override the onAuthorize method.

my-module/web/theme/modules/CustomModule/CustomEnhancer.js

import React from "react";
import SubmitPayment from "theme/modules/Checkout/Payment/SubmitPayment";

const CustomEnhancer =
  (BaseComponent) =>
  ({ onAuthorize, value, gscAccepted, error, method }) => {
    const [comments, setComments] = useState(value?.comments ?? "");

    return (
      <div className="custom-enhancer">
        <input
          onChange={(event) => setComments(event.target.value)}
          value={comments}
          type="text"
        />
        {BaseComponent ? (
          <BaseComponent
            onAuthorize={(additionalData) => {
              onAuthorize({ ...additionalData, comments });
            }}
            value={value}
            gscAccepted={gscAccepted}
            error={error}
            method={method}
          />
        ) : (
          <SubmitPayment
            gscAccepted={gscAccepted}
            onSubmit={() => {
              onAuthorize(gscAccepted ? { comments } : null);
            }}
            error={this.props.error}
          />
        )}
      </div>
    );
  };

export default CustomEnhancer;