📘

Build your own UI (BYOU)

Element is our SDK solution for accepting payments when merchants want to display their own UI.

Element is our SDK solution for accepting payments when merchants want to display their own UI. Element works by binding itself to your UI elements. It can then process payments by using the values from those elements and initiating payment processing.

# Resources

The SDK for sandbox and production are different. Both are listed below.

• **Sandbox:** `<script src="https://sdk.cashfree.com/js/core/1.0.26/bundle.sandbox.js"></script>`

• **Production:** `<script src="https://sdk.cashfree.com/js/core/1.0.26/bundle.prod.js"></script>`

# Step 1: Initialize the Core SDK

Make sure you have included the Cashfree core SDK in your file.

The `orderToken` is the same which we generated in the previous step when creating an order.

The `options` are handler methods which Cashfree SDK will invoke once the payment has completed.

Here is an example demonstrating how to initialise the `options`.

# Step 2: Introducing Elements

When you use the core SDK you will be rendering the payment UI by yourself. To help the SDK capture these details for payment processing, you have to tag these with specific elements which the SDK understands.

There are two ways you can configure elements in the SDK. You can either pass them individually for throw an array.

**Passing a single element**

Passing an array

The sdk will emit the `change` event which will help you ensure that the input provided is valid. For example - if the card number passes basic checks like Luhn check etc. In the next step, we will show you how to accept payments for different payment instruments.

# Step 3: Building components

## Card

To accept card payments, you must ask the customer for their card details - card number, expiry month, expiry year, cvv and cardholder name. Prepare your html as below.

As you can see here the element created is `pay-card`. This element is a collection of HTML form inputs with each having a custom attribute. These input HTML elements capture the payment information.

Once you have the html form ready, here is a sample javascript to verify details and initiate payment.

## UPI Intent

The SDK allows you to capture UPI payments through different methods - intent, a collect request or by creating a QR code. To build an intent workflow, you need to tell the SDK which app is calling the intent.

To setup api-intent we will just add the same javascript code which helps the SDK identify the html element for intent.

The only attribute we need for upi intent is data-upi-provider.

## UPI Collect

UPI collect based payments refer to customers entering the UPI ID (8987123112@ybl or rohit@okhdfc). We will then send a notification to the customer on their UPI application to approve this payment. Once the customer approves the payment in the upi mobile application, and has enough funds the payment will be completed.

Here is a simple html to render this payment form.

To process payment here is the sample javascript code.

There is only element attribute required for UPI checkout flow - the UPI id.

## UPI QR Code

You can also choose to display a QR code which can be scanned by any UPI app to complete the payment. We do not require any input attributes to build the QR code.

## Mobile applications/Wallets

The SDK allows you to pay using different wallets and mobile applications, for instance - Amazon Pay, Google Pay, PhonePe, Jio money, Paytm, Airtel money, Freecharge, etc.

There are two attributes which we need to complete payments for these wallets - the wallet name and customers phone number.

Below is a sample payment form to collect app details. We need basically need the two attributes - `data-app-name` and `data-app-phone`.

The javascript code is similar to the previous flows.

## BNPL

The SDK allows you to pay using different paylater applications, for instance - Lazypay, ZestMoney, Flexipay, Kotak, OlaPostpaid, etc.

There are two attributes that we need to complete payments for these wallets - the provider name and customers phone number.

Below is a sample payment form to collect paylater details. We need basically need the two attributes - `data-provider` and `data-paylater-phone`.

The javascript code is similar to the previous flows.

## Credit Card EMI

To accept credit card EMI payments, you must ask the customer for the following details - card number, card expiry month, card expiry year, card CVV, bank name, and tenure.

The javascript code is similar to the previous flows.

## Cardless EMI

The SDK allows you to pay using different cardless applications. For example - Zestmoney, Flexmoney.

There are two attributes that we need to complete payments for cardless EMI - the provider name and customers phone number.

Below is a sample payment form to collect cardless EMI details. We need basically need the two attributes - `data-cardless-provider` and `data-cardless-phone`.

The javascript code is similar to the previous flows.

## Net Banking

If you want to accept payment using net banking, you will have to build out elements for net banking. There is only attribute for net banking that we receive - the bank code.

The javascript code to process net banking payments is again similar to previous flows.

Here we are showing you another way to initiate a Cashfree element.

# Confirm payment

Once you received a response on either `onPaymentSuccess` or `onPaymentFailure` you should make an api call to your backend server to confirm the status of the payment. We will see that in the next step.

# NPM

For further instructions please visit the [official npm page](🔗)