Introduction

Decentro's UPI payment SDK is designed to help businesses integrate UPI payment into their platforms effortlessly. Our SDK is meticulously designed to simplify the process of integrating UPI payments, ensuring a smooth experience for both businesses and end users. Our SDK's user-friendly interface, comprehensive pre-built libraries, and clear documentation will guide you every step of the way.

For businesses with headaches of complex API integration-related challenges, Decentro's UPI Payment SDK empowers to effortlessly incorporate robust payment capabilities into applications. In this documentation, you'll find detailed insights into leveraging our SDK for Android, iOS, and React applications.

Note: This document assumes that you possess a foundational understanding of React and have established a React project beforehand. For those who are new to React, we suggest referring to the Getting Started guide before proceeding.

Key features

• Supports the latest UPI Deeplinks APIs.
• Offers a consistent user experience, with low-level details handled by the SDK.
• Scalable and performant architecture for efficient processing of payments.
• Offers accurate polling statuses on time to reduces the transaction TAT.
• Easy integration with React Native applications.

Getting Started

Installation

Install with npm

npm i decentro-collection-sdk

Install with yarn

yarn add decentro-collection-sdk

Implementation

The npm package installed in the previous step contains two major components to be used by the client.

1. With customized UI

For businesses that does not want to implement their own UI screen, an optional checkout flow is provided by Decentro to enhance the end customer payment experience.

Sample usage

import { UIComponent } from "decentro-collection-sdk";

function App() {

 const urlHeader = {
  client_id: "String",
  client_secret: "String",
  module_secret: "String",
  provider_secret: "String",
 };

// API body

 const urlBody = {
  reference_id: "String",
  payee_account: "Int", //payee account number
  amount: "Int", // amount to be deducted
  purpose_message: "String", // payment message
  generate_qr: "Int", // 0 = do not generate QR , 1 = to generate QR
  expiry_time: "Int", //expiry time for payment
  customized_qr_with_logo: "Int",
  generate_uri: "Int", // to generate the deep links 
};


 return (
  <div className="App">
   <UIComponent urlHeaderData={urlHeader} urlBodyData={urlBody} />
  </div>
 );
}

export default App;

2. Without customized UI

For businesses that prefer to have their own custom checkout flows, they can simply consume the collections SDKs and start collecting the payment.

Sample usage

import { useWithoutUI } from "decentro-collection-sdk";

function App() {

 const urlHeader = {
  client_id: "String",
  client_secret: "String",
  module_secret: "String",
  provider_secret: "String",
 };

// API body

 const urlBody = {
  reference_id: "String",
  payee_account: "Int", //payee account number
  amount: "Int", // amount to be deducted
  purpose_message: "String", // payment message
  generate_qr: "Int", // 0 = do not generate QR , 1 = to generate QR
  expiry_time: "Int", //expiry time for payment
  customized_qr_with_logo: "Int",
  generate_uri: "Int", // to generate the deep links
 };

 let data = useWithoutUI({
  polling: true, //  true = will start polling the data , false = will get data only once
  urlHeaderData: urlHeader,
  urlBodyData: urlBody,
 });

console.log("data from polling => ", data);

 return (
  <div className="App">
 </div>
 );
}

export default App;