Angular stripe example

After looking at a whole bunch of tutorials, their submission form is very strict and require you to use their type of form.

I needed a custom form that takes their credit card number to get a valid stripe credit card token and then submit the form.

To do this what I did is extract the credit card field, cvc, expiry date and create a javascript form that I will submit from the controller.

make sure you include stripe file.

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

controller.js

angular.module('registercontroller',[])
.controller('registerCtrl', ['$scope', '$ionicPopup', registerCtrl])
function registerCtrl($s, $i) {
    $s.profile = {
        username: '',
        number: '',
        expiry: '',
        cvc: '',
        stripeToken: ''
      };
      $s.signUp = function(form){
        if(form.$valid) {
            var stripeForm = {
                number: $s.profile.number.replace(/ /g,''),
                exp_month: $s.profile.expiry.month,
                exp_year: $s.profile.expiry.year,
                cvc: $s.profile.cvc
            };

            var f = document.createElement("form");
            f.setAttribute('method',"post");
            f.setAttribute('action',"");

            var number = document.createElement("input");
            number.setAttribute('type',"text");
            number.setAttribute('data-stripe',"number");
            number.setAttribute('value', stripeForm.number);

            var cvc = document.createElement("input");
            cvc.setAttribute('type',"text");
            cvc.setAttribute('data-stripe',"cvc");
            cvc.setAttribute('value', $s.profile.cvc);

            var exp_month = document.createElement("input");
            exp_month.setAttribute('type',"text");
            exp_month.setAttribute('data-stripe',"exp_month");
            exp_month.setAttribute('value', stripeForm.exp_month);

            var exp_year = document.createElement("input");
            exp_year.setAttribute('type',"text");
            exp_year.setAttribute('data-stripe',"exp_year");
            exp_year.setAttribute('value', stripeForm.exp_year);

            f.appendChild(number);
            f.appendChild(cvc);
            f.appendChild(exp_month);
            f.appendChild(exp_year);

            window.Stripe.card.createToken(f, function (status, response) {
                console.log('status', status);
                console.log('response', response);
                if (response.error) {
                    var alert = $i.alert({
                        title: 'Credit Card Error',
                        template: "Sorry your credit card information is not correct",
                        buttons: [
                        { text: 'Ok',
                        type: 'button-calm'
                        }
                        ]
                    });
                } else {
                    $s.profile.stripeToken = response.id;
                    register($s.profile);
                    //else ends
                }
            });

        }
      };
}

HTML:
This is the sample form I used

<form  class="signinForm" name="signupForm" novalidate="" ng-submit="signUp(signupForm)">
<div class="input">

	<p class="w90 mx-5p">Name</p>
  <label class="item item-input">
    <input type="text" placeholder="Example Name" name="username" ng-model="profile.username" ng-minlength="2" ng-maxlength="15" required>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.username.$dirty && signupForm.username.$error">
          <div class="form-error" ng-message="required">Your UserName is Required.</div>
          <div class="form-error" ng-message="minlength">Your UserName cannot be that short.</div>
          <div class="form-error" ng-message="maxlength">Your UserName must be less than 15 characters</div>
  </div>

  <p class="w90 mx-5p mt2">Phone Number</p>

  <label class="item item-input">
    <input type="tel" name="telephone" ng-model="profile.telephone" ng-minlength="2"  required onlynum>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.telephone.$dirty && signupForm.telephone.$error">
          <div class="form-error" ng-message="required">Your Phone Number is Required.</div>
          <div class="form-error" ng-message="minlength">Your Phone Number cannot be that short.</div>
  </div>

  <p class="w90 mx-5p mt2">Email</p>

  <label class="item item-input">
    <input type="email" name="email" ng-model='profile.email' placeholder="example@outlook.com" ng-model-options="{updateOn: 'blur'}" ng-minlength="1"  required blacklist>
  </label>
 <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.email.$dirty && signupForm.email.$error">
          <div class="form-error" ng-message="required">Your Email is Required.</div>
          <div class="form-error" ng-message="minlength">Your Email cannot be that short.</div>
          <div class="form-error" ng-message="email">That's not a valid Email</div>
          <div class="form-error" ng-message="blacklist">Your Email must be an outlook email.</div>
  </div>
   <p class="w90 mx-5p mt2">Email Password</p>

  <label class="item item-input">
    <input type="password" placeholder="*******" name="password" ng-model="profile.password" ng-minlength="8"  ng-maxlength="25" required>
  </label>
  <small class="passwordtext">Please enter in your actual email password so we can retrieve emails from it.</small>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.password.$dirty && signupForm.password.$error">
          <div class="form-error" ng-message="required">This field is required.</div>
          <div class="form-error" ng-message="minlength">This field is must be at least 8 characters.</div>
          <div class="form-error" ng-message="maxlength">This field is must be less than 25 characters</div>
  </div>
   <p class="w90 mx-5p mt2">Subscription plan</p>
  <label class="item item-input pa0">
    <input type="text" value="standard plan $5.99 per month" readonly=""
  </label>

  <p class="w90 mx-5p mt2">Credit Card Number</p>
  <label class="item item-input">
    <card-number-input class="form-control" name="number" ng-model="profile.number" card-type="cardType"></card-number-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.number.$dirty && signupForm.number.$error">
    <div class="form-error" ng-message="cardNumber">Your credit card number is not valid.</div>
  </div>

  <p class="w90 mx-5p mt2">Expiry Date</p>
  <label class="item item-input">
  <!-- <input type="text" name="expiry" ng-model="profile.expiry" payments-validate="expiry" payments-format="expiry" placeholder="mm/yyyy" /> -->
   <card-expiry-input class="form-control" name="expiry" ng-model="profile.expiry" placeholder="mm/yyyy"></card-expiry-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.expiry.$dirty && signupForm.expiry.$error">
    <div class="form-error" ng-message="cardExpiry">Your expiry date is not valid.</div>
  </div>

  <p class="w90 mx-5p mt2">CVC</p>
  <label class="item item-input">
  <card-cvc-input class="form-control" name="cvc" ng-model="profile.cvc" placeholder="****"></card-cvc-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.cvc.$dirty && signupForm.cvc.$error">
    <div class="form-error" ng-message="cardCvc">CVC is too short.</div>
  </div>

    <button class="button w90 blue-button">
      Submit
    </button>
</div>
</form>