3

A third party sent me this script. Basically,

  1. include a script
  2. call the object
  3. 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>
1

2 Answers 2

2

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

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" />
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.