0

I have a platform's embedded html and script. This button triggers the script from what I understand. They actually designed it to be embedded on a website. I am looking for a way to implement same on a react application if it is possible. Here is the code provided by the platform to be embedled on a website:

<button class="wtrvl-checkout_button" id="wetravel_button_widget" data- 
 env="https://awebsite.com" data-version="v0.3" data-uid="62302" data-uuid="54806750" 
 href="https://website.com/checkout_embed?uuid=54806750" style="background- 
 color:#33ae3f;color:#ffffff;border: 0px;border-radius: 5px;font-family: 'Poppins', sans- 
 serif;font-weight: 400;font-size: 14px;-webkit-font-smoothing: antialiased;text-transform: 
  capitalize;padding: 13px 24px;text-decoration: none;text-align: center;line-height: 
 14px;display: inline-block; cursor: pointer;">Book Now</button> <link 
 href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <script 
 src="https://cdn.wetravel.com/widgets/embed_checkout.js"></script>

This was what I could come up with but not working:

   const [action, setAction] = useState(false);
    
   useEffect(() => {
    const script = document.createElement('script');
  
    script.src = "https://cdn.wetravel.com/widgets/embed_checkout.js";
    script.async = true;
  
    document.body.appendChild(script);
  
    return () => {
      document.body.removeChild(script);
    }
    }, [action]);


  const triggerScript = ()=>{
   etAction(true)
  }


return(
        <button class="wtrvl-checkout_button" id="wetravel_button_widget" data-env="https://maximumimpacttravel.wetravel.com" data-version="v0.3" data-uid="62302" data-uuid="54806750" href="https://maximumimpacttravel.wetravel.com/checkout_embed?uuid=54806750" style={{backgroundColor:'black', color:'#ffffff', border: '0px', borderRadius: '5px', fontFamily: 'Poppins', cursor: 'pointer'}}
                onClick={triggerScript}
            >Book Now</button>
  )

Also, will it be possible to listen to button clicks events on this script? The idea behind the embedled button is to create a pop up iframe that overlays on a web page. I don't know if this can be implemented on a React component

kingNodejs
  • 39
  • 1
  • 7
  • This answer might be useful for seeing how to load a script: https://stackoverflow.com/questions/53396307/how-do-i-use-external-script-that-i-add-to-react-js You can definitely embed an iframe in a pop-up in react, have you tried using onClick to make a div appear/disappear? – fordat Apr 18 '23 at 23:36
  • If you check out what I already did, I tried calling the script when the button is clicked. I guess the platform made it that when one clicks the button, it pops up the script which has a checkout functionalities. But with what I have done, when I click the button, it doesnt pop up their checkout widget. – kingNodejs Apr 18 '23 at 23:41
  • I added the script on the body via the public index.html file which I saw from the link you shared. Thanks very much. It is working now when the button is clicked. I would like to know is there a way to track the buttons clicked on the iframe? Like a way to monitor what user does on that popped iframe? – kingNodejs Apr 19 '23 at 00:05
  • Check out this answer: https://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript However if the iframe is a different origin from your own, you probably can't access too much data. Not sure what what types of things you need – fordat Apr 19 '23 at 00:20

1 Answers1

0

According to JSX syntax, shouldn't the "class" attribute in button be className? And there's a typo in triggerScript for "etAction...". Just a few thoughts

AliH
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Pawel Uchida-Psztyc Apr 25 '23 at 04:58