400 Bad Request Error When Placing Order with AngelOneWebView (React Native + Axios)

[sahil08]

I'm encountering a 400 Bad Request error when attempting to place an order through my React Native application using AngelOneWebView and Axios. I've double-checked that both the body and headers are formatted correctly, but I'm still receiving this error.

Here's a breakdown of my attached code:

I'm using react-native-webview to display the Angel Broking login page and capture the authorization tokens.
Once the tokens are retrieved, I use Axios to send a POST request to the https://apiconnect.angelbroking.com/rest/secure/angelbroking/order/v1/placeOrder endpoint.
The request body includes order details like variety, symbol token, transaction type, etc.
The headers contain the authorization token (Authorization: Bearer ${authToken}), content type (Content-Type: application/json), and other required headers as per Angel Broking's API documentation.

Error Details:
I'm consistently getting a 400 Bad Request error in the Axios catch block.
I've logged the error details including error.response.data, error.response.status, and error.response.headers to aid debugging, but haven't been able to pinpoint the issue.

What I've Tried:
I've verified that the URL, body parameters, and headers all match Angel Broking's API specifications.
I've checked the console logs for any additional error messages from Angel Broking's API.

I'd greatly appreciate any insights or suggestions from the community on how to resolve this 400 Bad Request error. Has anyone else encountered similar issues when using AngelOneWebView and Axios for placing orders? Any pointers on how to troubleshoot further would be extremely helpful.

import React, { useRef, useState } from "react";
import { View, StyleSheet } from "react-native";
import WebView from "react-native-webview";
import TransactionLoading from "../Screens/TransactionLoading";
import axios from "axios";

const AngelOneWebView = () => {
  const webViewRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const [authToken, setAuthToken] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const handleNavigationStateChange = (navState) => {
    const url = navState.url;
    console.log("Current URL:", url);

    if (
      url.includes("auth_token=") &&
      url.includes("feed_token=") &&
      url.includes("refresh_token=")
    ) {
      const authToken = url.split("auth_token=")[1]?.split("&")[0];
      const feedToken = url.split("feed_token=")[1]?.split("&")[0];
      const refreshToken = url.split("refresh_token=")[1]?.split("&")[0];

      console.log("Auth Token:", authToken);
      console.log("Feed Token:", feedToken);
      console.log("Refresh Token:", refreshToken);

      setAuthToken(authToken);
      setIsLoading(true);
    } else if (url.includes("login_failed_indicator")) {
      setErrorMessage("Login failed. Please try again.");
      setIsLoading(true);
    }
  };

  const placeOrder = () => {
    var data = JSON.stringify({
      variety: "NORMAL",
      tradingsymbol: "SBIN-EQ",
      symboltoken: "3045",
      transactiontype: "BUY",
      exchange: "NSE",
      ordertype: "MARKET",
      producttype: "CNC",
      duration: "DAY",
      price: "",
      squareoff: "0",
      stoploss: "0",
      quantity: "1",
    });

    var config = {
      method: "post",
      url: "https://apiconnect.angelbroking.com/rest/secure/angelbroking/order/v1/placeOrder",
      headers: {
        Authorization: `Bearer ${authToken}`,
        "Content-Type": "application/json",
        Accept: "application/json",
        "X-UserType": "USER",
        "X-PrivateKey": "abcdefg",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        if (error.response) {
          console.log("Error Data:", error.response.data);
          console.log("Error Status:", error.response.status);
          console.log("Error Headers:", error.response.headers);
        } else if (error.request) {
          console.log("Error Request:", error.request);
        } else {
          console.log("Error Message:", error.message);
        }
        console.log("Error Config:", error.config);
      });
  };

  return (
    <View style={styles.container}>
      {isLoading ? (
        <TransactionLoading
          message={errorMessage || "Processing your login..."}
          onConfirm={placeOrder}
          onCancel={closeView}
          confirmationStage={false}
        />
      ) : (
        <WebView
          ref={webViewRef}
          source={{
            uri: "https://smartapi.angelbroking.com/publisher-login?api_key=dvqeaiOe",
          }}
          onNavigationStateChange={handleNavigationStateChange}
          startInLoadingState
          style={styles.webView}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webView: {
    flex: 1,
  },
});

export default AngelOneWebView;