No momento, esta página não está disponível em português
Payment-method icon

Web Component

Add UPI to your Components integration.

How you add UPI depends on your integration.

Choose the server-side flow that your integration uses:

Sessions flow
Advanced flow

Start integrating with Sessions flow Component

Choose your version
6.5.1

Requirements

Requirement Description
Integration type Make sure that you have an existing Sessions flow Web Components integration.
Checkout API Make sure that you use Checkout API v68 or later.
Setup steps Before you begin, add UPI in your Customer Area.

Add additional parameters to your /sessions request

You do not need to add any parameters when you create a payment session.

Import UPI

When you import Adyen Web, include UPI.

Import
Expand view
Copy link to code block
Copy code
Copy code
import { AdyenCheckout, UPI } from '@adyen/adyen-web';

Add additional configuration for UPI

You do not need to add any configuration parameters for UPI.

Initialize the Component for UPI

To initialize UPI, use the UPI class.

Initialize the Component
Expand view
Copy link to code block
Copy code
Copy code
const upiComponent = newUPI(checkout,
    {
    
    // The configuration object for UPI that you created.
    
    // Mount the Component to a container.
    } ).mount('#upi-container')

Test and go live

Depending on your account setup, you may have access to the UPI simulator which you can use to test your UPI integration. Contact your Account Manager or our Support Team if you have questions about the simulator.

You can also use your personal account on a UPI app to test your integration by making live payments with a low value.