CODEWITHSUNDEEP
javascriptreactjsgoogle-pay
Tackgnol
Tackgnol

Reputation: 505

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?

Upvotes: 2

Views: 926

Answers (1)

Jose L Ugia
Jose L Ugia

Reputation: 6250

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 }} />;

Upvotes: 3

Related Questions