Skip to main content
The Element SDK enables merchants to build a custom checkout experience while securely processing payments through Cashfree for multiple payment methods such as cards, UPI, net banking, wallets, and other supported methods. While merchants can use Seamless APIs to process payments via their own fully customised UI, the Element SDK simplifies the implementation by offering ready-to-use secure components and utilities for collecting payment information and initiating transactions.
The Element SDK is available for both mobile (Android and iOS) and web-based flows.

​
Why use the Element SDK

The Element SDK offers the following benefits:
  • Create a fully customised checkout experience that aligns with your brand.
  • Support multiple payment methods through a single integration.
  • Simplify development compared to a fully API-driven integration.
  • Maintain PCI compliance. If you’re not PCI DSS compliant, use the SDK card number component to collect card details.

​
How it works for card payments

The Element SDK handles card payments through two checkout flows: plain-card checkout for new card entries and saved-card checkout for returning customers.

​
Plain-card checkout

The plain-card checkout process follows these steps:
  1. If the merchant is PCI DSS compliant, they can build a custom checkout UI and collect card details such as the card number, CVV, and expiry on their checkout.
  2. If the merchant isn’t PCI DSS compliant, they can still build a custom checkout UI, but must use the Element SDK card number component to collect the card number and collect other card details such as CVV and expiry on their own checkout.
  3. The merchant can also display a checkbox requesting customer consent for saving the card.
  4. Once the customer enters the card details, provides consent, and clicks submit, call the SDK with these details to initiate the payment.
  5. For the OTP authentication stage, the SDK offers a Native OTP experience with auto read and auto submit functionality.

​
Saved-card checkout

You have two options to render saved cards:
  • Call the Element SDK to render the list of cards on your checkout and process payments.
  • Use the Get All Saved Cards API to fetch the list of saved instruments and render them yourself. Once the customer selects a card, pass its instrument_id to the Order Pay API.
Saved-card transactions support CVV-less and Native OTP with auto-read and auto-submit to ensure a truly seamless experience for customers. The following sample checkout demonstrates a card number field powered by the Cashfree Elements SDK. The merchant owns and designs the rest of the checkout experience, which matches the quality of a fully seamless merchant-built checkout.

Card number field powered by the Element SDK

Card number field powered by the Element SDK
Card number field powered by the Element SDK

​
Additional merchant capabilities

The SDK provides the following capabilities for merchants:
  • Offer eligibility and payment availability: The SDK sends card-BIN details in a callback. Use this data to check supported payment methods or offer eligibility.
  • Native OTP experience: During the authentication stage, the Native OTP screen appears, which auto-reads the OTP from the SMS and auto-submits it. This works for both plain-card and saved-card flows.
The Element SDK enables merchants to build a fully customised checkout UI while maintaining compliance.

​
Getting started

To get started with the Element SDK:
  • Refer to the Element SDK for platform-specific guides.
  • Contact your Cashfree account manager to enable the Element SDK if it is not already active on your account.