Skip to content

Instantly share code, notes, and snippets.

@fedeagripa fedeagripa/billing_form.js

Last active May 28, 2020
Embed
What would you like to do?
billing_form
import {
CardNumberElement,
CardExpiryElement,
CardCVCElement,
injectStripe
} from 'react-stripe-elements';
import uuid from 'uuid/v1';
/* Your other imports for a usual form */
class BillingForm extends Component {
constructor() {
super();
this.state = {
cardInputKey: uuid()
};
this.onSubmit = this.onSubmit.bind(this);
}
async onSubmit(result) {
const { stripe, submitBilling, shopId, initialValues } = this.props;
const data = result.toJS();
/* AT THIS POINT THE CC IS CREATED AT STRIPE AND YOU NEED TO TELL YOUR BACKEND ABOUT IT */
const { token, error } = await stripe.createToken(decamelizeKeys(data));
if (error) {
throw new SubmissionError({
_error: error.message
});
}
/* HERE WE WERE SUBMITING AND LENDING THE INFO TO THE BACKEND */
await submitBilling(shopId, camelizeKeys(token), initialValues.get('name'));
}
render() {
/* all your consts */
return (
....
<form onSubmit={handleSubmit(this.onSubmit)} className="p-3">
/* The rest of your user profile form */
/* CC real info */
<div className="col-lg-3 offset-1">
<div className="form-group">
<label className="form-control-label">Card On File</label>
<div>{brand && last4 ? `${brand} ending in ${last4}` : 'none'}</div>
</div>
<div className="form-group">
<label className="form-control-label">Card Number</label>
<CardNumberElement key={`cardNumber${cardInputKey}`} className="form-control" />
</div>
<div className="form-group">
<label className="form-control-label">Expiry</label>
<CardExpiryElement key={`cardExpiry${cardInputKey}`} className="form-control wd-80" />
</div>
<div className="form-group">
<label className="form-control-label">CVC</label>
<CardCVCElement key={`cardCvc${cardInputKey}`} className="form-control wd-80" />
</div>
</div>
</form>
)
}
}
export default injectStripe(reduxForm({
...
})(BillingForm));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.