ngxStripeCardGroup change event not fired [BUG]

[Morzilla]

Hello! I'm trying to implement ngx-stripe version 14.1.0 with the ngxStripeCardGroup like this:

` <form novalidate (ngSubmit)="paga()">

    <div ngxStripeCardGroup #card (change)="onChange($event)" [elementsOptions]="elementsOptions">

      <label>Numero Carta</label>
      <ngx-stripe-card-number [options]="cardOptions"></ngx-stripe-card-number>

      <div class="row">
        <div class="col-6">
          <label>Scadenza</label>
          <ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
        </div>
        <div class="col-6">
          <label>CVC</label>
          <ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc>
        </div>
      </div>

      <div #carderrors class="mt-3 text-danger text-center"></div>

      <div class="text-center mt-4">
        <button class="btn btn-primary mt-1" type="submit" [disabled]="pagamentoInCorso">
          Conferma Pagamento
        </button>
      </div>
    </div>

  </form>`

and I want to use the change event emitter to check the card validity for every input, but the onChange method is never fired. If I move the event on one of the inner elemenets (like the ngx-stripe-card-number) it works. On the TS side the method is the following:

onChange(ev: StripeCardElementChangeEvent) { console.log(ev); }

Can you please help me? Thanks!

[DwieDima]

Can confirm this issue. For me also <ngx-stripe-card> Element change event won't trigger.

[richnologies]

Hi @DwieDima,

I'm confused about your claim. Here is an example where everything seems to be working fine for ngx-stripe-card. Keep in mind the change event is does not trigger every time you typed, just only when the status of the element changed.

Maybe you can have a look at the demo and if you still have issues, maybe provide me a code snippet I can check or information about what version of Angular and ngx-stripe are you using to help me replicate the issue.

Hi @Morzilla, sorry it took all this time. You were right, it was never intended to the card group to have that change event, but after some consideration, we have decided to add it. I'm sure at this point you don't care, but here it is anyway.

Here is a demo and the source code for both cases:

Stackblitz: https://stackblitz.com/edit/ngx-stripe-issue-177-sb?file=src%2Fmain.ts

import 'zone.js/dist/zone';
import { Component, importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

import {
  StripeCardComponent,
  StripeCardNumberComponent,
  StripeCardExpiryComponent,
  StripeCardCvcComponent,
  StripeCardGroupDirective,
  StripeElementsDirective,
  injectStripe,
  NgxStripeModule,
} from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions,
} from '@stripe/stripe-js';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    CommonModule,
    StripeCardComponent,
    StripeCardNumberComponent,
    StripeCardExpiryComponent,
    StripeCardCvcComponent,
    StripeCardGroupDirective,
    StripeElementsDirective,
  ],
  template: `
    <div>
      <div color="secondary" section-content-header>
        <span>Card Events Example</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-card
            [options]="cardOptions"
            (load)="onEvent('load', $event)"
            (blur)="onEvent('blur', $event)"
            (change)="onEvent('change', $event)"
            (focus)="onEvent('focus', $event)"
            (ready)="onEvent('ready', $event)"
            (escape)="onEvent('escape', $event)"
          ></ngx-stripe-card>
        </ngx-stripe-elements>
        <hr />
        <ngx-stripe-card-group
          [stripe]="stripe"
          (change)="onEvent('change', $event)"
          [elementsOptions]="elementsOptions"
        >
          <ngx-stripe-card-number [options]="cardOptions"></ngx-stripe-card-number>
          <ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
          <ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc>
        </ngx-stripe-card-group>
      </div>
    </div>
  `,
})
export class App {
  stripe = injectStripe(
    'pk_test_51Ii5RpH2XTJohkGafOSn3aoFFDjfCE4G9jmW48Byd8OS0u2707YHusT5PojHOwWAys9HbvNylw7qDk0KkMZomdG600TJYNYj20'
  );
  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };
  elementsOptions: StripeElementsOptions = {
    locale: 'es',
  };

  onEvent(source, ev) {
    console.log({ source, ev });
  }
}

bootstrapApplication(App, {
  providers: [importProvidersFrom(NgxStripeModule.forRoot())],
});

[DwieDima]

Hi @richnologies

Sorry for the confusion. I am aware that the change event is only emitted on status change. It works on Chrome, but not in the Safari browser. To be more precise using the Ionic Framework where i build the App on my iPhone using Capacitor. Here I have to click out of the input element several times and focus again to make the component emit the status.

I will post a code reproduction case on stackblitz the next days!

[richnologies]

Hi @DwieDima, cool, I'll check Safari and iPhone to see if I can replicate

Thanks!

[DwieDima]

@richnologies after some debugging on native device, the event is logged correctly. Somehow the ion-button stays muted and is not clickable, although the property disabled of <ion-button [disabled]> evaluated to true.

So this doesn't seem to be related with your component.

[richnologies]

No worries. I've been there.

[jayna456]

Hello @richnologies, I am getting Module '"ngx-stripe"' has no exported member 'injectStripe' while importing it in component.

My angular cli version is 14.2 ngx-stripe version is 14.3.0

Any idea about this?

[richnologies]

Sorry @jayna456, if that problem persists, please open a new PR and provide a small snippet on what are you trying to do