@rebilly/framepay-react 2.0.0 → 2.1.0

package/test/e2e/fixtures/multiple-methods.js

@@ -0,0 +1,470 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import { FramePayProvider, withFramePay } from '../../../build';
+import { deepMerge, prettyDebugRender, ReactVersion } 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',
+    },
+};
+
+const defaultEvents = () => ({
+    card: {
+        onReady: false,
+        onChange: false,
+        onFocus: false,
+        onBlur: false
+    },
+    bankAccountType: {
+        onReady: false,
+        onChange: false,
+        onFocus: false,
+        onBlur: false
+    },
+    bankAccountNumber: {
+        onReady: false,
+        onChange: false,
+        onFocus: false,
+        onBlur: false
+    },
+    bankRoutingNumber: {
+        onReady: false,
+        onChange: false,
+        onFocus: false,
+        onBlur: false
+    },
+    iban: {
+        onReady: false,
+        onChange: false,
+        onFocus: false,
+        onBlur: false
+    }
+});
+
+class PaymentFormComponent extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            paymentElements: {
+                // {element: method}
+                card: 'payment-card',
+                bank: 'ach',
+                iban: 'ach',
+                googlepay: 'googlepay'
+            },
+            paymentElement: 'card',
+            billingAddress: {
+                firstName: 'first-name-value',
+                lastName: 'last-name-value',
+                country: 'GB'
+            }
+        };
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+        /**
+         *
+         * @see https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-createtoken
+         *
+         */
+        const billingAddress = {
+            ...this.state.billingAddress
+        };
+
+        this.props.Rebilly.createToken(this.formNode, {
+            // method: this.state.paymentElements[this.state.paymentElement],
+            billingAddress
+        })
+            .then(data => {
+                this.props.onEvent({
+                    token: {
+                        error: false,
+                        data: { ...data, method: data.method }
+                    }
+                });
+            })
+            .catch(err => {
+                this.props.onEvent({ token: { error: true, data: err } });
+            });
+    }
+
+    render() {
+        const elements = Object.keys(this.state.paymentElements);
+
+        const changeElement = (element) => {
+            this.setState({
+                paymentElement: element,
+            });
+            // Clear events
+            this.props.onEvent({
+                events: {
+                    ...defaultEvents(),
+                },
+            })
+        }
+
+        return (
+            <div className="example-2">
+                <ul>
+                    {elements.map(element => (
+                        <li key={`payment-method-${element}`}>
+                            <button
+                                id={`set-active-element-${element}`}
+                                onClick={() => changeElement(element)}
+                            >
+                                {element} - isActive:
+                                {String(element === this.state.paymentElement)}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+                <form
+                    id="form"
+                    ref={node => (this.formNode = node)}
+                    method="post"
+                    onSubmit={this.handleSubmit}
+                >
+                    <fieldset>
+                        <div className="field">
+                            <input
+                                type="text"
+                                name="firstName"
+                                placeholder="First Name"
+                                defaultValue={
+                                    this.state.billingAddress.firstName
+                                }
+                                onChange={e => {
+                                    this.props.onEvent({
+                                        billingAddress: {
+                                            firstName: e.target.value
+                                        }
+                                    });
+                                }}
+                            />
+                        </div>
+                        <div className="field">
+                            <input
+                                type="text"
+                                name="lastName"
+                                placeholder="Last Name"
+                                defaultValue={
+                                    this.state.billingAddress.lastName
+                                }
+                                onChange={e => {
+                                    this.props.onEvent({
+                                        billingAddress: {
+                                            lastName: e.target.value
+                                        }
+                                    });
+                                }}
+                            />
+                        </div>
+                        <hr />
+                        <div className="field" id="field-CardElement">
+                            {this.state.paymentElement === 'card' && (
+                                <this.props.CardElement
+                                    onReady={() =>
+                                        this.props.onEvent({
+                                            events: {
+                                                card: { onReady: true }
+                                            }
+                                        })
+                                    }
+                                    onChange={data =>
+                                        this.props.onEvent({
+                                            events: {
+                                                card: {
+                                                    onChange: {
+                                                        ...data,
+                                                        error: data.error || ''
+                                                    }
+                                                }
+                                            }
+                                        })
+                                    }
+                                    onFocus={() =>
+                                        this.props.onEvent({
+                                            events: {
+                                                card: { onFocus: true }
+                                            }
+                                        })
+                                    }
+                                    onBlur={() =>
+                                        this.props.onEvent({
+                                            events: {
+                                                card: { onBlur: true }
+                                            }
+                                        })
+                                    }
+                                />
+                            )}
+                            {this.state.paymentElement === 'googlepay' && (
+                                <this.props.GooglePayElement />
+                            )}
+                            {this.state.paymentElement === 'bank' && (
+                                <div>
+                                    <div
+                                        className="field"
+                                        id="field-BankAccountTypeElement"
+                                    >
+                                        <label>Account Type</label>
+                                        <this.props.BankAccountTypeElement
+                                            onReady={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountType: {
+                                                            onReady: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onChange={data =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountType: {
+                                                            onChange: {
+                                                                ...data,
+                                                                error:
+                                                                    data.error ||
+                                                                    ''
+                                                            }
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onFocus={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountType: {
+                                                            onFocus: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountType: {
+                                                            onBlur: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                        />
+                                    </div>
+                                    <div
+                                        className="field"
+                                        id="field-BankRoutingNumberElement"
+                                    >
+                                        <label>Routing Number</label>
+                                        <this.props.BankRoutingNumberElement
+                                            onReady={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankRoutingNumber: {
+                                                            onReady: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onChange={data =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankRoutingNumber: {
+                                                            onChange: {
+                                                                ...data,
+                                                                error:
+                                                                    data.error ||
+                                                                    ''
+                                                            }
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onFocus={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankRoutingNumber: {
+                                                            onFocus: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankRoutingNumber: {
+                                                            onBlur: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                        />
+                                    </div>
+                                    <div
+                                        className="field"
+                                        id="field-BankAccountNumberElement"
+                                    >
+                                        <label>Account Number</label>
+                                        <this.props.BankAccountNumberElement
+                                            onReady={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountNumber: {
+                                                            onReady: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onChange={data =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountNumber: {
+                                                            onChange: {
+                                                                ...data,
+                                                                error:
+                                                                    data.error ||
+                                                                    ''
+                                                            }
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onFocus={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountNumber: {
+                                                            onFocus: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        bankAccountNumber: {
+                                                            onBlur: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                            {this.state.paymentElement === 'iban' && (
+                                <div>
+                                    <div
+                                        className="field"
+                                        id="field-IBANElement"
+                                    >
+                                        <label>IBAN NUmber</label>
+                                        <this.props.IBANElement
+                                            onReady={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        iban: {
+                                                            onReady: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onChange={data =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        iban: {
+                                                            onChange: {
+                                                                ...data,
+                                                                error:
+                                                                    data.error ||
+                                                                    ''
+                                                            }
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onFocus={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        iban: {
+                                                            onFocus: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                this.props.onEvent({
+                                                    events: {
+                                                        iban: {
+                                                            onBlur: true
+                                                        }
+                                                    }
+                                                })
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </fieldset>
+
+                    <hr />
+                    <button id="submit">Make Payment</button>
+                </form>
+            </div>
+        );
+    }
+}
+
+const PaymentForm = withFramePay(PaymentFormComponent);
+
+class App extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            events: {
+                ...defaultEvents()
+            },
+            token: {
+                error: null,
+                data: null
+            }
+        };
+    }
+
+    deepUpdateState(data) {
+        this.setState(prevState => {
+            return deepMerge(prevState, data);
+        });
+    }
+
+    render() {
+        return (
+            <FramePayProvider injectStyle {...params} onTokenReady={(token) => this.deepUpdateState({ error: false, data: token })}>
+                <div>
+                    {ReactVersion()}
+                    <div>
+                        <div className="flex-wrapper">
+                            {prettyDebugRender(this.state)}
+                            <PaymentForm
+                                onEvent={data => this.deepUpdateState(data)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </FramePayProvider>
+        );
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

package/test/e2e/fixtures/nav.js

@@ -0,0 +1,20 @@
+setTimeout(() => {
+    const node = document.createElement('ul');
+    [
+        'apple-pay',
+        'bank-separate',
+        'card-separate',
+        'card-separate-rebilly-fields',
+        'card-separate-brands',
+        'checkout-combined',
+        'google-pay',
+        'iban',
+        'multiple-methods',
+        'paypal',
+    ]
+        .forEach(route => {
+            node.innerHTML += `<li><a href="/${route}.html">${route}</a></li>`;
+        });
+
+    document.body.appendChild(node);
+}, 1000);

package/test/e2e/fixtures/paypal.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Test Paypal</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="paypal.js"></script>
+    <script src="nav.js"></script>
+</body>
+
+</html>

package/test/e2e/fixtures/paypal.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import {
+    FramePayProvider,
+    withFramePayPaypalComponent
+} from '../../../build';
+import { prettyDebugRender, ReactVersion } 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',
+    }
+};
+
+class App extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            token: null,
+        };
+    }
+
+    render() {
+        return (
+            <FramePayProvider
+                injectStyle
+                {...params}
+                onReady={() => {
+                    console.log('FramePayProvider.onReady');
+                }}
+                onError={err => {
+                    console.log('FramePayProvider.onError', err);
+                }}
+                onTokenReady={token => this.setState({ token })}
+            >
+                <div>
+                    {ReactVersion()}
+                    <div>
+                        <h3>FramePay version: {this.props.Rebilly.version}</h3>
+                        <div className="flex-wrapper">
+                            {prettyDebugRender(this.state)}
+                            <this.props.PaypalElement />
+                        </div>
+                    </div>
+                </div>
+            </FramePayProvider>
+        );
+    }
+}
+
+const WrappedApp = withFramePayPaypalComponent(App);
+ReactDOM.render(
+    <WrappedApp />,
+    document.getElementById('app')
+);

package/test/e2e/fixtures/style.css

@@ -0,0 +1,55 @@
+iframe {
+    border: 0;
+    outline: none;
+}
+
+form {
+    padding: 5px;
+    border: 1px solid #ddd;
+}
+
+fieldset {
+    border: 0;
+}
+
+.field {
+    margin: 5px 0;
+}
+
+input[type="text"] {
+    display: block;
+    width: 100%;
+    padding: 1px;
+}
+
+button#submit {
+    display: block;
+    padding: 5px;
+    margin: 5px 0;
+}
+
+button#submit:hover {
+    cursor: pointer;
+}
+
+.flex-wrapper {
+    display: flex;
+    width: 100%;
+}
+
+.flex-wrapper > div:first-child {
+    font-size: 80%;
+    line-height: normal;
+}
+
+.flex-wrapper > div {
+    width: 50%;
+    padding: 5px;
+    border: 1px solid #ddd;
+    margin: 5px;
+}
+
+#pre,
+#data {
+    background: #ddd;
+}

package/test/e2e/fixtures/util.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+export const prettyRenderState = (data, parentKey) => {
+    if (data !== null && typeof data === 'object') {
+        return <ul>
+            {Object.keys(data).map((key, index) => {
+
+                const dataKey = `${parentKey ? parentKey + '-' : ''}${key}`;
+                const value = data[key];
+
+                if (value === null) {
+                    return null;
+                }
+
+                return <li
+                    key={`state-render-${key}-${index}`}
+                    id={`key-${key}`}>
+                    <span
+                        className="key"><b>{key}</b>:</span>
+                    &nbsp;
+                    {prettyRenderState(value, dataKey)}
+                </li>;
+            })}
+        </ul>;
+    }
+
+    if (data === null) {
+        return null;
+    }
+
+    const val = typeof data === 'object' ? JSON.stringify(data) : data;
+
+    return <span>
+        <span id={`${parentKey}-${val}`} data-value={val}/>
+        <span id={parentKey} data-value={val}>{String(val)}</span>
+    </span>;
+};
+
+export const prettyDebugRender = (state) => {
+    return (<div>
+        <div>
+            <pre id="pre">{JSON.stringify(state, null, 2)}</pre>
+        </div>
+        <div>
+            <div id="data">{prettyRenderState(state)}</div>
+        </div>
+    </div>);
+};
+
+
+export const deepMerge = (target, source) => {
+    for (const key of Object.keys(source)) {
+        if (source[key] instanceof Object) {
+            source[key] = source[key] || {};
+            target[key] = target[key] || {};
+            Object.assign(
+                source[key],
+                deepMerge(target[key], source[key])
+            );
+        }
+    }
+
+    return Object.assign(target || {}, source);
+};
+
+
+export const ReactVersion = () => {
+    return (<div>
+        <h3>React version: <span id="react-version" data-version={React.version}>{React.version}</span></h3>
+    </div>);
+};