Displaying the API response in a new html page

user_18862361 0
Viewed 134

What am I doing wrong here? I am trying to use the DATA FROM THE API RESPONSE. I want my React App to Open a new Window, Page, or whatever other than the same page. Then display the Data it gets from this API. Please it is for the best if you use examples to help junior developers learn. We all know technical terminology is hard than writing actual code.

If you would like to test the API in POSTMAN:

TOKEN: fb83b937-2739-3d6e-9519-09387b92dfae API: https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/

Please use this in your body:

{
  "transactionReference": "string",
  "paymentMethod": "CreditCard",
  "checkoutOrderUrl": "http://www.test.com/",
  "user": {
    "name": "string",
    "msisdn": "+27610983142",
    "email": "test@test.com"  },
  "payementMethodDetail": {
    "RedirectUrl": "http://www.test.com",
    "PurchaseEventWebhookUrl": "http://www.test.com"  },
  "bundle": [
    {
      "ProductCode": "317",
      "Amount": 5000,
      "CurrencyCode": "ZAR",
      "Quantity": 1    }
  ]
}

This is my current solution: I am doing the POST request when a user clicks Pay Now. Only when the user does that, is when I need to display a loading message and show the results in a new window/page/path.

  const handleSubmit = async () => {
    const token = "fb83b937-2739-3d6e-9519-09387b92dfae";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: name, 
        msisdn: phone, 
        email: email, 
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },

      bundle: cart.map((item) => ({
        ProductCode: `${item.ProductCode}`,
        Amount: item.amount,
        CurrencyCode: item.currencyCode,
        Quantity: item.quantity,
      })),
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(data),
    };
    await fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
      requestOptions
    )
      .then((response) => response.json(),
      console.log("Data Sent")
      )
      .then((res) => { 
        Navigate(<Payment/>, {state: res})
      });
  };

Thank you to those who are going to help.

react-router-dom react-router react-hooks reactjs javascript
1 Answers

Issue

From what I can understand of your question you are wanting to navigate to a route rendering the Payment component with the specified response payload. The issue is that you can't return a Navigate component from a callback function like this and expect it to effect any change in the UI. The Navigate component either needs to be rendered as part of the component result, or an imperative navigation action.

Solution

Import and use the useNavigate hook to access the navigate function and issue an imperative navigation with the POST response data in route state.

Example:

import { useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

const handleSubmit = async () => {
  ...
  await fetch(
    "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
    requestOptions
  )
    .then((response) => response.json())
    .then((payment) => { 
      navigate("/confirmation", { state: { payment } });
    });
};

Create a route rendering the Payment component:

<Routes>
  ... other routes ...
  <Route path="/confirmation" element={<Payment />} />
  ...
</Routes>

In the Payment component use the useLocation hook to access the passed route state.

import { useLocation } from 'react-router-dom';

...

const Payment = () => {
  const { state } = useLocation();
  const { payment } = state || {};

  ...
};
user_86908570
Related