How to Create and Integrate a Custom Payment Option View in Checkout?

The Custom Payment Option View feature allows developers to customize payment processes, enhancing user experience by tailoring the checkout flow to specific business requirements. This guide explains how to create, configure, and integrate a custom payment option view within the checkout process.

Create a New Component​

To begin, locate the directory where payment view components are stored:

src/views/checkout/steps/payment/options  

In this directory, create a new file for your custom payment option. This file will define the React component that serves as the view for your payment option. For example, if you are creating a payment view for "Apple Pay", create a file named apple-pay.tsx.

The name of the file should match the slug value specified in subsequent configurations to ensure proper linkage and functionality.

Add the Payment Option​

The PaymentOptionViews array stores all available payment options. To register your custom payment view, add an object to this array.

Open the following file:

src/views/checkout/steps/payment/index.tsx

Import your custom component:

import ApplePay from './options/apple-pay';

Add a new entry for the payment option:

export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
  {
pk: 101,
    slug: 'apple-pay',
payment_type: 'apple-pay',
view: ApplePay 
  }
]; 

Checkout Payment Option Interface​

The CheckoutPaymentOption interface defines the structure of payment options. Below is the complete interface:

Field	Type	Required	Description
pk	number	Optional	A unique ID for the payment option in the database. Typically used to map the payment option to backend records.
slug	string	Required	A unique identifier for the payment option, essential for distinguishing between various payment methods in the system, and it must be the same as the name of the created file.
payment_type	string	Optional	Specifies the payment type. This can be used for categorization or filtering.
view	(...args) => JSX.Element	Required	A React component that represents the UI for the payment option.
viewProps	any	Optional	Defines custom properties that can be passed to the view component for additional configuration.

Ensure that both the slug and pk fields are unique across all payment options.