I'm using an external script in my react code. And I've written the code below for your understanding-
import React, { Component, PropTypes } from 'react';
export default class GetIframe extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.configureExternalScript();
}
configureExternalScript() {
var getscript = document.createElement("script"); // create a script DOM node
getscript.src = <external-script-url>; // set its src to the provided URL
document.head.appendChild(getscript);
getscript.onload = function() {
if(<external-script-name>) {
<external-script-name>.SetProperties(
{
"email": <email-id>,
"image": <image-link>,
"button_label": <label>,
"currency": <symbol>,
"amount": <produt-amount>,
"lang": <lang>,
"form_id": "commerce_form",
"autoSubmit": "true"
}
);
<external-script-name>.SetStyle(
{
"backgroundColor": "ffffff",
"buttonColor": "555555",
"buttonHoverColor": "777777",
"buttonTextColor": "ffffff",
"buttonTextHoverColor": "ffffff",
"inputBackgroundColor": "ffffff",
"inputTextColor": "767676",
"inputErrorColor": "ff0000",
"inputAddonBackgroundColor": "ffffff",
"labelColor": "494949"
}
);
<external-script-name>.AddActionButton("buttonId");
<external-script-name>.GetCustomToken(<number>, <email-id>, <number>);
let isModalOpened = false;
let tokenCreated = false;
let tokenId = "0121223_sdwds_rtrt";
let lastFour = "0002";
<external-script-name>.Bind("opened", ()=> {
console.log('opened');
isModalOpened = true;
});
<external-script-name>.Bind("notificationReceived", (e) => {
console.log('NotificationReceived', e);
});
<external-script-name>.Bind("tokenCreated", (e) => {
tokenId = e.TokenId;
let cardBrand = "";
let cardName = "";
if(e.Last4 != null && e.Last4 != "null") {
lastFour = e.Last4;
cardBrand = e.Brand;
cardName = e.Name;
}
});
<external-script-name>.Bind("closed", (e) => {
console.log('closed', e);
});
<external-script-name>.GetNotification((e) => {
console.log('getNotification', e);
})
}
}
}
render() {
return(
<div>
<button id="buttonId" className={ClassNameUtil.getClassNames("fbra_button", "fbra_test_button", "fbra_formItem__selectPaymentButton")} title="" name="selectPaymentButton">
Continue to payment page
</button>
</div>
<input type="hidden" name="CWToken" id="CWToken" />
</div>
);
}
}
This script is working fine first time when its loading, onclick of the button I'm getting the modal and the flow is completely working fine but the problem I'm facing is, when I'm coming back to the same component when clicking on back button, this component is re-rendering but the script onload is not working, means on button click the modal is not opening.
I know as I'm using the buttonId that might be a reason. So is there any way to have the button click work again on re-rendering the component.
Any help resolving the problem would be appreciated.
<head/>every time?onloadfunction will get triggered, so as per what you say instead of the ID, try referencing the<button>with reactref,reactjs.org/docs/…