stripe_js 1.0.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 40

stripe_js

Experimental package:js bindings for Stripe

Example

<form action="/charge" method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element">
            <!-- a Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors -->
        <div id="card-errors" role="alert"></div>
    </div>

    <button>Submit Payment</button>
</form>
import 'dart:js';
import 'package:js/js.dart';
import 'package:stripe_js/stripe_js.dart';
import 'dart:html';

main() {
// Create a Stripe client
  var stripe = Stripe('STRIPE_TOKEN');

// Create an instance of Elements
  var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
    "base": {
      "color": '#32325d',
      "lineHeight": '18px',
      "fontFamily": '"Helvetica Neue", Helvetica, sans-serif',
      "fontSmoothing": 'antialiased',
      "fontSize": '16px',
      '::placeholder': {"color": '#aab7c4'}
    },
    "invalid": {"color": '#fa755a', "iconColor": '#fa755a'}
  };

// Create an instance of the card Element
  var card = elements.create('card', new ElementsOptions(classes: style));

// Add an instance of the card Element into the `card-element` <div>
  card.mount('#card-element');

// Handle real-time validation errors from the card Element.
  card.on(
    'change',
    allowInterop(([event]) {
      var displayError = document.getElementById('card-errors');
      if (event.error != null) {
        displayError.text = event.error.message;
      } else {
        displayError.text = '';
      }
    }),
  );

// Handle form submission
  var form = document.getElementById('payment-form');
  form.addEventListener(
    'submit',
    allowInterop((event) {
      event.preventDefault();
      stripe.createToken(card).then(
        allowInterop((result) {
          if (result.error != null) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.text = result.error.message;
          } else {
            // Send the token to your server
            print("got token: ${result.token.id}");
          }
        }),
      );
    }),
  );
}

Generating the library

dart_js_facade_gen lib/src/stripe.d.ts > lib/stripe_js.dart
dart_js_facade_gen lib/src/promise.d.ts > lib/src/promise.dart

Changelog

0.0.1

  • Initial version, created by Stagehand

example/main.dart

import 'dart:js';
import 'package:js/js.dart';
import 'package:stripe_js/stripe_js.dart';
import 'dart:html';

main() {
// Create a Stripe client
  var stripe = Stripe('STRIPE_TOKEN');

// Create an instance of Elements
  var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
    "base": {
      "color": '#32325d',
      "lineHeight": '18px',
      "fontFamily": '"Helvetica Neue", Helvetica, sans-serif',
      "fontSmoothing": 'antialiased',
      "fontSize": '16px',
      '::placeholder': {"color": '#aab7c4'}
    },
    "invalid": {"color": '#fa755a', "iconColor": '#fa755a'}
  };

// Create an instance of the card Element
  var card = elements.create('card', new ElementsOptions(classes: style));

// Add an instance of the card Element into the `card-element` <div>
  card.mount('#card-element');

// Handle real-time validation errors from the card Element.
  card.on(
    'change',
    allowInterop(([event]) {
      var displayError = document.getElementById('card-errors');
      if (event.error != null) {
        displayError.text = event.error.message;
      } else {
        displayError.text = '';
      }
    }),
  );

// Handle form submission
  var form = document.getElementById('payment-form');
  form.addEventListener(
    'submit',
    allowInterop((event) {
      event.preventDefault();
      stripe.createToken(card).then(
        allowInterop((result) {
          if (result.error != null) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.text = result.error.message;
          } else {
            // Send the token to your server
            print("got token: ${result.token.id}");
          }
        }),
      );
    }),
  );
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  stripe_js: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:stripe_js/stripe_js.dart';
  
Version Uploaded Documentation Archive
1.0.0 Feb 5, 2018 Go to the documentation of stripe_js 1.0.0 Download stripe_js 1.0.0 archive
0.0.1 Feb 2, 2018 Go to the documentation of stripe_js 0.0.1 Download stripe_js 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
40
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.1 <2.0.0