Búsqueda de sitios web

html - Recibiendo errores al inicializar la página de pago de Stripe y al enviar los datos de la tarjeta

En mi página de Angular/TypeScript donde guardo tarjetas de crédito, recibo 2 errores diferentes que no puedo solucionar. Solo he podido encontrar este enlace en línea que es similar: Cómo cambiar la configuración regional de Stripe cuando la variable de Stripe ha sido inicializada

  1. Cuando la página se carga por primera vez y Stripe y los elementos se inicializan y cargan, recibo este error a continuación:

TypeError no capturado TypeError: No se pueden leer las propiedades de undefined (leyendo 'queuedMessages') en value (https://js.stripe.com/v3/fingerprinted/js/controller-803e2f3ecfca23afd889cd24f93bdf22.js:1:452741) en (https://js.stripe.com/v3/fingerprinted/js/controller-803e2f3ecfca23afd889cd24f93bdf22.js:1:451881) value @ js.stripe.com/v3/fingerprinted/js/controller-803e2f3ecfca23afd889cd24f93bdf22.js:1:452741

  1. Cuando ingreso los detalles de mi tarjeta, la función 'stripe.createToken()' falla y recibo el siguiente error:

ERROR IntegrationError: Por favor, use la misma instancia de Stripe que utilizó para crear este Elemento para crear su Fuente o Token. en Ii (/Users/mysite/client:1:350323) en e._handleMessage (/Users/mysite/client:1:355676) en e._handleMessage (/Users/mysite/client:1:152157) en /Users/mysite/client:1:353245 en _ZoneDelegate.invokeTask (/Users/mysite/client/node_modules/zone.js/fesm2015/zone.js:406:1) en Object.onInvokeTask (/Users/mysite/client/node_modules/@angular/core/fesm2015/core.mjs:25535:1) en _ZoneDelegate.invokeTask (/Users/mysite/client/node_modules/zone. js/fesm2015/zone.js:405:1) en Zone.runTask (/Users/mysite/client/node_modules/zone.js/fesm2015/zone.js:178:1) en ZoneTask.invokeTask [como invoke] (/Users/mysite/client/node_modules/zone.js/fesm2015/zone.js:487:1) en invokeTask (https://localhost:4200/polyfills.js:4776:18) {mensaje: 'Por favor, usa la misma instancia de Stripe que usaste con este Elemento para crear tu Fuente o Token.', nombre: 'IntegrationError', stack: 'IntegrationError: Por favor, usa la misma instanc…(https://localhost:4200/polyfills.js:4776:18)'}

Aquí está el código a continuación donde tengo los 2 problemas.

// Just below all my imports, I declare Stripe like this
declare
const Stripe: any;


// Stripe and the elements get initialized in the ngAfterViewInit() like this
ngAfterViewInit() {

const style = {
  // all style css left out for brevity
};

this.stripe = Stripe('pk_test_fTrh6B1...');
this.stripeElements = this.stripe.elements();


this.cardNumber = this.stripeElements.create('cardNumber', {
  style
});
this.cardNumber.mount(this.cardNumberElement.nativeElement);
this.cardNumber.addEventListener('change', this.cardNumberHandler);

this.cardExpiry = this.stripeElements.create('cardExpiry', {
  style
});
this.cardExpiry.mount(this.cardExpiryElement.nativeElement);
this.cardExpiry.addEventListener('change', this.cardExpiryHandler);

this.cardCvc = this.stripeElements.create('cardCvc', {
  style
});
this.cardCvc.mount(this.cardCvcElement.nativeElement);
this.cardCvc.addEventListener('change', this.cardCvcHandler);

});

}


// here is the submit button to save card details
submitCard() {
  this.loadingPayment = true;

  const cardData = {
    name: this.nameOnCard.value,
  };

  // 2nd error gets thrown below on createToken()
  from(this.stripe.createToken(this.cardNumber, cardData)).pipe(take(1)).subscribe((result: any) => {
    if (result.error) {
      this.loadingPayment = false;
      this.alertService.danger(result.error.message);
    } else {
      if (['Visa', 'MasterCard', 'Discover', 'American Express'].includes(result.token.card.brand) === true) {
        this.accountService.saveCard({
          token: result.token.id
        }).subscribe(() => {
          this.router.navigate(['/account/cards']);
          this.alertService.success('Card added successfully');
        }, error => {
          console.log(error);
        }).add(() => {
          this.loadingPayment = false;
        });
      } else {
        this.loadingPayment = false;
        this.alertService.info('Only Visa, MasterCard, Discover or American Express are accepted');
      }
    }
  });
}
<div class="mt-4" [formGroup]="paymentForm">

  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingName" placeholder="ex. John Smith" formControlName="nameOnCard" required maxlength="30" pattern="^[a-zA-Z\s]*$" [ngClass]="{'is-valid': nameOnCard.valid, 'is-invalid': nameOnCard.invalid && (nameOnCard.dirty || nameOnCard.touched)}">
    <label for="floatingName">Name on Card</label>
    <div *ngIf="nameOnCard.invalid && (nameOnCard.dirty || nameOnCard.touched)">
      <div class="invalid-feedback d-block" role="alert" *ngIf="nameOnCard.errors.required">
        Name is required
      </div>
      <div class="invalid-feedback d-block" role="alert" *ngIf="nameOnCard.errors.pattern">
        Only characters are permitted
      </div>
    </div>
  </div>

  <div class="form-floating mb-3">
    <div class="form-control" id="floatingNumber" placeholder="ex. 1111-1111-1111-1111" #cardNumber [ngClass]="{'is-valid': cardNumberValid === true, 'is-invalid': cardNumberValid === false && cardNumberErrors !== null}"></div>
    <label for="floatingNumber">Number</label>
    <div *ngIf="cardNumberErrors" class="invalid-feedback d-block" role="alert">
      {{cardNumberErrors}}
    </div>
  </div>

  <div class="form-floating mb-3">
    <div class="form-control" id="floatingExpiration" placeholder="ex. 11/24" #cardExpiry [ngClass]="{'is-valid': cardExpiryValid === true, 'is-invalid': cardExpiryValid === false && cardExpiryErrors !== null}"></div>
    <label for="floatingExpiration">Expirtion</label>
    <div *ngIf="cardExpiryErrors" class="invalid-feedback d-block" role="alert">
      {{cardExpiryErrors}}
    </div>
  </div>

  <div class="form-floating mb-3">
    <div class="form-control" id="floatingCvc" placeholder="ex. 123" #cardCvc [ngClass]="{'is-valid': cardCvcValid === true, 'is-invalid': cardCvcValid === false && cardCvcErrors !== null}"></div>
    <label for="floatingCvc">CVC</label>
    <div *ngIf="cardCvcErrors" class="invalid-feedback d-block" role="alert">
      {{cardCvcErrors}}
    </div>
  </div>

  <nav class="navbar fixed-bottom navbar-light bg-light">
    <div class="container-md px-3">
      <div class="w-100">
        <button class="btn btn-yb float-md-end" style="width: 100px;" [disabled]="paymentForm.invalid || loadingPayment || paymentForm.pristine || !cardNumberValid || !cardExpiryValid || !cardCvcValid" [ngClass]="{'nopacity' : loadingPayment}" type="button" (click)="submitCard()">
                <span *ngIf="loadingPayment" class="spinner-border spinner-border-sm color-white" role="status" aria-hidden="true"></span>
                <span class="sr-only">Loading...</span>
                <span *ngIf="!loadingPayment">Save</span>
            </button>
      </div>
    </div>
  </nav>

</div>