# 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.

## <mark style="color:red;">Create a New Component​</mark> <a href="#create-a-new-component" id="create-a-new-component"></a>

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`.

{% hint style="info" %}
The name of the file should match the `slug` value specified in subsequent configurations to ensure proper linkage and functionality.
{% endhint %}

## <mark style="color:red;">Add the Payment Option​</mark> <a href="#add-the-payment-option" id="add-the-payment-option"></a>

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 
  }
]; 
```

## <mark style="color:red;">Checkout Payment Option Interface​</mark> <a href="#checkoutpaymentoption-interface" id="checkoutpaymentoption-interface"></a>

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

<table><thead><tr><th width="143.3359375">Field</th><th width="164.92578125">Type</th><th width="99.23828125">Required</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>pk</code></strong></td><td><code>number</code></td><td>Optional</td><td>A unique ID for the payment option in the database. Typically used to map the payment option to backend records.</td></tr><tr><td><strong><code>slug</code></strong></td><td><code>string</code></td><td>Required</td><td>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.</td></tr><tr><td><strong><code>payment_type</code></strong></td><td><code>string</code></td><td>Optional</td><td>Specifies the payment type. This can be used for categorization or filtering.</td></tr><tr><td><strong><code>view</code></strong></td><td><code>(...args) => JSX.Element</code></td><td>Required</td><td>A React component that represents the UI for the payment option.</td></tr><tr><td><strong><code>viewProps</code></strong></td><td><code>any</code></td><td>Optional</td><td>Defines custom properties that can be passed to the view component for additional configuration.</td></tr></tbody></table>

{% hint style="info" %}
Ensure that both the `slug` and `pk` fields are unique across all payment options.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/tutorials/project-zero/how-to-create-and-integrate-a-custom-payment-option-view-in-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.