Stripe angular

import { Component } from "@angular/core"
import { Token, StripeSource } from "stripe-angular"

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

<stripe-card
  #stripeCard
  (catch) = "onStripeError($event)"
  [(complete)] = "cardDetailsFilledOut"
  [(invalid)] = "invalidError"
  (cardMounted) = "cardReady = 1"
  (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{
  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: Token ){
    console.log('Stripe token', token)
  }

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

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

Source: npmjs.com

Stripe angular

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

@NgModule({
  imports: [ StripeModule.forRoot("...YOUR-STRIPE-KEY-HERE...") ]
}) export class AppModule {}

Source: npmjs.com

Stripe angular

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

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

Source: npmjs.com

Similar codes

1 vote183 views3 answers
Dynamically add id ro div in angular using forloop ngfor
Javascript AngularJS
0 vote181 views1 answer
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.
Javascript AngularJS
0 vote325 views2 answers
Aos library animation angular
Javascript AngularJS
0 vote202 views1 answer
Angular injector.create example
Javascript AngularJS
0 vote197 views1 answer
Angular post data not sending
Javascript AngularJS
1 vote298 views3 answers
This version of CLI is only compatible with Angular versions ^9.0.0-beta || >=9.0.0 <10.0.0, but Angular version 8.1.3 was found instead.
Javascript AngularJS
1 vote269 views1 answer
Angular run multiple projects
Javascript AngularJS
1 vote191 views1 answer
If 'ion-item' is an Angular component, then verify that it is part of this module.
Javascript AngularJS
0 vote184 views1 answer
Angular animation scale width and height
Javascript AngularJS
1 vote190 views1 answer
Angular adding delay
Javascript AngularJS