stripe-angular

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

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

Checks for window.Stripe

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

Sets publishableKey in StripeJs library

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>

rogerb87/stripe-angular