Menu
A third party sent me this script. Basically,
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>
627
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
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
