ngx-stripe

ngx-stripe

Angular 2+ wrapper for StripeJS

Features

• Stripe Service
• Lazy script loading

Installation

To install this library, run:

$ npm install ngx-stripe --save

Using the library

Import the NgxStripeModule into the application

The module takes the same parameters as the global Stripe object. The APIKey and the optional options to use Stripe connect

• apiKey: string
• options: { stripeAccount?: string; }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxStripeModule } from 'ngx-stripe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxStripeModule.forRoot({
      apiKey: '***your-stripe-publishable key***'
    }),
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Stripe Service

Once imported, you can inject the StripeService anyplace you need. The stripe script will be loaded the first time the service is injected.

The stripe service expose the same methods as the StripeJS instance but with typescript types. The API is based on Observables so it can be combine with other actions.

In the example below, the component mount the card in the onInit lifecycle.

The buy button create a Stripe token the could be sent to the server for further actions. In this example we just log that to the console

//stripe.html

<form novalidate (ngSubmit)="buy($event)" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe">
  <div id="card-element" class="field" #card></div>
  <button type="submit">
    BUY
  </button>
</form>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

import { StripeService, Elements, Element as StripeElement } from "ngx-stripe";

@Component({
  selector: 'app-stripe-test',
  templateUrl: 'stripe.html'
})
export class StripeTestComponent implements OnInit {
  elements: Elements;
  card: StripeElement;
  @ViewChild('card') cardRef: ElementRef;

  stripeTest: FormGroup;

  constructor(
    private fb: FormBuilder,
    private stripeService: StripeService) {}

  ngOnInit() {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]]
    });
    this.stripeService.elements()
      .subscribe(elements => {
        this.elements = elements;
        // Only mount the element the first time
        if (!this.card) {
          this.card = this.elements.create('card', {
            style: {
              base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSize: '18px',
                '::placeholder': {
                  color: '#CFD7E0'
                }
              }
            }
          });
          this.card.mount(this.cardRef.nativeElement);
        }
      });
  }

  buy() {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card, { name })
      .subscribe(token => {
        if (result.token) {
          // Use the token to create a charge or a customer
          // https://stripe.com/docs/charges
          console.log(result.token);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

StripeCardComponent

As an alternative to the previous example, you could use the StripeCardComponent.

It will make a little bit easier to mount the card.

To fetch the Stripe Element, you could you use either the (onCard) output, or, by using a ViewChild, the public method getCard()

//stripe.html

<form novalidate (ngSubmit)="buy($event)" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe">
  <ngx-stripe-card [options]="cardOptions"></ngx-stripe-card>
  <button type="submit">
    BUY
  </button>
</form>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

import { StripeService, StripeCardComponent } from "ngx-stripe";

@Component({
  selector: 'app-stripe-test',
  templateUrl: 'stripe.html'
})
export class StripeTestComponent implements OnInit {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        lineHeight: '40px',
        fontWeight: 300,
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0'
        }
      }
    }
  };

  stripeTest: FormGroup;

  constructor(
    private fb: FormBuilder,
    private stripeService: StripeService) {}

  ngOnInit() {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]]
    });
  }

  buy() {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card.getCard(), { name })
      .subscribe(result => {
        if (result.token) {
          // Use the token to create a charge or a customer
          // https://stripe.com/docs/charges
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

Testing

The following command run unit & integration tests that are in the tests folder, and unit tests that are in src folder:

npm test 

Building

The following command:

npm run build

• starts TSLint with Codelyzer
• starts AoT compilation using ngc compiler
• creates dist folder with all the files of distribution

To test locally the npm package:

npm run pack-lib

Then you can install it in an app to test it:

npm install [path]to-library-[version].tgz

Publishing

npm run publish-lib

Documentation

To generate the documentation, this starter uses compodoc:

npm run compodoc
npm run compodoc-serve 

License

MIT © Ricardo Sánchez Gregorio

Changelog

10.1.0 - 2020-07-16

• #100 Fix confirmCardSetup returns 400 error, if separated elements are used