angularjs-stripe-elements

    1.0.1 • Public • Published

    angularjs-stripe-element

    npm version npm

    Easily add Stripe Elements in your Angular.js apps.

    Usage

    Install from NPM:

    npm install --save angularjs-stripe-elements

    Include the Stripe.js script in your index.html

    <script src="https://js.stripe.com/v3/"></script>

    From the Stripe website:

    To best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page. Including the script on every page allows Stripe to detect anomalous behavior that may be indicative of fraud as users browse your website.

    Add as a dependency of your app

    import angular from 'angular'
    import 'angularjs-stripe-elements'
     
    angular.module('myApp', [ 'angularjs-stripe-elements'])
     

    Configure the provider

    angular.config(function (StripeElementsProvider) {
      StripeElementsProvider.setAPIKey(STRIPE_API_PUBLISHABLE_KEY)
    })

    Inject the provider into a component's controller

    It's a configured instance of the Stripe object.

    var component = {
      templateUrl: 'templates/payment-form.html',
      controller: MyCtrl
    }
     
    function MyCtrl (StripeElements) {
      var elements = StripeElements.elements()
      var element = elements.create('card', {})
     
      element.on('change', handleChange)
     
      this.element = element
     
      function handleChange (e) {
        this.cardErrors = e.error ? e.error.message : ''
      }
    }

    Add a stripe-element element to your template and pass it your Element instance

    <form method="post" id="payment-form">
     
      <stripe-element instance="$ctrl.element">
        <!-- a Stripe Element will be inserted here. -->
      </stripe-element>
     
      <!-- Used to display form errors -->
      <div id="card-errors" role="alert">{{$ctrl.cardErrors}}</div>
     
      <button>Submit Payment</button>
    </form>

    Make sure to handle the submission of the form inside your controller

    <form ng-submit="$ctrl.handleSubmit" method="post" id="payment-form">
    ...
    </form
    ctrl.handleSubmit = function () {
      StripeElements.createToken(ctrl.element).then(function (result) {
        if (result.error) {
          ctrl.cardErrors = result.error.message
        } else {
          // Send the token to your server.
          console.log(result)
        }
      })
    }
     

    Install

    npm i angularjs-stripe-elements

    DownloadsWeekly Downloads

    307

    Version

    1.0.1

    License

    Apache-2.0

    Unpacked Size

    17.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • kareniel