Integrate javascript code into react component

JavaScript
1

hello guys ,
so I’m trying integrate vanhilla java script code into react component so i want load a script(script variable is the component) tag in my react component in order to get a function to use it ,
here’s the code

class PaymentApp extends Component {

   componentDidMount () {
     const script = document.createElement('script');
     
    script.src =  'https://developer.empay.ae/sdk/empay.js?client-id=emvat_test';
    script.async = true;
    document.body.append(script);

    script.onload = () => {
      try {
        console.info(empay, 'ssssdssdsss')
        empay.Buttons({}).render("#empay-button-container");
      } catch (err) {
        console.error('Error calling empay.Buttons():', err);
      }
    };
  
  };


  render() {
    return (
      <div className="container">
        <div className="flex-center flex-column" id="home">
          <h1>Payment Sample App</h1>
        
             <AbendJSHead src='//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js'/> 
           <AbendJSHead src='https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js'/> 
           <div id="empay-button-container"></div>
        </div>
      </div>
    );
  }
}

export default PaymentApp;

when im checking on the script link , i get 200 status but i still can't using the empay.Buttons function
when i check (empay) i get undefined

here's the original java script code ;
<!DOCTYPE html>
//<html lang="en">
  <head>
 <script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
  </head>
<body>
    <script src="https://developer.empay.ae/sdk/empay.js?client-id=emvat_test"></script>
    <div class="container">
      <div class="flex-center flex-column" id="home">
        <h1>Payment Sample App</h1>
        <div id="empay-button-container"></div>
      </div>
    </div>
 <script>
 empay
        .Buttons({
          clientToken:
            "Some Token here",
          createOrder: function (data, actions) {
            // /my-server/create-empay-order
            // console.log(getOrderData());
            // let order1 = getOrderData();
            return fetch("response.json")
              .then((response) => response.json())
              .then((data) => {
                console.log(data);
                return data.id;
              });

   
          },
          onApprove: function (data, actions) {
            if (data.status === "COMPLETED") {
              // Show a success message to your buyer
              alert("Transaction completed");
            }
          },
          env: "test",
        })
        .render("#empay-button-container");
</script>
  </body>
//</html>
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

React is JavaScript. If you have another JavaScript file with exported functions, you can import them into your React component.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.