How to use external object in react?

Question

A third party sent me this script. Basically,

include a script
call the object
onAuthorize will feedback data, then do something with data

Is it a way to integrate it with react? I think I need the data from onAuthorize to update my react state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Payment Gateway Test Page</title>
    <script src="https://service.com/widget.js">
    </script>
    <style type="text/css">
        iframe{border: 0;height: 50px;}
    </style>
</head>

<body>
<div>
    * Demo for widget
</div>
<br/>
<script>
    // widget
    mywidget.Button.render({
        Client: {
            id: "1234",
            name: "testme"
        },
        payment: function (actions) {
            var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
            return actions.createQuote(amountValue)
        },
        onAuthorize: function (data) {
            // err
            if (data.errorCode) {
                this.onError(data);
                return;
            }

            // money we need to pay
            var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
            // we have such points, converted to money
            var pointsDollars = parseFloat(data.pointsBurned * 0.005, 10);

            // points to convert
            document.getElementById('qp').innerText = data.pointsBurned;

            // origPay - new_money = pay_now
            document.getElementById('bal').innerText = '$' + (amountValue - pointsDollars);
        },
        onError: function (data) {
            console.log(data);
        },
        onClicked: function (data) {
            // on click
            console.log(data);
        }
    }, "#container"); // container
</script>

<div id="container"></div>
<br/>
<div id="amount">
    Checkout: $<span id="inp-amount">1543</span> <br>
    Points to redeem: <span id="qp"></span> <br>

    <hr>
    Balance to pay: <span id="bal"></span> <br>
</div>
</body>

</html>

You might be interested in something like: github.com/schiehll/react-globally — Matt
– Matt, Commented Nov 12, 2018 at 4:13

kiranvj · Accepted Answer · 2018-11-12 05:21:03Z

You could create an event and listen for that event. In onAuthorize you can trigger the event and pass the data.

Add an event in your page (not necessarily in React)

// Create the event
var event = new CustomEvent("authroize-me", { "detail": "some event info" });

React component

 constructor() {
   super();
   this.handleAuthroizeMe = this.handleAuthroizeMe.bind(this);       
}
handleAuthroizeMe(data) {
   console.log(data);
}

componentDidMount() {
    document.addEventListener('authroize-me', this.handleAuthroizeMe);
 }
 componentWillUnmount() {
   document.removeEventListener("authroize-me", this.handleAuthroizeMe);
}

In onAuthorize

onAuthorize: function (data) {
   // Dispatch event
   document.dispatchEvent(event, data);
}

Another quick and dirty fix.

Expose a function from react component outside the react scope.

window.setAuthorizeState = (data)=> {
  this.setState({authorizeState: data});
}

Call setAuthorizeState from onAuthorize

vijayst · Accepted Answer · 2018-11-12 04:19:40Z

0

The code can be embedded in a component which renders the container. And in componentDidMount, the script can be placed.

class Widget extends Component {
  componentDidMount() {
    // script here
  }

  render() {
    return (
      <div id="container" />
    );
  }
}

answered Nov 12, 2018 at 4:19

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to use external object in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related