Razorpay Checkout not opening in IOS

[varsh8th]

Description

Razorpay checkout not opening in mobile app, but only in ios. It works fine in android

Razorpay SDK Version :

Bundle version string : 1.2.13 react-native-razorpay": "^2.2.7"

Xcode Version :

Version 12.2 (12B45b)

What you did:

Tried to use checkout by clicking on a button in the app

What happened:

Nothing happens, the loader circles a little but other than that the checkout screen never opens. At least in simulator sometimes it pops up but in production on any device it doesn't open.

Steps To Reproduce

https://www.loom.com/share/bf4b55f639de403baee817824fea837a

Suggested solution:

Code example, screenshot, or link to a repository:

fetch(https://api.razorpay.com/v1/orders, { method: 'POST', headers: new Headers({ Accept: 'application/json', 'Content-Type': 'application/json', 'Authorization': Bearer Key Here

  }),
  body: JSON.stringify({
    amount: 100,
    currency: currency,
    payment: {
      capture: "automatic",
      capture_options: {
        refund_speed: "normal"
      }
    },
    transfers: [
      {
        account: linkedAccount,
        amount: 100,
        currency: currency,
        notes: {
          name: '1',
          email: '1'
        },
        linked_account_notes: [name , email]
      },
    ]
  })
})
  .then((res) => {
    return res.json()
  })
  .then((payment) => {

    this.setState({ loading: false })

    // console.log("PAYMENT", payment)

    var options = {
      description: 'Kalzi Membership',
      image: 'jpg here',
      currency: currency,
      key: 'key here', // Your api key
      amount: 100,
      name: 'Hi',
      prefill: {
        email: 'email',
        name: 'name',
      },
      order_id: payment.id,
      theme: { color: 'blue' },
    }

    RazorpayCheckout.open(options).then().catch()

})
.catch()

[arya-man]

Yeah same issue here

[varsh8th]

@Nautiyalsachin @vivekshindhe & team please respond, its been bugging us since last few days

[ramprasadAnand]

Hi @varsh8th, Please refer our sample-app for your reference on SDK integration, we are not facing any problem on opening the checkout page. As per the video reference you shared, there is a loader showing up on tap of pay button. (The open checkout action is not async, it should open immediately on tap of button with options.)

[arya-man]

The thing is that - the checkout works perfectly fine when it is just RazorpayCheckout.open(options) but the checkout does not open when a fetch request is made as in

fetch(https://api.razorpay.com/v1/orders, {
method: 'POST',
headers: new Headers({
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': Bearer Key Here

  }),
  body: JSON.stringify({
    amount: 100,
    currency: currency,
    payment: {
      capture: "automatic",
      capture_options: {
        refund_speed: "normal"
      }
    },
    transfers: [
      {
        account: linkedAccount,
        amount: 100,
        currency: currency,
        notes: {
          name: '1',
          email: '1'
        },
        linked_account_notes: [name , email]
      },
    ]
  })
})

and then passing the payment.id as order_id inside options of the checkout. The fetch is request is made to make use of automatic capture and razorpay route. The issue is ios only and the same code works perfectly fine for android. What do you think causes this issue of the checkout not opening in ios when a fetch request is made to create an order before RazorpayCheckout.open(options) ? Thanks in advance!

var options = {
      description: 'Kalzi Membership',
      image: 'jpg here',
      currency: currency,
      key: 'key here', // Your api key
      amount: 100,
      name: 'Hi',
      prefill: {
        email: 'email',
        name: 'name',
      },
      order_id: payment.id, // not there if fetch request is not made to create razorpay order
      theme: { color: 'blue' },
    }

[maskedTitan]

Razorpay's APIs won't work if they're being called from the client side. They should be implemented and called in the backend and the response can be transferred to the front end.

[akshaykatale99]

Same issue for me. showing following error and sometimes it opens but most of the time throwing this error

[arya-man]

@maskedTitan Even after creating the razorpay order from the backend - the checkout is not opening. Funny thing is if I dont do the fetch call for creating order on my backend and simply call RazorpayCheckout.open() , the checkout opens. However if I do a post request for creating a razorpay route order on my backend - then regardless of passing order_id in options the checkout does not open. Again ios specific issue and works perfectly fine on android. What do you think is the issue?

[varsh8th]

@maskedTitan @vivekshindhe @Nautiyalsachin can you respond to @arya-man above, he's from the same team and lead dev on the app where we are facing this issue. Its blocking lots of things for us in ios only, as android is working fine.

We've raised multiple support requests on this since last week, support after raising tickets is basically non existent so pinging here. So can you guys take a look here and help us resolve this

[vivekshindhe]

@varsh8th We apologise for the delay. Could you send us your emailID or razorpay MID so that we can get in touch with you to resolve this sooner?

[arya-man]

Hey @vivekshindhe . Please mail at aryaman0301@gmail.com

[sahil-prakash]

Same issue for me. showing following error and sometimes it opens but most of the time throwing this error

I have faced similar issue in my project and have added a PR for the fix

[raikk]

hii all I have the same issue, not able to open Razorpay checkout screen in iOS but all working fine in android.

The issue was caused by the react-native-loading-spinner-overlay module, I was using spinner overlay it hides the Checkout screen model of Razorpay in iOS.

I removed the spinner overlay then all working fine.

[aditya-keri-betterhalf]

Same issue for me. showing following error and sometimes it opens but most of the time throwing this error

I have faced similar issue in my project and have added a PR for the fix

I've tried adding the code you've mentioned in the PR in node_modules/react-native-razorpay/ios/RazorpayCheckout.m but still facing the same issue. Am I missing something here ?

[ket000]

It is also not working for me using iPADOS 16.5.1 on ipad and adda app. It works fine on adda.io app. It seems to be a bug with Razorpay. This is annoying. Please fix it. I reported this to Adda app support also.

[ramprasadAnand]

@ket000 are you facing this specifically on iPad OS ? Need more information on the error you are getting while opening the Payment page.

[ket000]

Yes, on ipad os. NoT sure what more info need. I have already listed the github bug. After i select hdfc for net banking the next page is completely blank. Github bug menTions specific issue with ios. Sent from my iPad ProOn Jul 10, 2023, at 6:46 AM, Ramprasad A @.***> wrote: @ket000 are you facing this specifically on iPad OS ? Need more information on the error you are getting while opening the Payment page.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[Dharmesh-Dabhi]

I have same issue on ios app, its working fine in android, i tried @sahil-prakash pr code now its opening the checkout page in ios too but after payment the top navbar is gone.

yes its bug in sdk, checkout page is opening fine from app.js but not from nested component specifically bottom navigation

[ronit-reverseBits]

I was also facing the issue where the checkout was working fine on Android but not on iOS and I solved that by updating the latest React navigation library.