stripe-angular

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

demo page

Table of Contents

• Install
• Inject
  • Async Inject
• Use
  • stripe-card
  • stripe-bank
  • stripe-source
• Examples

Install

From a command terminal type the following

npm install stripe-angular @types/stripe-v3 --save

Inject

Make stripe-angular available throughout your app

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

@NgModule({
  imports: [ StripeModule.forRoot("...YOUR-STRIPE-KEY-HERE...") ]
}) 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()

NOTE WORTHY Here are the operations preformed on construction on Stripe functionality

• Checking for window.Stripe existence
  • If undefined THEN script tag with src https://js.stripe.com/v3/ is append to html head tag
• Set publishableKey in StripeJs library
• All stripe-angular components reuse the same initialized Stripe instance (Injector)

Inject Async

The stripe key can be set asynchronously.

Step 1, In app.module.ts set key to empty string

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

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

Step 2, Where you use Stripe elements, do a variation of this code below, according to your needs.

import { StripeScriptTag } from "stripe-angular"

class Component {
  constructor(private stripeScriptTag: StripeScriptTag) {
    if (!this.stripeScriptTag.StripeInstance) {
      this.stripeScriptTag.setPublishableKey('');
    }
  }
}

Capture Payment Method

The Payment Methods API replaces the existing Tokens and Sources APIs as the recommended way for integrations to collect and store payment information.

It is not longer recommended to use Stripe terminologies for "Source" and "Token". Use "Payment Method" instead.

Read more here

Use

A practical example to convert card data into a Stripe Payment Method

Requires you to have already initialized Stripe

import { Component } from "@angular/core"

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

<stripe-card #stripeCard
  (catch) = "onStripeError($event)"
  [(complete)] = "cardDetailsFilledOut"
  [(invalid)] = "invalidError"
  (cardMounted) = "cardCaptureReady = 1"
  (paymentMethodChange) = "setPaymentMethod($event)"
  (tokenChange) = "setStripeToken($event)"
  (sourceChange) = "setStripeSource($event)"
></stripe-card>

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

@Component({
  selector: "app-sub-page",
  template: template
}) export class AppComponent{
  cardCaptureReady = false

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

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

  setPaymentMethod( token: stripe.paymentMethod.PaymentMethod ){
    console.log('Stripe Payment Method', token)
  }

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

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

stripe-card

Builds a display for card intake and then helps tokenize those inputs

Examples

stripe-card common example

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

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

stripe-card token bindings

<stripe-card #stripeCard
  [(token)]     = "token"
  (tokenChange) = "$event"
></stripe-card>
<button type="button" (click)="stripeCard.createToken()">createToken</button>

stripe-bank

Helps tokenize banking data. Does NOT include display inputs like stripe-card does. see stripe docs

For stripe-bank input fields, be sure to use the above mentioned link

Here is the most commonly used input fields:

country: "US",
currency: "usd",
routing_number: "110000000",
account_number: "000123456789",
account_holder_name: "Jenny Rosen",
account_holder_type: "individual"

Example

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

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

stripe-source

This approach is not recommended any more and it is instead recommended to use the Payment Method terminology and functionality

Documentation can be read here

• stripe sources docs
• best practices
• api reference

Example

stripe-card source bindings

<stripe-card #stripeCard
  [(source)]    = "source"
  (sourceChange) = "$event"
></stripe-card>
<button type="button" (click)="stripeCard.createSource()">createSource</button>

Another Examples

stripe-card payment method bindings

<stripe-card #stripeCard
  (catch)               = "$event"
  (changed)             = "$event"
  [(invalid)]           = "invalidError"
  [(complete)]          = "cardDetailsFilledOut"
  (cardMounted)         = "cardCaptureReady = 1"
  [(paymentMethod)]     = "source"
  (paymentMethodChange) = "setPaymentMethod($event)"
></stripe-card>
<button type="button" (click)="stripeCard.createPaymentMethod()">createPaymentMethod</button>

stripe-angular - Change Log

All notable changes to this project will be documented here.

[1.9.1] - (2023-03)

• Upgraded devDependencies with MAJOR and MINOR version changes
• Upgraded from Angular 12 to 13
• tsconfig.json.target changed from es5 to es6
• tsconfig.json.lib replace es2015 for es2020

[1.8.0] - (2023-02)

• Upgraded devDependencies with MAJOR and MINOR version changes
• Upgraded from Angular 11 to 12

[1.7.0] - (2021-03-23)

• Support SSR by injecting Document instead of openly using window variable

[1.6.0] - (2021-02-11)

• stripe-card supports createOptions

[1.5.3] - (2021-01-04)

• stripe-card directive now supports (changed) event

[1.5.1] - (2021-01-04)

• Create Card Payment Method
• Stripe data typings instead of created ones
  • Errors like has no exported member StripeToken means you need to use stripe.Token instead as your typing
  • See issue #51
• Demo area has much more testing functionality
• installing @types/stripe-v3 is now a required peerDependency

[1.4.3] - (2020-11-19)

• more demo support
• fixes

[1.4.0] - (2020-11-19)

• stripe-card now has [(complete)], [complete] and (completeChange) bindings
• Better typings

[1.3.0] - (2020-11-18)

• built on Angular11
• creating payment source now accepts parameters
  • metadata, owner, and so on...

[1.1.0] - (2020-05-25)

• stripe-card now has (cardMounted) output binding

[0.6.0] - (2019-08-17)

• move templates into components to just satify Ivy

[0.5.0] - (2019-06-07)

• built in strict mode
• built on ng8
• upgraded test process

[0.4.2] - (2019-04-03)

• Documentation
• Remove extra data from createSource
• stripe-bank does NOT work with Stripe source. Removed for now

[0.4.1] - (2019-03-25)

• Made stripe-source a base component of stripe-bank and stripe-card

[0.4.0] - (2019-03-25)

• BETA: Added support for creating sources as stripe-source component

[0.3.2] - (2018-03-25)

• Fix loading Stripe when its already been loaded before

[0.3.1] - (2018-03-25)

• Fix context of StripeCard component init function
• updated dependencies

[0.2.4] - (2018-12-10)

• Support lazy loading with forRoot() module definition

[0.2.4] - (2018-12-07)

• correct loading sequence

[0.2.3] - (2018-12-06)

• potential fix for race loading issue

[0.2.1] - (2018-10-29)

• Removed hello world from bad stripe id
• added bank_account type

[0.2.0] - (2018-10-25)

• Added stripe-bank and Angular7

[0.1.0] - (2018-01-26)

• added [(invalid)] two way binding for when validation fails

  Breaking Changes

• (catch) is only called when a non validation_error occurs

[0.0.3] - (2018-01-09)

• made StripeCard component available from index as an export

[0.0.0] - (2018-01-09)

• init commit