Miss any of our Open RFC calls?Watch the recordings here! »


1.1.0 • Public • Published


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

demo page

hire me npm version npm downloads Build status Build Status Dependency Status min size minzip size

Table of Contents


From a command terminal type the following

npm install stripe-angular --save


Make stripe-angular available throughout your app

import { NgModule } from "@angular/core";
import { StripeModule } from "stripe-angular"
  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()

Three operations are preformed on construction

  1. Checking for window.Stripe

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

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


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 }}
  (catch) = "onStripeError($event)"
  [(invalid)] = "invalidError"
  (cardMounted) = "cardReady = 1"
  (tokenChange) = "setStripeToken($event)"
  (sourceChange) = "setStripeSource($event)"
<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>
  selector: "app-sub-page",
  template: template
}) export class AppComponent{
  cardReady = false;
  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)


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

<stripe-card #stripeCard
  (catch)        = "$event"
  [(token)]      = "token"
  [(invalid)]    = "invalidError"
  (cardMounted)  = "cardReady = 1"
<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>


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

see stripe docs

<stripe-bank #stripeBank
  (catch)        = "$event"
  [(token)]      = "token"
  [(invalid)]    = "invalidError"
<button type="button" (click)="stripeBank.createToken({...bank_account...})">createToken</button>

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"


This component is not intended to stand alone but it could. Component stripe-card extends stripe-source.

<!-- stripe source not intended to stand alone like this -->
<stripe-source #stripeSource
  (catch)     = "$event"
  [(source)]  = "source"
  [(invalid)] = "invalidError"
<button type="button" (click)="stripeSource.createSource()">createSource</button>
<!-- stripe-card has source bindings -->
<stripe-card #stripeCard
  (catch)       = "$event"
  [(source)]    = "source"
  [(invalid)]   = "invalidError"
  (cardMounted) = "cardReady = 1"
<button type="button" (click)="stripeCard.createSource()">createSource</button>

What is a Stripe source?

Source objects allow you to accept a variety of payment methods with a single API. A source represents a customer’s payment instrument, and can be used with the Stripe API to create payments. Sources can be charged directly, or attached to customers for later reuse.

Why use Stripe sources?

Stripe sources allows you, the developer, to focus on data differences between payment formats instead using different components for each like stripe-card and stripe-bank

By taking into consideration the flexibility of the Sources API when designing your checkout flow, you can minimize any changes required to support additional payment methods as you add them.


npm i stripe-angular

DownloadsWeekly Downloads






Unpacked Size

274 kB

Total Files


Last publish


  • avatar