Getting XMLHttpRequest error in Flutter Web for Razorpay API call using http post

Question

I am getting a XMLHttpRequest error in Flutter Web for Razorpay API call using http post from past 4 days I searched on whole internet but no solution worked in my case.

Below is my Post request code using http: ^0.13.4 package:

Future<String> postRequest(String amount) async {
    var url = Uri.parse('https://api.razorpay.com/v1/orders');
    var key = 'rzp_test_Xx7Zw7hLfzozf6';
    var secret = '7PgbvLaODVzRbb9oRcaqCZMi';
    var auth = 'Basic ' + base64Encode(utf8.encode('$key:$secret'));
    print(auth);

    var body = json
        .encode({"amount": 50000, "currency": "INR", "receipt": "rcptid_11"});

    var id = DateTime.now().millisecondsSinceEpoch.remainder(100000).toString();

    var client = http.Client();
    var response = await client.post(
      url,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': auth,
      },
      body: body,
    );

    print(json.decode(response.body));
    return json.decode(response.body);
  }

The Curl command:

curl  -X POST https://api.razorpay.com/v1/orders-u <YOUR_KEY_ID>:<YOUR_SECRET>-H 'content-type:application/json'-d '{    "amount": 50000,    "currency": "INR",    "receipt": "rcptid_11"}'

The complete error:

    Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28                get current
packages/http/src/browser_client.dart 69:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1687:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 160:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13                                        _propagateToListeners       
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 593:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1288:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37254:58                              <fn>


    at Object.createErrorWithStack (http://localhost:62444/dart_sdk.js:5076:12)
    at Object._rethrow (http://localhost:62444/dart_sdk.js:40477:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:62444/dart_sdk.js:40473:13)
    at Object._microtaskLoop (http://localhost:62444/dart_sdk.js:40330:13)
    at _startMicrotaskLoop (http://localhost:62444/dart_sdk.js:40336:13)
    at http://localhost:62444/dart_sdk.js:35811:9

I have tried every solution over internet but nothing worked.

Solution

This smells of a CORS error, so I just pasted your code into Dartpad, opened the Chrome console and hit run. As expected, it was a CORS error.

Next step was then to search api razorpay cors, which threw up a bunch of results all complaining about the same error (all with no solution - which doesn't bode well - typically means there isn't a solution).

Next step was to notice that no decent payment API would have you include credentials into a client side app, especially a browser app. A simple inspection of the headers in the Chrome console reveals your username/password credentials. The implication of this is that you're using the API incorrectly.

This is quickly confirmed by looking at the Razorpay website which confirms that the order api is a Server-Server api. Another clue is that all the sample code for this api is in languages like PHP, Java, Node.js, etc - i.e. for the back end.

Answer: you must not call this API from the Flutter app. It must be called from your back end.

Comments

[Admin]

But it works perfectly in app the problem is with web only

[Richard Heap]

It may work, but that's not how it's designed to work. You certainly don't want to include those credentials in your app or anyone who decompiles it can find them. Keep the credentials safe in your back end. Why wouldn't you?

[Admin]

I understood & already started working on it