javascript - Adding Stripe payment data to a Multi Part Wizard form in AngularJS -

i'm trying create 3 page wizard in angular js, final part taking payment details.

however, looking through stripe docs notice there no name attributes on of form elements related stripe.

at moment i'm using buttons link next step in wizard, , have single form, submitted together. 3 page wizard based on tutorial:

https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

as can see i'm using:

<div class="col-xs-6 col-xs-offset-3">     <a ui-sref="form.payment" class="btn btn-danger">     next section <span class="glyphicon glyphicon-circle-arrow-right"></span>     </a> </div> 

to navigate next form page.

my question - how can submit both objects bound model (formdata), and stripe data within same form. possible? if - how can , still keep wizard functionality?

below controller:

angular.module('formapp') .controller('formcontroller', ['$scope', 'appointment', function($scope, appointment) {      // store of our form data in object     $scope.formdata = {};     $scope.formdata.appintment_date = "";     $scope.opened        = false;     /*$scope.momentdate = moment($scope.formdata.date);*/     $scope.time1 = new date();     $scope.showmeridian = true;     //datepicker     $scope.dateoptions = {         'year-format': "'yy'",         'show-weeks' : false,          'show-time':true     };      // function process form     $scope.processform = function() {             console.log($scope.formdata);          var date = moment($scope.formdata.date).format("dddd, mmmm yyyy, h:mm:ss a");             /*console.log(date);*/             var app = new appointment($scope.formdata);             //console.log(app);             app.$save();     }; }]); 

home.html

<div class="page-header text-center">                                    <!-- links our nested states using relative paths -->                         <!-- add active class if state matches our ui-sref -->                         <div id="status-buttons" class="text-center">                             <a ui-sref-active="active" ui-sref=".date"><span>1</span> date</a>                             <a ui-sref-active="active" ui-sref=".address"><span>2</span> address</a>                             <a ui-sref-active="active" ui-sref=".payment"><span>3</span> payment</a>                         </div>                     </div> <!-- use ng-submit catch form submission , use our angular function -->             <form id="signup-form" ng-submit="processform()">               <!-- our nested state views injected here -->                <div id="form-views" ui-view></div>             </form> 

form-interests.html

<div class="form-group">     <label for="name">name</label>     <input type="text" class="form-control" name="name" ng-model="formdata.name" required> </div>  <div class="form-group">     <label for="email">email</label>     <input type="text" class="form-control" name="email" ng-model="formdata.email" required> </div>  <div class="form-group">     <label for="email">address</label>    <input type="text" class="form-control" name="address" ng-model="formdata.address_1" placeholder="e.g. unit , street"required>     <input type="text" class="form-control" name="address" ng-model="formdata.city" placeholder="city e.g. toronto">     <input type="text" class="form-control" name="address" ng-model="formdata.postcode" placeholder="postal code" required>  </div>  <div class="form-group">     <label for="email">phone number</label>    <input type="text" class="form-control" name="address" ng-model="formdata.phone" placeholder="(416) - 222 5555"required>  </div>  <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3">      <a ui-sref="form.payment" class="btn btn-danger">     next section <span class="glyphicon glyphicon-circle-arrow-right"></span>     </a> </div> </div> 

form-payment.html - note lack of name attributes.

<!-- form-payment.html -->   <span class="payment-errors"></span>     <div class="form-group">     <label for="card_number">card number</label>       <input type="text" class="form-control" size="20" data-stripe="number"/>     </div>   <div class="form-row">     <label for="cvc"> cvc</label>       <input type="text" class="form-control" size="4" data-stripe="cvc"/>   </div>   <div class="form-row">     <label for="exp_month"> expiration (month)</label>       <input type="text" class="form-control" size="2" data-stripe="exp-month"/>  <label for="exp_month"> expiration (year)</label>      <input type="text" class="form-control" size="4" data-stripe="exp-year"/>   </div> <div class="text-center">     <span class="glyphicon glyphicon-heart"></span>     <h3>thanks money!</h3>     <button type="submit" id="submitbutton" class="btn">submit</button> </div>