Search code examples
integrationreact-nativerazorpay

Razorpay redirect to particular payment method


I am working on Razorpay integration in my React Native app. It is successfully integrated in app.

Right now it opens screen with all payment methods including Card, Netbanking, Wallet and UPI. What I want to achieve is to redirect user to specific payment method. Suppose if user selects Netbanking then instead of opening page with all payment method options it should be redirect to netbanking page of razorpay.

I googled it but didn't get specific flow to integrate it. Please let me know how to achieve it.

What I tried till now is as below:

var options = {
        description: 'Credits towards consultation',
        image: 'https://i.imgur.com/3g7nmJC.png',
        currency: 'INR',
        key: 'KEY',
        amount: '100',
        name: 'FOOO',
        method:"netbanking",
        //bank:"HDFC",
        prefill: {
          email: 'test@gmail.com',
          contact: '919191919991',
          name: 'Razorpay Software'
        },
        theme: {color: '#F37254'}
      }
      RazorpayCheckout.open(options).then((data) => {
        // handle success
        console.log("razorpay success : " + JSON.stringify(data));
        alert(`Success: ${data.razorpay_payment_id}`);
      }).catch((error) => {
        // handle failure
        console.log("razorpay success : " + JSON.stringify(error));
        alert(`Error: ${error.code} | ${error.description}`);
      });

Here, method:"netbanking", doesn't work. It always open initial page with all payment methods. I am using react-native-razorpay library for implementation.


Solution

  • If you are listing the payment methods on your page, then you can prefill the method at Razorpay based on user selection as below,

    Other checkout options;
    'prefill': {
           'email': 'test@gmail.com',
           'contact': '919191919991',
           'name': 'Razorpay Software',
           'method': 'netbanking', //card|upi|wallet
     },
    'theme': {
           'color': '#F37254',
           'hide_topbar': 'true', //To hide the back button
     }