@rebilly/framepay-react/test/e2e/fixtures/google-pay.js

A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features

import React, { Component } from 'react';

import {
    FramePayProvider,
    withFramePayGooglePayComponent,
} from '../../../build';
import { prettyDebugRender, ReactVersion, renderFixture } from './util';
import './style.css';

const params = {
    publishableKey: 'pk_sandbox_S95ATjj4hXZs-T9QpZq1ENl2tDSrUkCGv98utc9',
    organizationId: '5977150c-1c97-4dd4-9860-6bb2bab070b4',
    websiteId: 'demo.com',
    transactionData: {
        amount: 10,
        currency: 'USD',
        label: 'Purchase label 1',
    },
};

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            token: null,
        };
    }

    render() {
        return (
            <FramePayProvider
                {...params}
                onReady={() => {
                    console.log('FramePayProvider.onReady');
                }}
                onError={(err) => {
                    console.error('FramePayProvider.onError', err);
                }}
                onTokenReady={(token) => this.setState({ token })}
            >
                <div>
                    {ReactVersion()}
                    <div>
                        <h3>FramePay version: {this.props.Framepay.version}</h3>
                        <div className="flex-wrapper">
                            {prettyDebugRender(this.state)}
                            <this.props.GooglePayElement />
                        </div>
                    </div>
                </div>
            </FramePayProvider>
        );
    }
}

const WrappedApp = withFramePayGooglePayComponent(App);
renderFixture(<WrappedApp />);