randhawp/stripe-angular

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

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

Value	Description	Default
token	@Output the generated token hash
invalid	@Output any invalid error
complete	@Output card details
options	Card Element options	ElementsOptions
createOptions	Elements options	ElementsCreateOptions
tokenChange	<EventEmitter>token has been changed
invalidChange	<EventEmitter>invalid data has been changed
completeChange	<EventEmitter>details has been completed
cardMounted	<EventEmitter>card has been mounted
changed	<EventEmitter>details has been changed
catcher	<EventEmitter>catch any errors

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

Value	Description	Default
token	@Output the generated token hash
invalid	@Output any invalid error
options	Card Element options	ElementsOptions
tokenChange	<EventEmitter>token has been changed
invalidChange	<EventEmitter>invalid data has been changed
catcher	<EventEmitter>catch any errors

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

Value	Description	Default
source	@Output the generated source hash
invalid	@Output any invalid error
paymentMethod	Reference to Stripe Payment Method
sourceChange	<EventEmitter>source has been changed
invalidChange	<EventEmitter>invalid data has been changed
paymentMethodChange	<EventEmitter>payment method has been changed
catcher	<EventEmitter>catch any errors

• 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>