@rebilly/framepay-react
Version:
A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features
277 lines (265 loc) • 11.1 kB
JavaScript
import React, { Component } from 'react';
import { FramePayProvider, withFramePayCardComponent } from '../../../build';
import {
deepMerge,
prettyDebugRender,
ReactVersion,
renderFixture,
} from './util';
import './style.css';
const params = {
publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
style: {
base: {
color: 'green',
fontSize: '12px',
webkitFontSmoothing: 'auto',
fontFeatureSettings: 'test',
fontStyle: 'italic',
fontVariant: 'normal',
fontStretch: 'none',
fontSomething: 'not-included',
fontOtherThing: 'not-included',
lineHeight: '20px',
},
invalid: {
fontWeight: 'bold',
},
},
classes: {
base: 'rebilly-framepay',
focus: 'rebilly-framepay-focus',
valid: 'rebilly-framepay-valid',
invalid: 'rebilly-framepay-invalid',
buttons: 'rebilly-framepay-buttons',
webkitAutofill: 'rebilly-framepay-webkit-autofill',
},
icon: {
foobar: 123,
display: true,
color: 'blue',
},
};
class CardElementComponent extends Component {
constructor(props) {
super(props);
this.state = {
events: {
number: {
onReady: null,
onChange: null,
onFocus: null,
onBlur: null,
},
cvv: {
onReady: null,
onChange: null,
onFocus: null,
onBlur: null,
},
expiry: {
onReady: null,
onChange: null,
onFocus: null,
onBlur: null,
},
},
token: {
error: null,
data: null,
},
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
/**
*
* @see https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.createtoken
*
*/
this.props.Framepay.createToken(this.formNode, {
billingAddress: {
emails: [
{
label: 'email-extradata',
value: 'email-extradata@email.local',
},
],
},
})
.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.Framepay.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"
placeholder="First Name"
data-rebilly="firstName"
/>
</div>
<div className="field">
<input
type="text"
name="lastName"
placeholder="lastName"
data-rebilly="lastName"
/>
</div>
<div className="field">
<input
type="text"
name="email"
placeholder="Email"
data-rebilly="emails"
/>
</div>
<div className="field">
<input
type="text"
name="phone"
placeholder="Phone"
data-rebilly="phones"
/>
</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.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>
);
}
}
const CardElement = withFramePayCardComponent(CardElementComponent);
class App extends Component {
render() {
return (
<FramePayProvider {...params}>
<div>
{ReactVersion()}
<CardElement />
</div>
</FramePayProvider>
);
}
}
renderFixture(<App />);