Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Form.io + Stripe Payment Processing
<div ng-controller="StipePayment">
<formio form="form" submission="submission"></formio>
</div>
/**
* First create a form with the following fields.
* - Credit Card Number - Key = creditCardNumber
* - CVC - Key = cvc
* - Expiry Month - Key = expMonth
* - Expiry Year - Key = expYear
* - Token - Key = token
* - **** ANY OTHER FIELDS YOU WANT ***
*/
angular.module('yourApp')
.controller('CreditCard', ['$scope', 'Formio', function($scope, Formio) {
// Create the Form.io API class.
var formio = new Formio('https://yourapp.form.io/yourform');
$scope.form = {};
$scope.submission = {data: {}};
// Load the form.
formio.loadForm().then(function(form) {
$scope.form = form;
});
// Trigger when a submission is made.
$scope.$on('formSubmission', function(event, submission) {
// Because we have not assigned the URL to the <formio> directive, a request is actually
// not made to Form.io at this point. We are simply getting a callback on the filled out
// data on the form.
var stripePayload = {
number: submission.data.creditCardNumber,
cvc: submission.data.cvc,
exp_month: submission.data.expMonth,
exp_year: submission.data.expYear
};
// Make sure to delete the data from the Form.io submission object so that the
// data is not sent to Form.io.
submission.data.creditCardNumber = '';
submission.data.cvc = '';
submission.data.expMonth = '';
submission.data.expYear = '';
// Make a call to stripe to get the token.
Stripe.card.createToken(stripePayload, function(status, response) {
if (!response.error) {
var token = response.id;
submission.data.token = token;
// Now submit the Form.io submission to the Form.io server which ONLY includes
// the payment token.
formio.saveSubmission(submission).then(function() {
console.log('YAY! You are done!');
});
}
});
});
}]);
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.