What is the best way to receive the information that was transmitted to me through a callback function?

While web development is not my strong suit, I have a question that might sound silly, so bear with me as I explain.

Once the user selects their desired purchase, an API call is made to generate a trans_id and redirects them to the bank's payment page. Upon completion of the payment, regardless of the response, we are redirected to a callback URL (/transaction/callback).

Our goal is to retrieve the trans_id seen in network -> callback -> payload

This is the snippet of code where we need to obtain the trans_id

Next Js app router 14.0.4

  "use client"
  import React from 'react';

  export default function Page() {
    return (
      <div className='flex items-center justify-center w-full min-h-[100vh]'>
        <div className="flex flex-col items-center justify-center">
            <h2 className="text-center text-white text-[35px] font-medium font-['Manrope'] uppercase">The order has been taken</h2>
            <p className="text-center mt-4 text-white text-lg font-light font-['Manrope']">All information regarding your order has been sent to the indicated email.</p>
        </div>
      </div>
    );
  }

Upon receiving this trans_id, we will utilize another API to check the status. However, I am struggling to extract it correctly.

I would greatly appreciate any advice or tips on how to accomplish this.

Answer №1

When making an API call, a response is generated. By checking the network tab, you can observe the response being sent back to you.

In ReactJS or JavaScript, it is recommended to use code similar to:

const result = await fetch('https://mypage.com/api/data');
const info = await result.json();
console.log(info);

You can then access the data object in the 'info' variable to retrieve the desired key, such as trans_id.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown

I've been attempting to create a simple animation on canvas using React.js, but I'm facing an issue with integrating my Keydown function with my useState. It seems that my useState value is not being defined properly, preventing me from changing ...

Assign a class to an element depending on its position using JavaScript/jQuery

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> How can I use jQuery to add a class to the second li element in the list without using an existing class or id? ...

There seems to be an issue with the .html() function in one of my

I'm currently in the process of transitioning my code to Angular and I could use some assistance with creating a directive. Here's what I'm trying to convert: jQuery(document).ready(function ($) { "use strict"; $('#cool-naviga ...

Can we display an express view in response to a WebSocket event?

My goal is to display an express view within a websocket event as shown below: socket.on('name', function () { //prompt the client to render a specific express view }); ...

Tips on updating the arrow icon after clicking on a dropdown menu

HTML: <div class="customSelectContainer"> <ul> <li class="initial">Choose</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2& ...

Issue encountered while attempting to pass a function within the data in React

I've encountered an issue while trying to pass a function called sectionOne and then calling it from another component. The error message I received is quite confusing. Error: Warning: Functions are not valid as a React child. This may happen if you r ...

What is the process for transforming promises into async await syntax?

login() { return new Promise((resolve, reject) => { userCollection.findOne({email: this.data.email}).then((myUser)=>{ if (myUser && myUser.password == this.data.password) { resolve("Congrats! Succe ...

Displaying a div upon hovering over another div is resulting in numerous server requests and a flickering effect

I am attempting to create a hover effect where one div floats next to another. The layout of the divs is like a grid, placed side by side. Check out my code on this fiddle. Using plain JavaScript, I want to display a second div (div2) floating next to div ...

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

Unique browsing key

Is there a specific identifier that can uniquely represent the browser you are currently using? I have two applications logged in through ApiGateWay, and I need to determine whether they are both running on the same browser. Therefore, I require a unique ...

Obtaining varied outcomes while printing filtered information

As a beginner in React.js using hooks, I prefer to learn through hands-on coding. My query revolves around fetching data from a specific URL like ksngfr.com/something.txt and displaying it as shown in the provided image (I only displayed numbers 1-4, but t ...

Caught up: TypeScript not catching errors inside Promises

Currently, I am in the process of developing a SPFx WebPart using TypeScript. Within my code, there is a function dedicated to retrieving a team based on its name (the get() method also returns a promise): public getTeamChannelByName(teamId: string, cha ...

Transmitting a variable string from JavaScript to PHP through AJAX

How can I pass a variable value from an HTML page using JavaScript to PHP? In my index.php file, I have the following code: $amount = $_GET['pricenumb']; echo $amount; Here is the JavaScript code I used to call on click of a button and send th ...

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

I have developed a resume generation application with two main components: BasicDetails and EmploymentDetails. To see a working example, click here: https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8 index.js file: <form onSubmit={ha ...

The JSColor onChange event is throwing an error indicating that the function is not defined

When attempting to use the onChange event for JSColor to call a function, I consistently encounter an error indicating that the function is not defined. The code snippet below illustrates the issue: export class NavBar extends React.Component { constr ...

Custom error messages for data types in Ajv

Recently, I delved into using Ajv with ajv-errors to validate JSON schema and generate personalized error messages. While everything is functioning correctly so far, I encountered a challenge in setting custom error messages for individual values based on ...

Tips for showcasing messages in a .dust file with connect-flash and express-messages in a Node application

I am currently working with Nodejs, Expressjs, and Kraken. I have been trying to display a message when a product is added on the index page, but despite several attempts to configure it, the messages are still not appearing as expected. Below is my config ...

utilize console.log within the <ErrorMessage> element

Typically, this is the way the <ErrorMessage> tag from Formik is utilized: <ErrorMessage name="email" render={(msg) => ( <Text style={styles.errorText}> ...

Fixing Firefox Bug: How to Eliminate Non-Numeric Characters from "Number" Input Fields

Completing this task seems straightforward. I need to eliminate any non-numeric characters from an input field specified as type "number" in Firefox when a key is pressed. The code snippet provided: $("#field").on("keyup", function() { regex = /[\& ...

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

When working with NgRx and typescript, I often come across this syntax within class constructors: import { Store, select } from '@ngrx/store' class MyClass { constructor(private store: Store<AppState>) { this.count$ = store.pipe(sele ...