Angular Stripe - Convert Billing Form to Stripe Elements

Question

I had an Angular Stripe Checkout form, and I'm trying to upgrade my form to the new Stripe Card Elements , which was introduced recently.

After deleting the form input fields and replacing them with the Stripe Card element, my form looks like this:

<form name="payment" ng-submit="vm.submit()"> <div class="row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- a Stripe Element will be inserted here. --> </div> </div> <button class="btn btn-primary" type="submit" ng-disabled="vm.submitting">Pay!</button> <div ng-show="vm.cardError" class="row"> <div class="has-error"> <p class="help-block">* {{vm.cardError}}</p> </div> </div> </form> 

Earlier in Angular, when the form was submitted, I processed submit() and stripeResponseHandler from the controller. After updating my Angular controller with new changes, my controller now looks like this:

 function PaymentController() { var vm = this; var elements = stripe.elements(); var style = { base: { color: '#32325d', lineHeight: '24px', fontFamily: 'Helvetica Neue', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; vm.card = elements.create('card', {style: style}); vm.card.mount('#card-element'); // Handle real-time validation errors from the card Element. vm.card.addEventListener('change', function(event) { if (event.error) { vm.cardError = event.error.message; } else { vm.cardError = ''; } }); function submit() { vm.cardError = ''; vm.submitting = true; createToken(); } // Send data directly to stripe function createToken() { stripe.createToken(vm.card).then(function(result) { if (result.error) { vm.cardError = result.error.message; vm.submitting = false; } else { // Send the token to your server stripeTokenHandler(result.token); } }); } // Response Handler callback to handle the response from Stripe server function stripeTokenHandler(token) { vm.tokenData = { token: token.id }; .. Process the rest in server ... } } 

The above code works as is. But I am confused by this:

1) Since Stripe now uses DOM Manipulation to insert map elements inside the form, does this make my method higher than in Angular? Meaning, should I no longer do this in the controller and instead move them to a directive? Or it should not be necessary, as the managed element uses stripe.elements() .

2) If I need to have them inside a directive, I'm just not sure how to convert the Angular directive above. First, he manipulates the element, mounting it (which can be added to the directory link function), but later on he continues to use the card element to submit forms and event handlers. Should I do all this inside the directory link itself, are there subordinations inside the directory controller and manipulation of elements in the link?

I am so confused and stuck with what to do here. Can someone give me a sample of how I can address this, if I do it wrong, please?

I am using Angular 1.5.

Answer 1

Now I changed the controller to a directive and put all the jquery and angular codes inside the Link function. This is what my directory code looks like after the upgrade:

 function stripeForm() { // Link Function function link(scope, element, attrs) { scope.submitCard = submitCard; var elements = stripe.elements(); var style = { iconStyle: 'solid', style: { base: { iconColor: '#8898AA', color: '#000', lineHeight: '36px', fontWeight: 300, fontFamily: 'Helvetica Neue', fontSize: '19px', '::placeholder': { color: '#8898AA', }, }, invalid: { iconColor: '#e85746', color: '#e85746', } }, classes: { focus: 'is-focused', empty: 'is-empty', }, }; var card = elements.create('card', style); card.mount('#card-element'); // Handle real-time validation errors from the card Element. card.on('change', function(event) { setOutcome(event); }); // Form Submit Button Click function submitCard() { var errorElement = document.querySelector('.error'); errorElement.classList.remove('visible'); createToken(); } // Send data directly to stripe server to create a token (uses stripe.js) function createToken() { stripe.createToken(card).then(setOutcome); } // Common SetOutcome Function function setOutcome(result) { var errorElement = document.querySelector('.error'); errorElement.classList.remove('visible'); if (result.token) { // Use the token to create a charge or a customer stripeTokenHandler(result.token); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } // Response Handler callback to handle the response from Stripe server function stripeTokenHandler(token) { ..send to server ... } } // DIRECTIVE return { restrict: 'A', replace: true, templateUrl: 'payment/PaymentForm.html' link: link } } 

My HTML file now looks like this:

 <form ng-submit="submitCard()"> <div> <label> <div id="card-element" class="field"></div> </label> </div> <div> <button class="btn btn-primary pull-right" type="submit">Pay!</button> <button class="btn btn-danger pull-left" type="button" ng-click="cancel()">Cancel</button> </div> <div> <div class="error"></div> </div> </form>