Display custom third party html element inside a React component

Question

I'm trying to show a custom HTML modal that is returned from a third-party library inside a functional React component.

This is the function that should load the modal, which is being called inside useEffect:

const modalRef = useRef()
   
const loadScript = async () => {
    // custom script loader 
    const loader = new ScriptLoader({
      src: 'checkout.reepay.com/checkout.js',
      global: 'Reepay',
    })
    
    await loader.load()

    // flag for displaying the div
    setLoaded(true)

    // Reepay.ModalCheckout(sessionId) should open a modal
    modalRef.current.innerHTML = new window.Reepay.ModalCheckout(sessionId)
}

In my return:

return loaded ? <div ref={modalRef}></div> : <></>

When I try to display the component I just get a [Object object] inside the div. I don't know if using refs is the way to go, I'm a beginner and I didn't really understand how to integrate third-party code inside React.

ArtBIT · Accepted Answer · 2021-02-17 12:25:40Z

1

From their documentation (https://docs.reepay.com/reference#overlay-checkout), it seems that instance of Reepay.ModalCheckout is an object, not HTML:

// Step 1: Initialize
var rp = new Reepay.ModalCheckout();  // No session id given

// ... Backend to backend call ... 

// Step 2: Load the modal 
rp.show(' YOUR SESSION ID HERE ');  // Call the .show function with the session id

You do not have to inject it inside of a modal, since it comes with their own modal.

If you really want to inject it into a container, you should be using:

var rp = new Reepay.EmbeddedCheckout(' YOUR SESSION ID HERE ', { html_element: 'rp_container' } );

answered Feb 17, 2021 at 12:25

ArtBIT

4,02931 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display custom third party html element inside a React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related