Search code examples
javascriptreactjsgoogle-pay

Integrating GooglePay with React

so I have a task of integrating GooglePay into our react app...

The general approach suggested in the documentation: 

        const button = this.paymentsClient.createButton({
            onClick: () => console.log('TODO: click handler')
        });
        document
            .getElementsByClassName('my-payment-class')[0]
            .appendChild(button);

Works perfectly however this is not a very 'react' way of doing things...

The button returns this: enter image description here

So my idea was to render it using: 

            return <div dangerouslySetInnerHTML={{ __html: button }} />;

However this renders to:

enter image description here

When I try to render it in jsx

return <div > {button} </div>;

it throws a Objects are not valid as a React child (found: [object HTMLDivElement]).

Anyone has a working implementation to share?

Solution

  • the API returns a DOM element, not a React element. That's why React can't render it

    As you well pointed, you can use appendChild on the React element, or the dangerouslySetInnerHTML property in its JSX representation. Note though that when you take the latter approach, the React element is expecting the raw HTML of the DOM element, not the object itself. You can access the raw HTML content of the DOM using the innerHTML property, like so:

    return <div dangerouslySetInnerHTML={{ __html: button.innerHTML }} />;