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.
The SDK for sandbox and production are different. Both are listed below.
# Step 1: Initialize the Core SDK
Make sure you have included the Cashfree core SDK in your file.
orderToken` is the same which we generated in the previous step when creating an order.
options` are handler methods which Cashfree SDK will invoke once the payment has completed.
|`||Function (callback)||Yes||Handle payment success|
|`||Function (callback)||Yes||Handler for payment failure|
|`||Function (callback)||Yes||Handler when there in an error while processing payment|
Here is an example demonstrating how to initialise the `
# 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
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.
|data-card-number||Holds card number|
|data-card-expiry-mm||Holds card expiry month in MM. Example 01 for January and 12 for December. Has to be of length == 2.|
|data-card-expiry-yy||Holds card expiry year in YY format. Example 21 for 2021, 22 for 2022 etc. Has to be of length == 2.|
|data-card-cvv||Holds card cvv. Recommended to use it as type="password"|
|data-card-holder||Holds card holder name|
## 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.
The only attribute we need for upi intent is data-upi-provider.
|data-upi-provider||Hold the identifier for the mobile app. Values can be `|
## 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.
There is only element attribute required for UPI checkout flow - the UPI id.
|data-upi-id||Holds the upi id of the customer|
## 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.
|data-app-name||Holds the app name. Values can be `|
|data-app-phone||Phone number of the customer|
Below is a sample payment form to collect app details. We need basically need the two attributes - `
data-app-name` and `
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.
|data-provider||Holds the app name. Values can be `|
|data-paylater-phone||Phone number of the customer|
Below is a sample payment form to collect paylater details. We need basically need the two attributes - `
data-provider` and `
## 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.
|data-emi-number||Holds card number|
|data-emi-expiry-mm||Holds card expiry month in MM. Example 01 for January and 12 for December. Has to be of length == 2.|
|data-emi-expiry-yy||Holds card expiry year in YY format. Example 21 for 2021, 22 for 2022, etc. Has to be of length == 2.|
|data-emi-cvv||Holds card CVV. Recommended to use it as type="password"|
|data-emi-bank||Holds Bank Name for the corresponding card.Values can be `|
|data-emi-tenure||Holds Tenure for the EMI payment.
## 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.
|data-cardless-provider||Holds the app name. Values can be `|
|data-cardless-phone||Phone number of the customer|
Below is a sample payment form to collect cardless EMI details. We need basically need the two attributes - `
data-cardless-provider` and `
## 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.
|data-netbanking-code||Holds the bank code. The bank code is given by Cashfree’s for different banks. It ranges from 3001 to 3999. For example HDFC has a code of 3021 See [here](🔗) for more details.|
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.
For further instructions please visit the [official npm page](🔗)