Last active
August 3, 2018 17:37
-
-
Save travist/486b93baf6d332ab27a481b93d7ebe85 to your computer and use it in GitHub Desktop.
Form.io + Stripe Payment Processing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div ng-controller="StipePayment"> | |
<formio form="form" submission="submission"></formio> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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!'); | |
}); | |
} | |
}); | |
}); | |
}]); |
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
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.