How do I send a POST request with all parameters from a form using an AngularJS directive?

Question

I have made an AngularJS form that integrates Stripe thru a directive. Fiddle here: https://jsfiddle.net/u5h1uece/.

HTML:

Answer 1

I would suggest using a component to wrap the stripe input. You can make this component work with the ng-model directive to pass the card element back to the parent scope as well as apply form validation to the stripe field.

TL;DR - Here's an example Fiddle

First thing you'll want to do is create your stripe object as a service so it can be shared.

app.service('stripe', function () {
    return Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
});

Then you can implement the stripe component to wrap around the stripe input and apply custom ng-model validation.

app.component('stripe', {
    bindings: {
        state: '='
    },
    require: {
        model: 'ngModel'
    },
    controller: function ($element, $timeout, stripe) {
        this.$onInit = function () {
            var ctrl = this;

            // stripe is passed in to controller as a service
            var elements = stripe.elements();
            var card = elements.create('card');
            card.mount($element[0]);

            card.addEventListener('change', function (event) {
                // Attach the event as the state so it is visible
                // to consumers of the stripe component.
                ctrl.state = event;

                // Set the validity of the stripe on the ng-model
                ctrl.model.$setValidity('stripe', event.complete);

                // If the stripe is complete set the card element on 
                // the ng-model, otherwise null out the model value.
                if (event.complete) {
                    ctrl.model.$setViewValue(card);
                } else {
                    ctrl.model.$setViewValue(null);
                }
            });
        }
    }
});

Then in the main controller you can create the stripe token when the form is submitted before you send off the HTTP request.

app.controller('MainCtrl', function ($scope, $http, stripe) {
    $scope.reg = {};
    $scope.onChange = function() {
        console.log($scope.card);
    };
    $scope.register = function () {
        // Create the stripe token and send the registration
        stripe.createToken($scope.card).then(function (result) {
            if (result.error) {
                console.error(result.error);
            } else {
                $scope.reg.stripeToken = result.token;
                $http.post('request-url', $scope.reg).then(function (response) {
                    console.log(response);
                }).catch(function (err) {
                    console.error(err);
                });
            }
        });
    };
});

Now you can simply add a stripe element to your template as follows:

  

    
    Register
    {{ cardState.error.message }}