npm - @rebilly/framepay-react - Versions diffs - 2.0.1 → 2.2.0 - Mend

@rebilly/framepay-react 2.0.1 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/.env.example +2 -0
package/CHANGELOG.md +14 -0
package/build/index.spec.js +2 -6
package/build/lib/components/elements/applepay-element.js +3 -3
package/build/lib/components/elements/bank-element.js +7 -10
package/build/lib/components/elements/base-element.js +2 -6
package/build/lib/components/elements/card-element.js +7 -10
package/build/lib/components/elements/googlepay-element.js +3 -3
package/build/lib/components/elements/iban-element.js +8 -15
package/build/lib/components/elements/paypal-element.js +3 -3
package/build/lib/components/injector.js +10 -30
package/build/lib/components/provider.js +10 -14
package/build/lib/constants.js +11 -15
package/build/lib/context.js +3 -7
package/env.js +7 -0
package/package.json +25 -14
package/src/index.spec.ts +19 -0
package/src/index.ts +42 -0
package/src/lib/components/elements/applepay-element.tsx +36 -0
package/src/lib/components/elements/bank-element.spec.tsx +119 -0
package/src/lib/components/elements/bank-element.tsx +77 -0
package/src/lib/components/elements/base-element.tsx +100 -0
package/src/lib/components/elements/card-element.spec.tsx +113 -0
package/src/lib/components/elements/card-element.tsx +76 -0
package/src/lib/components/elements/googlepay-element.tsx +36 -0
package/src/lib/components/elements/iban-element.spec.tsx +104 -0
package/src/lib/components/elements/iban-element.tsx +78 -0
package/src/lib/components/elements/paypal-element.tsx +36 -0
package/src/lib/components/injector.spec.tsx +162 -0
package/src/lib/components/injector.tsx +495 -0
package/src/lib/components/provider.spec.tsx +98 -0
package/src/lib/components/provider.tsx +111 -0
package/src/lib/constants.ts +43 -0
package/src/lib/context.ts +24 -0
package/src/lib/dom-util.ts +35 -0
package/src/lib/framepay-error.ts +59 -0
package/src/lib/get-rebilly-api.ts +11 -0
package/test/e2e/assets/prop-types.js +849 -0
package/test/e2e/assets/react-0.14.0.js +18759 -0
package/test/e2e/assets/react-15.0.0.js +19309 -0
package/test/e2e/assets/react-16.js +3318 -0
package/test/e2e/assets/react-17.js +3357 -0
package/test/e2e/assets/react-18.js +3342 -0
package/test/e2e/assets/react-dom-0.14.0.js +42 -0
package/test/e2e/assets/react-dom-15.0.0.js +42 -0
package/test/e2e/assets/react-dom-16.js +25147 -0
package/test/e2e/assets/react-dom-17.js +26292 -0
package/test/e2e/assets/react-dom-18.js +29869 -0
package/test/e2e/cypress-support.js +2 -0
package/test/e2e/cypress.d.ts +1 -0
package/test/e2e/fixtures/apple-pay.html +15 -0
package/test/e2e/fixtures/apple-pay.js +63 -0
package/test/e2e/fixtures/bank-separate.html +12 -0
package/test/e2e/fixtures/bank-separate.js +323 -0
package/test/e2e/fixtures/card-separate-brands.html +12 -0
package/test/e2e/fixtures/card-separate-brands.js +260 -0
package/test/e2e/fixtures/card-separate-rebilly-fields.html +12 -0
package/test/e2e/fixtures/card-separate-rebilly-fields.js +281 -0
package/test/e2e/fixtures/card-separate.html +12 -0
package/test/e2e/fixtures/card-separate.js +227 -0
package/test/e2e/fixtures/checkout-combined.html +12 -0
package/test/e2e/fixtures/checkout-combined.js +199 -0
package/test/e2e/fixtures/google-pay.html +15 -0
package/test/e2e/fixtures/google-pay.js +63 -0
package/test/e2e/fixtures/iban.html +12 -0
package/test/e2e/fixtures/iban.js +239 -0
package/test/e2e/fixtures/multiple-methods.html +12 -0
package/test/e2e/fixtures/multiple-methods.js +470 -0
package/test/e2e/fixtures/nav.js +20 -0
package/test/e2e/fixtures/paypal.html +15 -0
package/test/e2e/fixtures/paypal.js +62 -0
package/test/e2e/fixtures/style.css +55 -0
package/test/e2e/fixtures/util.js +71 -0
package/test/e2e/local-server.mjs +12 -0
package/test/e2e/server.mjs +43 -0
package/test/e2e/specs/bank-separate.cy.ts +27 -0
package/test/e2e/specs/card-separate-brands.cy.ts +68 -0
package/test/e2e/specs/card-separate.cy.ts +27 -0
package/test/e2e/specs/checkout-combined.cy.ts +24 -0
package/test/e2e/specs/google-pay.cy.ts +13 -0
package/test/e2e/specs/iban.cy.ts +17 -0
package/test/e2e/specs/multiple-methods.cy.ts +128 -0
package/test/e2e/specs/paypal.cy.ts +13 -0
package/test/e2e/specs/react-version.cy.ts +12 -0
package/test/e2e/switch-react-version.js +42 -0
package/test/e2e/tsconfig.json +8 -0
package/test/unit/jest.config.js +29 -0
package/test/unit/specs/declaration-mock.spec.tsx +143 -0
package/tsconfig.json +31 -0
package/tsconfig.spec.json +13 -0
package/tslint.json +36 -0

package/test/e2e/cypress-support.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import '@testing-library/cypress/add-commands';
2	+ import 'cypress-iframe';

package/test/e2e/cypress.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ ///<reference types="cypress-iframe" />

package/test/e2e/fixtures/apple-pay.html ADDED Viewed

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

package/test/e2e/fixtures/apple-pay.js ADDED Viewed

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import {
+    FramePayProvider,
+    withFramePayApplePayComponent
+} 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',
+        label: 'Purchase label 1',
+    },
+};
+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.ApplePayElement />
+                        </div>
+                    </div>
+                </div>
+            </FramePayProvider>
+        );
+    }
+}
+const WrappedApp = withFramePayApplePayComponent(App);
+ReactDOM.render(
+    <WrappedApp />,
+    document.getElementById('app')
+);

package/test/e2e/fixtures/bank-separate.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Test Bank Page Separate Fields</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="bank-separate.js"></script>
+<script src="nav.js"></script>
+</body>
+</html>

package/test/e2e/fixtures/bank-separate.js ADDED Viewed

@@ -0,0 +1,323 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { FramePayProvider, withFramePayBankComponent } from '../../../build';
+import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import './style.css';
+const params = {
+    publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h'
+};
+class CardElementComponent extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            events: {
+                bankAccountType: {
+                    onReady: null,
+                    onChange: null,
+                    onFocus: null,
+                    onBlur: null
+                },
+                bankAccountNumber: {
+                    onReady: null,
+                    onChange: null,
+                    onFocus: null,
+                    onBlur: null
+                },
+                bankRoutingNumber: {
+                    onReady: null,
+                    onChange: null,
+                    onFocus: null,
+                    onBlur: null
+                }
+            },
+            billingAddress: {
+                firstName: 'first-name-value',
+                lastName: 'last-name-value',
+                address: 'address-value',
+                country: 'GB',
+                region: 'region-value'
+            },
+            token: {
+                error: null,
+                data: null
+            }
+        };
+        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
+        };
+        if (billingAddress.emails) {
+            billingAddress.emails = [
+                {
+                    label: 'Email',
+                    value: billingAddress.emails
+                }
+            ];
+        }
+        if (billingAddress.phoneNumbers) {
+            billingAddress.phoneNumbers = [
+                {
+                    label: 'Phone Number',
+                    value: billingAddress.phoneNumbers
+                }
+            ];
+        }
+        this.props.Rebilly.createToken(this.formNode, { billingAddress })
+            .then(data => {
+                this.deepUpdateState({ token: { error: false, data } });
+            })
+            .catch(err => {
+                this.deepUpdateState({ token: { error: true, data: err } });
+            });
+    }
+    deepUpdateState(data) {
+        this.setState(deepMerge(this.state, data));
+    }
+    render() {
+        return (
+            <div>
+                <h2>{this.props.title}</h2>
+                <h3>FramePay version: {this.props.Rebilly.version}</h3>
+                <div className="flex-wrapper">
+                    {prettyDebugRender(this.state)}
+                    <div className="example-2">
+                        <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.deepUpdateState({
+                                                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.deepUpdateState({
+                                                billingAddress: {
+                                                    lastName: e.target.value
+                                                }
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="email"
+                                        placeholder="Email"
+                                        defaultValue={
+                                            this.state.billingAddress.emails
+                                        }
+                                        onChange={e => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    emails: e.target.value
+                                                }
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <input
+                                        type="text"
+                                        name="phone"
+                                        placeholder="Phone"
+                                        defaultValue={
+                                            this.state.billingAddress
+                                                .phoneNumbers
+                                        }
+                                        onChange={e => {
+                                            this.deepUpdateState({
+                                                billingAddress: {
+                                                    phoneNumbers: e.target.value
+                                                }
+                                            });
+                                        }}
+                                    />
+                                </div>
+                                <div className="field">
+                                    <this.props.BankAccountTypeElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountType: {
+                                                        onReady: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onChange={data =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountType: {
+                                                        onChange: data
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountType: {
+                                                        onFocus: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountType: {
+                                                        onBlur: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                    />
+                                </div>
+                                <div className="field">
+                                    <this.props.BankAccountNumberElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountNumber: {
+                                                        onReady: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onChange={data =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountNumber: {
+                                                        onChange: data
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountNumber: {
+                                                        onFocus: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankAccountNumber: {
+                                                        onBlur: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                    />
+                                </div>
+                                <div className="field">
+                                    <this.props.BankRoutingNumberElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankRoutingNumber: {
+                                                        onReady: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onChange={data =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankRoutingNumber: {
+                                                        onChange: data
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankRoutingNumber: {
+                                                        onFocus: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    bankRoutingNumber: {
+                                                        onBlur: true
+                                                    }
+                                                }
+                                            })
+                                        }
+                                    />
+                                </div>
+                            </fieldset>
+                            <button id="submit">Make Payment</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+const BankElement = withFramePayBankComponent(CardElementComponent);
+class App extends Component {
+    render() {
+        return (
+            <FramePayProvider injectStyle {...params}>
+                <div>
+                    {ReactVersion()}
+                    <BankElement />
+                </div>
+            </FramePayProvider>
+        );
+    }
+}
+ReactDOM.render(<App />, document.getElementById('app'));

package/test/e2e/fixtures/card-separate-brands.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Test Card Page Separate Fields allowed Brands</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="card-separate-brands.js"></script>
+<script src="nav.js"></script>
+</body>
+</html>