Skip to content

Instantly share code, notes, and snippets.

@travist
Last active August 3, 2018 17:37
Show Gist options
  • Save travist/486b93baf6d332ab27a481b93d7ebe85 to your computer and use it in GitHub Desktop.
Save travist/486b93baf6d332ab27a481b93d7ebe85 to your computer and use it in GitHub Desktop.
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!');
});
}
});
});
}]);
@travist
Copy link
Author

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