.then(result) 块在 paytm 支付成功后不执行。 在反应原生

Question

I am integrating paytm transaction in react native app. and I have successfully integrated it. I am able to do successful transaction. but after transaction successful. some data from server API is showing over there. like this = "[{"message":"success","is_payment_done":"Y"}]" .

But the problem is .then(result) block is not executing. Please help.

Here is the code:

export default class payment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      order_id: "",
      mid: "xxxxxxxxxxxxxxxxxxxxxxxx",
      tranxToken: "",
      amount: "20",
      // callbackUrl:
      //   "https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=TESTORDER_1",
      isStaging: true,
      appInvokeRestricted: true,
    };
  }

  call_api = () => {
    fetch("https://xxxxxxx.in/App_API_CI/xxxxxxxxxx", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },

      body: JSON.stringify([
        {
          mobile_no: "xxxxxxxxx",
          user_id: "xx",
          patient_name: "xxxxxxx",
        },
      ]),
    })
      .then((returnValue) => returnValue.json())

      .then((response) => {
        console.log(
          "this checksum api esponse" +
            JSON.stringify(response[0].data.txnToken)
        );

        this.setState({ order_id: response[0].data.order_id });
        this.setState({ tranxToken: response[0].data.txnToken });

        this.handleTransaction();
      });
  };

  handleTransaction = () => {
    AllInOneSDKManager.startTransaction(
      this.state.order_id,
      this.state.mid,
      this.state.tranxToken,
      this.state.amount,
      "https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=" +
        this.state.order_id,
      this.state.isStaging,
      this.state.appInvokeRestricted
    )

      .then((result) => {
        () => console.log(result);
        //AsyncStorage.setItem("is_payment_done", "Y");
        this.props.navigation.navigate("MyDrawerRP");
      })
      .catch((err) => {
        console.log(err);
        Toast.show("Something went wrong");
      });
  };

  render() {
    return (
      <View style={{ alignSelf: "center", flex: 1, justifyContent: "center" }}>
        <TouchableOpacity
          onPress={this.call_api}
          style={{
            height: 90,
            width: width / 1.2,
            backgroundColor: "#7DF8F8",
            justifyContent: "center",
            elevation: 20,
          }}
        >
          <Text style={{ alignSelf: "center", fontSize: 35, color: "#000080" }}>
            PAY 20/-
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

For some async activity like getting data from server (the server take a little time to return data ) it's necessary to use async/await to not fail the returned data For your code try it like this :

call_api =  async () => {
await fetch("https://xxxxxxx.in/App_API_CI/xxxxxxxxxx", {
    method: "POST",
    headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
    },

    body: JSON.stringify([
        {
            mobile_no: "xxxxxxxxx",
            user_id: "xx",
            patient_name: "xxxxxxx",
        },
    ]),
})
    .then((returnValue) => returnValue.json())

    .then((response) => {
        console.log(
            "this checksum api esponse" +
            JSON.stringify(response[0].data.txnToken)
        );

        this.setState({ order_id: response[0].data.order_id });
        this.setState({ tranxToken: response[0].data.txnToken });

        this.handleTransaction();
    });

};

Answer 2

Well you need to have few checks here

1. Check whats the result printed for below code before calling handleTransaction

   console.log( "this checksum api esponse" + JSON.stringify(response[0].data.txnToken) );

2. Check if the handleTransaction block is called

3. () => this wont execute console.log(result) and print the log , remove this from below code

   .then((result) => { ()=> //remove this console.log("result", result) })

4. If the handleTransaction is executed there might be some issue in startTransaction block, debug and check or wrap the code inside handleTransaction in try catch

For the 4th step asked, place the below code and check the logs

 handleTransaction = () => {
 console.log("handleTransaction Called")
 try{
 AllInOneSDKManager.startTransaction(
 this.state.order_id,
 this.state.mid,
 this.state.tranxToken,
 this.state.amount,
"https://securegw-stage.paytm.in/theia/paytmCallback?ORDER_ID=" +
 this.state.order_id,
 this.state.isStaging,
 this.state.appInvokeRestricted
 )
.then((result) => {
  console.log("startTransaction Result ",result);
  this.props.navigation.navigate("MyDrawerRP");
 })
 .catch((err) => {
  console.log("startTransaction error", err)
 });
 } catch (error) {
 console.log("handleTransaction error", error)
  }
  }