Card Info Valid output

[simonaberry]

is there a way to determine if the card information is valid ? I wish to disable the buy button until such time.

[picosam]

I think there's a CSS class that's automatically set when you're typing the card info.

[simonaberry]

but the button that I want to disable is outside the stripe iframe... are you saying the ngx-stripe component will emit a class ?

[picosam]

No, in that case I take my words back!

[richnologies]

If you use the elements.create method like in the first example in the readme, then the card object has a: card.on('change', cb) method, so you disable the button. If you are using the ngx-stripe-card component, you can't access that by now, but I will soon add an output to allow to subscribe to that event stream.

card.on('change', function(event) { if (event.error) { errorElement.textContent = event.error.message; errorElement.classList.add('visible'); } });

[ericuldall]

@richnologies Your example seems to fail with the following error:

 Argument of type '(event: any) => void' is not assignable to parameter of type '() => void'.

Any insight on how to resolve this?

[lukaVarga]

Any news regarding this @richnologies ? TS won't compile and, as far as I know, there is no other way to catch errors before the user tries to submit the form.

[smlee]

For the eventlisteners you can just create a function and use bind to pass in this

example:

this.cardNumber.on('change', this.onChange.bind(this));

onChange(event) {
    if (event && !!event.error) {
      this.errorMessage = event.error.message;
    } else {
      this.errorMessage = '';
    }
    this.cdr.detectChanges();
  }

[richnologies]

Hi, sorry for the delay, I believe his error is solved now, if anyone have any more problems about this, can always reopen

[jorgeartigas]

What about if we are using the ngx-stripe-card component, is there any way to determine if the information is valid, before clicking buy? I want to disable the button until is valid

[evaletolab]

this one,

        this.card = this.elements.create(...);
        this.card.addEventListener('change', (event)=> {
          // use it in template [disabled]="!isValid"
          this.isValid=event.complete;
        });

[DwieDima]

I also had to strugge with this to set my button disabled. This is my workaround:

  @ViewChild(StripeCardNumberComponent) number: StripeCardNumberComponent;
  @ViewChild(StripeCardExpiryComponent) expiry: StripeCardExpiryComponent;
  @ViewChild(StripeCardCvcComponent) cvc: StripeCardCvcComponent;
  public isValid = false;

...

ngOnInit() {
    const number$ = fromEvent(this.number.element as any, 'change');
    const expiry$ = fromEvent(this.expiry.element as any, 'change');
    const cvc$ = fromEvent(this.cvc.element as any, 'change');

    combineLatest([number$, expiry$, cvc$])
      .pipe(
        map(([number, expiry, cvc]: any) => {
          return (
            !!!number.error &&
            number.complete &&
            !!!expiry.error &&
            expiry.complete &&
            !!!cvc.error &&
            cvc.complete
          );
        }),
        tap((isValid) => (this.isValid = isValid))
      )
      .subscribe();
}

    <button [disabled]="!isValid" (click)="onAddCreditCard()"
      >save</button