@rebilly/framepay-react 4.0.6 → 5.0.0

package/test/e2e/fixtures/card-separate-rebilly-fields.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,13 +30,13 @@ 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 {
@@ -48,25 +48,25 @@ class CardElementComponent extends Component {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 cvv: {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 expiry: {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
-                }
+                    onBlur: null,
+                },
             },
             token: {
                 error: null,
-                data: null
-            }
+                data: null,
+            },
         };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
@@ -79,19 +79,19 @@ class CardElementComponent extends Component {
          *
          */
         this.props.Rebilly.createToken(this.formNode, {
-            billingAddress:{
+            billingAddress: {
                 emails: [
                     {
                         label: 'email-extradata',
-                        value: 'email-extradata@email.local'
-                    }
-                ]
-            }
+                        value: 'email-extradata@email.local',
+                    },
+                ],
+            },
         })
-            .then(data => {
+            .then((data) => {
                 this.deepUpdateState({ token: { error: false, data } });
             })
-            .catch(err => {
+            .catch((err) => {
                 this.deepUpdateState({ token: { error: true, data: err } });
             });
     }
@@ -110,7 +110,7 @@ class CardElementComponent extends Component {
                     <div className="example-2">
                         <form
                             id="form"
-                            ref={node => (this.formNode = node)}
+                            ref={(node) => (this.formNode = node)}
                             method="post"
                             onSubmit={this.handleSubmit}
                         >
@@ -151,29 +151,29 @@ class CardElementComponent extends Component {
                                         onReady={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    number: { onReady: true }
-                                                }
+                                                    number: { onReady: true },
+                                                },
                                             })
                                         }
-                                        onChange={data =>
+                                        onChange={(data) =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    number: { onChange: data }
-                                                }
+                                                    number: { onChange: data },
+                                                },
                                             })
                                         }
                                         onFocus={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    number: { onFocus: true }
-                                                }
+                                                    number: { onFocus: true },
+                                                },
                                             })
                                         }
                                         onBlur={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    number: { onBlur: true }
-                                                }
+                                                    number: { onBlur: true },
+                                                },
                                             })
                                         }
                                     />
@@ -184,29 +184,29 @@ class CardElementComponent extends Component {
                                         onReady={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    cvv: { onReady: true }
-                                                }
+                                                    cvv: { onReady: true },
+                                                },
                                             })
                                         }
-                                        onChange={data =>
+                                        onChange={(data) =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    cvv: { onChange: data }
-                                                }
+                                                    cvv: { onChange: data },
+                                                },
                                             })
                                         }
                                         onFocus={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    cvv: { onFocus: true }
-                                                }
+                                                    cvv: { onFocus: true },
+                                                },
                                             })
                                         }
                                         onBlur={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    cvv: { onBlur: true }
-                                                }
+                                                    cvv: { onBlur: true },
+                                                },
                                             })
                                         }
                                     />
@@ -217,29 +217,29 @@ class CardElementComponent extends Component {
                                         onReady={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    expiry: { onReady: true }
-                                                }
+                                                    expiry: { onReady: true },
+                                                },
                                             })
                                         }
-                                        onChange={data =>
+                                        onChange={(data) =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    expiry: { onChange: data }
-                                                }
+                                                    expiry: { onChange: data },
+                                                },
                                             })
                                         }
                                         onFocus={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    expiry: { onFocus: true }
-                                                }
+                                                    expiry: { onFocus: true },
+                                                },
                                             })
                                         }
                                         onBlur={() =>
                                             this.deepUpdateState({
                                                 events: {
-                                                    expiry: { onBlur: true }
-                                                }
+                                                    expiry: { onBlur: true },
+                                                },
                                             })
                                         }
                                     />
@@ -259,16 +259,7 @@ 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);
-                }}
-            >
+            <FramePayProvider injectStyle {...params}>
                 <div>
                     {ReactVersion()}
                     <CardElement />

package/test/e2e/fixtures/card-separate.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,32 +48,32 @@ class CardElementComponent extends Component {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 cvv: {
                     onReady: null,
                     onChange: null,
                     onFocus: null,
-                    onBlur: null
+                    onBlur: null,
                 },
                 expiry: {
                     onReady: 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);
     }
@@ -87,30 +86,30 @@ 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 } });
             });
     }
@@ -120,108 +119,211 @@ class CardElementComponent extends Component {
     }
 
     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.CardNumberElement
-                                    onReady={() => this.deepUpdateState({ events: { number: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({ events: { number: { onChange: data } } })}
-                                    onFocus={() => this.deepUpdateState({ events: { number: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { number: { onBlur: true } } })}
-                                />
-                            </div>
+        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.CardNumberElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onReady: true },
+                                                },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onChange: data },
+                                                },
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    number: { onBlur: true },
+                                                },
+                                            })
+                                        }
+                                    />
+                                </div>
 
-                            <div className="field">
-                                <this.props.CardCvvElement
-                                    onReady={() => this.deepUpdateState({ events: { cvv: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({ events: { cvv: { onChange: data } } })}
-                                    onFocus={() => this.deepUpdateState({ events: { cvv: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { cvv: { onBlur: true } } })}
-                                />
-                            </div>
+                                <div className="field">
+                                    <this.props.CardCvvElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onReady: true },
+                                                },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onChange: data },
+                                                },
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    cvv: { onBlur: true },
+                                                },
+                                            })
+                                        }
+                                    />
+                                </div>
 
-                            <div className="field">
-                                <this.props.CardExpiryElement
-                                    onReady={() => this.deepUpdateState({ events: { expiry: { onReady: true } } })}
-                                    onChange={(data) => this.deepUpdateState({ events: { expiry: { onChange: data } } })}
-                                    onFocus={() => this.deepUpdateState({ events: { expiry: { onFocus: true } } })}
-                                    onBlur={() => this.deepUpdateState({ events: { expiry: { onBlur: true } } })}
-                                />
-                            </div>
-                        </fieldset>
-                        <button id="submit">Make Payment</button>
-                    </form>
+                                <div className="field">
+                                    <this.props.CardExpiryElement
+                                        onReady={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onReady: true },
+                                                },
+                                            })
+                                        }
+                                        onChange={(data) =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onChange: data },
+                                                },
+                                            })
+                                        }
+                                        onFocus={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { onFocus: true },
+                                                },
+                                            })
+                                        }
+                                        onBlur={() =>
+                                            this.deepUpdateState({
+                                                events: {
+                                                    expiry: { 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'));