--- title: "UPI Autopay for Web" description: "Offer recurring payments to your shoppers with our UPI Autopay integration." url: "https://docs.adyen.com/payment-methods/upi/upi-autopay/web" source_url: "https://docs.adyen.com/payment-methods/upi/upi-autopay/web.md" canonical: "https://docs.adyen.com/payment-methods/upi/upi-autopay/web" last_modified: "2026-05-11T16:04:23+02:00" language: "en" --- # UPI Autopay for Web Offer recurring payments to your shoppers with our UPI Autopay integration. UPI Autopay enables Indian shoppers to set up recurring payments through their UPI app (for example, Google Pay, PhonePe, and Paytm). ## Requirements | Requirement | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have an existing integration for one of the following: - [Web components integration for advanced flow](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components) - [Web components integration for sessions flow](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) - [Web drop-in integration for advanced flow](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Drop-in) - [Web drop-in integration for sessions flow](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in) Make sure you integrate to the latest web version to display the mandate information on UPI Autopay [v6.22.0](https://github.com/Adyen/adyen-web/releases/tag/v6.22.0). | | **Setup** | Backend integration for recurring flows: Ensure your backend implements all UPI Autopay recurring flows - including pre-debit notifications, recurring payments and cancelling billing plans. This page only covers Web SDK configuration for the signup flow. Refer to the [API-only documentation](/payment-methods/upi/upi-autopay/api-only) for full backend requirements. | ## Shopper experience With Adyen’s UPI Autopay solution, you can give your shoppers different payment options for signing up on the recurring plan, namely UPI Collect, UPI QR, and UPI Intent: * **Collect flow**: UPI apps only show the mandate amount. The shopper authorizes the mandate with their PIN. 1. The shopper gets a push notification on their phone. 2. The Autopay mandate details are shown in the UPI app for review. 3. The shopper enters their UPI PIN to authorize the mandate. 4. The mandate is created and the first payment is completed. * **QR and Intent flows**: UPI apps show both the mandate amount and the first transaction amount. 1. The shopper scans the QR code, or in the Intent flow launches the UPI app. 2. The Autopay mandate details are shown in the UPI app for review. 3. The shopper enters their UPI PIN to authorize the mandate. 4. The mandate is created and the first payment is completed. From [Adyen Web SDK v6.22.0](https://github.com/Adyen/adyen-web/releases/tag/v6.22.0) the UPI Autopay component shows mandate information directly in the checkout. The result is: * Shoppers see clear mandate details before authorizing. * Information is consistent across Collect, Intent, and QR flows. * Less confusion and improved conversion. ### Payment examples * The shopper makes an upfront payment and a higher mandate is created.\ ![higher mandate](/user/pages/docs/08.payment-methods/86.upi/16.upi-autopay/01.web/image1.png) * The shopper does not make an upfront payment, only a mandate is created.\ You can use this to sign up shoppers for free trials, or to save the payment details for future use. In this case, a small minimum amount is authorized and refunded automatically. Pass a minimum value of 2 INR in the `additionalAmount` field in your payment request. Note that you need to show information about the authorization and refund outside of the component based on your requirements for tokenizing the payment details. For example: "To enable a free trial, 2 INR will be charged and refunded".\ ![only mandate](/user/pages/docs/08.payment-methods/86.upi/16.upi-autopay/01.web/image3.png) ### Mandate information box When a mandate is present, the new UPI component renders an information box with details. The standard base text of "You’re setting up a UPI Autopay recurring payment..." is followed by dynamic text that depends on: * `amount`: The transaction amount (can be known or unknown). * `mandate.amount`: The mandate limit (always known). * `frequency`: The payment monthly, weekly, or ad hoc. * `amountRule`: Either **exact** or **max**. Examples of messages: | Type | Amount[](#currency) | Mandate | Frequency | Rule | Shopper message | | --------------------------------------------------- | ------------------- | ------- | --------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | Monthly subscription with fixed pricing | 100 | 100 | month | exact | You’re setting up a UPI Autopay recurring payment (₹100/month). | | Monthly subscription with potential upgrades | 100 | 200 | month | max | You’re setting up a UPI Autopay recurring payment (₹100). You’ll approve a higher limit to allow future plan changes (up to ₹200/month). | | Flexible monthly subscription with variable pricing | Unknown | 200 | month | max | You’re setting up a UPI Autopay recurring payment (up to ₹200/month). | | Weekly subscription with fixed pricing | 100 | 100 | week | exact | You’re setting up a UPI Autopay recurring payment (₹100/week). | | Weekly subscription with potential upgrades | 100 | 200 | week | max | You’re setting up a UPI Autopay recurring payment (₹100). You’ll approve a higher limit to allow future plan changes (up to ₹200/week). | | Flexible weekly subscription with variable pricing | Unknown | 200 | week | max | You’re setting up a UPI Autopay recurring payment (up to ₹200/week). | | Ad-hoc subscription with fixed pricing | 100 | 100 | adhoc | exact | You’re setting up a UPI Autopay recurring payment (₹100 as presented). | | Ad-hoc subscription with potential upgrades | 100 | 200 | adhoc | max | You’re setting up a UPI Autopay recurring payment (₹100). You’ll approve a higher limit to allow future plan changes (up to ₹200 as presented). | | Flexible ad-hoc subscription with variable pricing | Unknown | 200 | adhoc | max | You’re setting up a UPI Autopay recurring payment (up to ₹200 as presented). | ### Customize the mandate information box You can [override the default translations](https://docs.adyen.com/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in\&version=6.21.0#localization) for the mandate information box: **Example of customization** ```json { "upi.mandate.intro": "You're setting up a UPI Autopay recurring payment", "upi.mandate.max.extraText": "You'll approve a higher limit to allow future plan changes", "upi.mandate.upTo": "up to %{amount}", "upi.mandate.frequency.monthly": "/month", "upi.mandate.frequency.weekly": "/week", "upi.mandate.frequency.adhoc": "as presented" } ``` ## Integration steps ### Tab: Sessions flow This flow is applicable to both Web Drop-in and Components: 1. Pass the followin [Autopay-specific fields](/payment-methods/upi/upi-autopay/api-only#billing-plan) in your [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions) request. * The complete `mandate` object * `recurringProcessingModel` * `shopperReference` * `storePaymentMethod` 2. Pass the [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions) response to the `AdyenCheckout` and then provide the same mandate object to the UPI Component's configuration. 3. Mount the Component into your application. **Example /sessions request** ```JavaScript const mandate = { amount: '30000', frequency: 'monthly', amountRule: 'max' }; const session = await createSession({ amount, countryCode, mandate, // ... other session configuration }); const checkout = await AdyenCheckout({ environment: process.env.CLIENT_ENV, clientKey: process.env.CLIENT_KEY, session }); const upi = new UPI(checkout, { mandate }); upi.mount('.upi-component'); ``` ### Tab: Advanced flow This flow is applicable to both Web Drop-in and Components: 1. Pass the `mandate` object to the UPI Component configuration. 2. Initiate your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request within the `onSubmit` callback. Pass the following [Autopay-specific fields](/payment-methods/upi/upi-autopay/api-only#billing-plan) in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * The complete `mandate` object * `recurringProcessingModel` * `shopperReference` * `storePaymentMethod` 3. Mount the component into your application. **Example /payments request** ```JavaScript const paymentMethodsResponse = await getPaymentMethods({ amount, shopperLocale }); const mandate = { amount: '30000', frequency: 'monthly', amountRule: 'max' }; const checkout = await AdyenCheckout({ amount, countryCode, paymentMethodsResponse, locale: shopperLocale, clientKey: process.env.CLIENT_KEY, environment: process.env.CLIENT_ENV, onSubmit: async (state, component, actions) => { try { const { action, resultCode } = await makePayment({ ...state.data, mandate }); if (!resultCode) actions.reject(); actions.resolve({ resultCode, action }); } catch (error) { console.error('## onSubmit - critical error', error); actions.reject(); } } }); const upi = new UPI(checkout, { mandate }); upi.mount('.upi-component'); ``` ## Test and go live Reach out to your Adyen contact to set up your test environment for UPI Autopay. You can use the following magic amounts to test various transaction outcomes. | Scenario | Description | Magic amount | | ------------------------------------ | ----------------------------------- | ------------ | | **Signup – Success** | Shopper signup successful | 7005 | | **Signup – Failure** | Shopper signup unsuccessful | 7006 | | **Pre debit notification - Success** | Pre debit notification successful | 7005 | | **Pre debit notification - Failure** | Pre debit notification unsuccessful | 1401 | | **Recurring Charge – Success** | Successful recurring charge | 7005 | | **Recurring Charge – Failure** | Failed recurring charge | 7008 | | **Mandate Revoke – Success** | Successful mandate revoke | 7008 | | **Mandate Revoke – Failure** | Failed mandate revoke | 7010 | | **Refund – Success** | Successful refund | 2010 | | **Refund – Failure** | Failed refund | 2011 | Before you can accept live UPI Autopay payments, reach out to your Adyen contact to begin the onboarding process. ## See also * [API only integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=API%20only) * [Webhooks](/development-resources/webhooks) * [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)