stripe angular

1npm install stripe-angular --save
2

1import { Component } from "@angular/core"
2import { Token, StripeSource } from "stripe-angular"
3
4const template=
5`
6<div *ngIf="invalidError" style="color:red">
7  {{ invalidError.message }}
8</div>
9
10<stripe-card
11  #stripeCard
12  (catch) = "onStripeError($event)"
13  [(complete)] = "cardDetailsFilledOut"
14  [(invalid)] = "invalidError"
15  (cardMounted) = "cardReady = 1"
16  (tokenChange) = "setStripeToken($event)"
17  (sourceChange) = "setStripeSource($event)"
18></stripe-card>
19
20<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>
21`
22
23@Component({
24  selector: "app-sub-page",
25  template: template
26}) export class AppComponent{
27  cardReady = false;
28  extraData = {
29    "name": null,
30    "address_city": null,
31    "address_line1": null,
32    "address_line2": null,
33    "address_state": null,
34    "address_zip": null
35  };
36
37  onStripeInvalid( error: Error ){
38    console.log('Validation Error', error)
39  }
40
41  setStripeToken( token: Token ){
42    console.log('Stripe token', token)
43  }
44
45  setStripeSource( source: StripeSource ){
46    console.log('Stripe source', source)
47  }
48
49  onStripeError( error: Error ){
50    console.error('Stripe error', error)
51  }
52}

1<stripe-bank #stripeBank
2  (catch)        = "$event"
3  [(token)]      = "token"
4  [(invalid)]    = "invalidError"
5></stripe-card>
6
7<button type="button" (click)="stripeBank.createToken({...bank_account...})">createToken</button>

1import { NgModule } from "@angular/core";
2import { StripeModule } from "stripe-angular"
3
4@NgModule({
5  imports: [ StripeModule.forRoot("...YOUR-STRIPE-KEY-HERE...") ]
6}) export class AppModule {}

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