👨‍💻Getting Started with WebUPI

WebUPI is a proposed browser API that allows web applications to request payment via UPI (Unified Payments Interface). It provides a standardized way for web applications to interact with a user's UPI app on their device.

Using WebUPI

To start using WebUPI, you first need to make sure that the user's browser supports it. Here's how you can check:

if (typeof window.webUPI !== 'undefined') {
    // WebUPI is supported
} else {
    // WebUPI is not supported
}

Once you've confirmed that the user's browser supports WebUPI, you can start using its APIs.

Enabling WebUPI

Before you can use WebUPI, you need to enable it by calling the webUPI.enable() function:

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

This will prompt the user to give permission for the web application to use the UPI capabilities of their device. If the user denies permission or cancels, an error will be thrown.

Making a Payment

To make a payment, you need to call the webUPI.sendPayment() function with a UPI URI:

try {
    const upiURI = "upi://pay?pa=example@upi&pn=Example&mc=0000&tid=000000000000&tr=TestTransaction&tn=TestTransaction&am=10.01&cu=INR&url=http://example.com";
    await webUPI.sendPayment(upiURI);
} catch (error) {
    // Payment failed
    console.log(error);
}

This will prompt the user's UPI app to make a payment. If the payment fails, an error will be thrown.

Making a Payment Request

To make a payment request, you need to call the webUPI.requestPayment() function with a UPI URI:

try {
    const upiURI = "upi://pay?pa=example@upi&pn=Example&mc=0000&tid=000000000000&tr=TestTransaction&tn=TestTransaction&am=10.01&cu=INR&url=http://example.com";
    await webUPI.requestPayment(upiURI);
} catch (error) {
    // Payment request failed
    console.log(error);
}

This will prompt the user's UPI app to accept a payment request. If the payment request fails, an error will be thrown.

Remember to handle errors gracefully to provide a good user experience. For more information on error handling, see the Error Handling section.