> For the complete documentation index, see [llms.txt](https://ninjapay.gitbook.io/webupi-protocol/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ninjapay.gitbook.io/webupi-protocol/webupi-providers/for-providers/implementing-webupi-as-a-upi-provider.md).

# Implementing WebUPI as a UPI Provider

Ninjapay

Protocol spec — [Nalanda Naidu](mailto:undefined) CTO — <https://ninjapay.in/>

[WebUPI Guide](https://www.notion.so/WebUPI-Guide-32dd45d18c7444f5a95b8126dff9d3a6?pvs=21)

***

***

## Get Started

WebUPI is designed to allow web applications to interact seamlessly with UPI enabled applications. This guide is intended to help UPI providers implement the WebUPI API.

#### **1. WebUPI.enable()**

The first step in the implementation process is to establish a method to enable the WebUPI provider. This method should prompt the user for permission to use the WebUPI capabilities. After that, you are free to implement any of the other API methods.

#### Method

```jsx

async function enable(): void;

```

#### Example

```jsx

try {
  if(typeof window.webUPI !== 'undefined') {
    await window.webUPI.enable();
  }
}
catch(error) {
  // User denied permission or cancelled
  console.log(error);
}

```

Join us in revolutionizing online payments with WebUPI!

***

#### **2. WebUPI.sendPayment()**

This method enables the user to send a payment. The web application provides a UPI URI for the payment.

#### Method

```jsx

async function sendPayment(args: SendPaymentArgs): SendPaymentResponse;

```

#### Parameters

```jsx

interface SendPaymentArgs {
  upiUri: string; // the UPI URI you'd like the user to pay.
  callback_url?: string; // webhook url to send status response upon payment.
}

```

#### Response

```jsx

interface SendPaymentResponse {
  transactionId: string;
}

```

#### Example

```jsx

const upiUri = "upi://pay?pa=example@upi&pn=Example&mc=0000&tid=000000000000&tr=Transaction123456789012345&tn=TestTransaction&am=10.01&cu=INR&mam=null";
const result = await window.webUPI.sendPayment(upiUri);

```

***

#### **3. WebUPI.makePaymentRequest()**

This method allows the user to generate a UPI URI to be used by the web app.

#### Method

```jsx

async function makePaymentRequest(args: RequestPaymentArgs): RequestPaymentResponse;

```

#### Parameters

```jsx

interface RequestPaymentArgs {
  payeeVpa: string;
  payeeName: string;
  transactionId: string;
  transactionNote: string;
  transactionAmount: number;
  currencyCode: string;
  minimumAmount: number | undefined;
  maximumAmount: number | undefined;
}

All amounts are denominated in the currency code provided.

```

#### Response

```jsx

interface RequestPaymentResponse {
  upiUri: string;
}

```

#### Code Example

```jsx

await webUPI.enable();
const paymentRequest = await webUPI.makePaymentRequest({
  payeeVpa: "example@upi",
  payeeName: "Example",
  transactionId: "Transaction123456789012345",
  transactionNote: "TestTransaction",
  transactionAmount: 10.01,
  currencyCode: "INR",
  minimumAmount: undefined,
  maximumAmount: undefined
});

```

***

#### **4. Error Handling**

All methods should throw an error when the operation cannot be completed. This allows applications to handle failures gracefully.

Please note that this is a high-level guide and specific implementation details may vary depending on the specific requirements of the UPI provider. Always refer to the official UPI documentation and ensure compliance with all relevant regulations and guidelines.

***

#### NPCI UPI Linking Specs

{% file src="/files/S9czNGrMkRXNj2626zRZ" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://ninjapay.gitbook.io/webupi-protocol/webupi-providers/for-providers/implementing-webupi-as-a-upi-provider.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.