@rebilly/framepay-react 4.0.6 → 5.1.0

package/test/e2e/fixtures/checkout-combined.js

@@ -18,11 +18,11 @@ const params = {
             fontStretch: 'none',
             fontSomething: 'not-included',
             fontOtherThing: 'not-included',
-            lineHeight: '20px'
+            lineHeight: '20px',
         },
         invalid: {
-            fontWeight: 'bold'
-        }
+            fontWeight: 'bold',
+        },
     },
     classes: {
         base: 'rebilly-framepay',
@@ -30,17 +30,16 @@ const params = {
         valid: 'rebilly-framepay-valid',
         invalid: 'rebilly-framepay-invalid',
         buttons: 'rebilly-framepay-buttons',
-        webkitAutofill: 'rebilly-framepay-webkit-autofill'
+        webkitAutofill: 'rebilly-framepay-webkit-autofill',
     },
     icon: {
         foobar: 123,
         display: true,
-        color: 'blue'
-    }
+        color: 'blue',
+    },
 };
 
 class CardElementComponent extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -49,19 +48,19 @@ class CardElementComponent extends Component {
                 onError: null,
                 onChange: null,
                 onFocus: null,
-                onBlur: null
+                onBlur: null,
             },
             billingAddress: {
                 firstName: 'first-name-value',
                 lastName: 'last-name-value',
                 address: 'address-value',
                 country: 'GB',
-                region: 'region-value'
+                region: 'region-value',
             },
             token: {
                 error: null,
-                data: null
-            }
+                data: null,
+            },
         };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
@@ -74,126 +73,177 @@ class CardElementComponent extends Component {
          *
          */
         const billingAddress = {
-            ...this.state.billingAddress
+            ...this.state.billingAddress,
         };
         if (billingAddress.emails) {
             billingAddress.emails = [
                 {
                     label: 'Email',
-                    value: billingAddress.emails
-                }
+                    value: billingAddress.emails,
+                },
             ];
         }
         if (billingAddress.phoneNumbers) {
             billingAddress.phoneNumbers = [
                 {
                     label: 'Phone Number',
-                    value: billingAddress.phoneNumbers
-                }
+                    value: billingAddress.phoneNumbers,
+                },
             ];
         }
 
         this.props.Rebilly.createToken(this.formNode, { billingAddress })
-            .then(data => {
+            .then((data) => {
                 this.deepUpdateState({ token: { error: false, data } });
             })
-            .catch(err => {
+            .catch((err) => {
                 this.deepUpdateState({ token: { error: true, data: err } });
             });
     }
 
     deepUpdateState(data) {
-        this.setState(prevState => {
+        this.setState((prevState) => {
             return deepMerge(prevState, 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.CardElement
-                                    onError={(err) => this.deepUpdateState({ events: { onError: err } })}
-                                    onReady={() => this.deepUpdateState({ events: { onReady: true } })}
-                                    onChange={(data) => this.deepUpdateState({ events: { onChange: data } })}
-                                    onFocus={() => this.deepUpdateState({ events: { onFocus: true } })}
-                                    onBlur={() => this.deepUpdateState({ events: { onBlur: true } })}
-                                />
-                            </div>
-                        </fieldset>
-                        <button id="submit">Make Payment</button>
-                    </form>
+        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.CardElement
+                                        onError={(err) =>
+                                            this.deepUpdateState({
+                                                events: { onError: err },
+                                            })
+                                        }
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: { onReady: true },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: { onChange: data },
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: { onFocus: true },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: { onBlur: true },
+                                            })
+                                        }
+                                    />
+                                </div>
+                            </fieldset>
+                            <button id="submit">Make Payment</button>
+                        </form>
+                    </div>
                 </div>
             </div>
-        </div>);
+        );
     }
 }
 
 const CardElement = withFramePayCardComponent(CardElementComponent);
 
 class App extends Component {
-
     render() {
-        return (<FramePayProvider injectStyle
-                                  {...params}
-                                  onReady={() => {
-                                      //console.log('FramePayProvider.onReady');
-                                  }}
-                                  onError={(err) => {
-                                      //console.log('FramePayProvider.onError', err);
-                                  }}>
-            <div>
-                {ReactVersion()}
-                <CardElement/>
-            </div>
-        </FramePayProvider>);
+        return (
+            <FramePayProvider injectStyle {...params}>
+                <div>
+                    {ReactVersion()}
+                    <CardElement />
+                </div>
+            </FramePayProvider>
+        );
     }
 }
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

package/test/e2e/fixtures/google-pay.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import {
     FramePayProvider,
-    withFramePayGooglePayComponent
+    withFramePayGooglePayComponent,
 } from '../../../build';
 import { prettyDebugRender, ReactVersion } from './util';
 import './style.css';
@@ -15,12 +15,11 @@ const params = {
     transactionData: {
         amount: 10,
         currency: 'USD',
-        label: 'Purchase label 1'
-    }
+        label: 'Purchase label 1',
+    },
 };
 
 class App extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -36,10 +35,10 @@ class App extends Component {
                 onReady={() => {
                     console.log('FramePayProvider.onReady');
                 }}
-                onError={err => {
+                onError={(err) => {
                     console.log('FramePayProvider.onError', err);
                 }}
-                onTokenReady={token => this.setState({ token })}
+                onTokenReady={(token) => this.setState({ token })}
             >
                 <div>
                     {ReactVersion()}
@@ -57,7 +56,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayGooglePayComponent(App);
-ReactDOM.render(
-    <WrappedApp />,
-    document.getElementById('app')
-);
+ReactDOM.render(<WrappedApp />, document.getElementById('app'));

package/test/e2e/fixtures/iban.js

@@ -6,7 +6,7 @@ import { deepMerge, prettyDebugRender, ReactVersion } from './util';
 import './style.css';
 
 const params = {
-    publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h'
+    publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
 };
 
 const emptyEvents = {
@@ -14,8 +14,8 @@ const emptyEvents = {
         onReady: null,
         onChange: null,
         onFocus: null,
-        onBlur: null
-    }
+        onBlur: null,
+    },
 };
 
 class IBANlementComponent extends Component {
@@ -23,19 +23,19 @@ class IBANlementComponent extends Component {
         super(props);
         this.state = {
             events: {
-                ...emptyEvents
+                ...emptyEvents,
             },
             billingAddress: {
                 firstName: 'first-name-value',
                 lastName: 'last-name-value',
                 address: 'address-value',
                 country: 'GB',
-                region: 'region-value'
+                region: 'region-value',
             },
             token: {
                 error: null,
-                data: null
-            }
+                data: null,
+            },
         };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
@@ -49,37 +49,38 @@ class IBANlementComponent extends Component {
          */
 
         const billingAddress = {
-            ...this.state.billingAddress
+            ...this.state.billingAddress,
         };
         if (billingAddress.emails) {
             billingAddress.emails = [
                 {
                     label: 'Email',
-                    value: billingAddress.emails
-                }
+                    value: billingAddress.emails,
+                },
             ];
         }
         if (billingAddress.phoneNumbers) {
             billingAddress.phoneNumbers = [
                 {
                     label: 'Phone Number',
-                    value: billingAddress.phoneNumbers
-                }
+                    value: billingAddress.phoneNumbers,
+                },
             ];
         }
 
         this.props.Rebilly.createToken(this.formNode, { billingAddress })
-            .then(data => {
+            .then((data) => {
                 this.deepUpdateState({
                     events: { ...emptyEvents },
                     token: {
-                        error: false, data
-                    }
+                        error: false,
+                        data,
+                    },
                 });
             })
-            .catch(err => {
+            .catch((err) => {
                 this.deepUpdateState({
-                    token: { error: true, data: err }
+                    token: { error: true, data: err },
                 });
             });
     }
@@ -97,7 +98,7 @@ class IBANlementComponent extends Component {
                     <div className="example-2">
                         <form
                             id="form"
-                            ref={node => (this.formNode = node)}
+                            ref={(node) => (this.formNode = node)}
                             method="post"
                             onSubmit={this.handleSubmit}
                         >
@@ -110,11 +111,11 @@ class IBANlementComponent extends Component {
                                         defaultValue={
                                             this.state.billingAddress.firstName
                                         }
-                                        onChange={e => {
+                                        onChange={(e) => {
                                             this.deepUpdateState({
                                                 billingAddress: {
-                                                    firstName: e.target.value
-                                                }
+                                                    firstName: e.target.value,
+                                                },
                                             });
                                         }}
                                     />
@@ -127,11 +128,11 @@ class IBANlementComponent extends Component {
                                         defaultValue={
                                             this.state.billingAddress.lastName
                                         }
-                                        onChange={e => {
+                                        onChange={(e) => {
                                             this.deepUpdateState({
                                                 billingAddress: {
-                                                    lastName: e.target.value
-                                                }
+                                                    lastName: e.target.value,
+                                                },
                                             });
                                         }}
                                     />
@@ -144,11 +145,11 @@ class IBANlementComponent extends Component {
                                         defaultValue={
                                             this.state.billingAddress.emails
                                         }
-                                        onChange={e => {
+                                        onChange={(e) => {
                                             this.deepUpdateState({
                                                 billingAddress: {
-                                                    emails: e.target.value
-                                                }
+                                                    emails: e.target.value,
+                                                },
                                             });
                                         }}
                                     />
@@ -162,11 +163,12 @@ class IBANlementComponent extends Component {
                                             this.state.billingAddress
                                                 .phoneNumbers
                                         }
-                                        onChange={e => {
+                                        onChange={(e) => {
                                             this.deepUpdateState({
                                                 billingAddress: {
-                                                    phoneNumbers: e.target.value
-                                                }
+                                                    phoneNumbers:
+                                                        e.target.value,
+                                                },
                                             });
                                         }}
                                     />
@@ -177,36 +179,36 @@ class IBANlementComponent extends Component {
                                             this.deepUpdateState({
                                                 events: {
                                                     iban: {
-                                                        onReady: true
-                                                    }
-                                                }
+                                                        onReady: true,
+                                                    },
+                                                },
                                             })
                                         }
-                                        onChange={data =>
+                                        onChange={(data) =>
                                             this.deepUpdateState({
                                                 events: {
                                                     iban: {
-                                                        onChange: data
-                                                    }
-                                                }
+                                                        onChange: data,
+                                                    },
+                                                },
                                             })
                                         }
                                         onFocus={() =>
                                             this.deepUpdateState({
                                                 events: {
                                                     iban: {
-                                                        onFocus: true
-                                                    }
-                                                }
+                                                        onFocus: true,
+                                                    },
+                                                },
                                             })
                                         }
                                         onBlur={() =>
                                             this.deepUpdateState({
                                                 events: {
                                                     iban: {
-                                                        onBlur: true
-                                                    }
-                                                }
+                                                        onBlur: true,
+                                                    },
+                                                },
                                             })
                                         }
                                     />
@@ -229,11 +231,11 @@ class App extends Component {
             <FramePayProvider injectStyle {...params}>
                 <div>
                     {ReactVersion()};
-                    <IBANElement/>
+                    <IBANElement />
                 </div>
             </FramePayProvider>
         );
     }
 }
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));