0

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.

4
  • is the script getting adde to the <head/> every time? Commented Sep 12, 2019 at 7:10
  • yes, its added @nivendha Commented Sep 12, 2019 at 7:11
  • In the case of the script being added, the onload function will get triggered, so as per what you say instead of the ID, try referencing the <button> with react ref ,reactjs.org/docs/… Commented Sep 12, 2019 at 7:30
  • So are you saying instead of ID I need to use ref on there in the button tag.. can you please write the syntax over here in the comments @nivendha Commented Sep 12, 2019 at 8:44

0

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.