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!');
});
}
});
});
}]);
@Molnfront

This comment has been minimized.

Copy link

@Molnfront Molnfront commented Feb 6, 2017

Hi,
I am trying to implement form.io with Stripe and found your script. How do you build it in the backend at form.io, so that a form post trigger a call to Stripe with the API key? Or are you using a standalone Ubuntu form.io installation for this? I try to do a serverless setup if it's possible.

@travist

This comment has been minimized.

Copy link
Owner Author

@travist travist commented Feb 6, 2017

Right now the best way to do this would be to kick off a Webhook into the Form.io Webhook Receiver and then from there, you can implement the Stripe Node.js library.

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.