stripe-angular

Angular to Stripe module containing useful providers, components, and directives

demo page

Table of Contents

• Install
• Inject
• Init
• Use
  • stripe-card
  • stripe-bank

Install

From a command terminal type the following

npm install stripe-angular --save-dev

Inject

Make stripe-angular available throughout your app

import { NgModule } from "@angular/core";
import { Module as StripeModule } from "stripe-angular"

@NgModule({
  imports: [ StripeModule.forRoot() ]
}) export class AppModule {}

Please note, you only use .forRoot() on your base app module

This ONLY matters if you need to support lazy loading via loadChildren()

Init

You must provide your Stripe account's publishableKey

import { Component } from "@angular/core"
import { StripeScriptTag } from "stripe-angular"

@Component({
  selector: "app",
  template: template
}) export class AppComponent{
  private publishableKey:string = "...YOUR-STRIPE-KEY-HERE..."

  constructor(public StripeScriptTag:StripeScriptTag){
    this.StripeScriptTag.setPublishableKey( this.publishableKey )
  }
}

StripeScriptTag.setPublishableKey performs 3 operations

1. Checks for window.Stripe

1.1 If undefined, head tag is found and script tag with src "https://js.stripe.com/v3/" is added

2. Sets publishableKey in StripeJs library
3. All stripe-angular components use the initialized Stripe instance

Use

A practical example to convert card data into a Stripe token

Requires you to have already initialized Stripe

import { Component } from "@angular/core"
import { StripeToken } from "stripe-angular"

const template=
`
<div *ngIf="invalidError" style="color:red">
  {{ invalidError.message }}
</div>

<stripe-card
  #stripeCard
  (catch) = "onStripeError($event)"
  [(invalid)] = "invalidError"
  (tokenChange) = "setStripeToken($event)"
  (sourceChange) = "setStripeSource($event)"
></stripe-card>

<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>
`

@Component({
  selector: "app-sub-page",
  template: template
}) export class AppComponent{
  extraData = {
    "name": null
    "address_city": null
    "address_line1": null
    "address_line2": null
    "address_state": null
    "address_zip": null
  }

  onStripeInvalid( error:Error ){
    console.log('Validation Error', error)
  }

  setStripeToken( token:StripeToken ){
    console.log('Stripe token', token)
  }

  setStripeSource( source:StripeSource ){
    console.log('Stripe source', source)
  }

  onStripeError( error:Error ){
    console.error('Stripe error', token)
  }
}

stripe-card

<stripe-card #stripeCard
  (catch)        = "$event"
  [(token)]      = "token"
  [(invalid)]    = "invalidError"
></stripe-card>

<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>
<button type="button" (click)="stripeCard.createSource(extraData)">createSource</button>

stripe-bank

see stripe docs

<stripe-bank #stripeBank
  (catch)        = "$event"
  [(token)]      = "token"
  [(invalid)]    = "invalidError"
></stripe-card>

<button type="button" (click)="stripeBank.createToken({...bank_account...})">createToken</button>