Form.io + Stripe Payment Processing

payment.html

<div ng-controller="StipePayment">
  <formio form="form" submission="submission"></formio>
</div>

stripe.js

/**
 * 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!');
          });
        }
      });
    });
  }]);