Stripe integration with Angular using ngx-stripe

Question

I am trying to integrate Stripe payments (PaymentIntent) with Angular, ngx-stripe using this example code

Angular version (14.2.0)
ngx-stripe version (^14.3.0)
stripe js (@stripe/stripe-js": "^1.53.0")

my component.html code is;

<h2>Collection Payment Intent</h2>
<div [formGroup]="stripeTest">
  <input formControlName="name" />
  <input formControlName="amount" />
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit" (click)="pay()">
    PAY
  </button>
</div>

my component.ts code is;

import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions,
  PaymentIntent,
} from '@stripe/stripe-js';

@Component({
  selector: 'payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.scss']
})
export class PaymentComponent implements OnInit {
  @ViewChild(StripeCardComponent)
  card!: StripeCardComponent;

  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',
  };

  stripeTest!: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder,
    private stripeService: StripeService
  ) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['Angular v10', [Validators.required]],
      amount: [1000, [Validators.required, Validators.pattern(/d+/)]],
    });
  }

  pay(): void {
    if (this.stripeTest?.valid) {
      this.createPaymentIntent(this.stripeTest.get('amount')?.value)
        .pipe(
          switchMap((pi) =>
            this.stripeService.confirmCardPayment(pi.client_secret!, {
              payment_method: {
                card: this.card.element,
                billing_details: {
                  name: this.stripeTest?.get('name')?.value,
                },
              },
            })
          )
        )
        .subscribe((result) => {
          if (result.error) {
            // Show error to your customer (e.g., insufficient funds)
            console.log(result.error.message);
          } else {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') {
              // Show a success message to your customer
            }
          }
        });
    } else {
      console.log(this.stripeTest);
    }
  }

  createPaymentIntent(amount: number): Observable<PaymentIntent> {
    return this.http.post<PaymentIntent>(
      '/create-payment-intent',
      { amount }
    );
  }
}

I have added the NgxModule in my application.module.ts as;

imports[
...
NgxStripeModule.forRoot('pk_test_xxx'),
...
]

But I get following errors even at the compile time.

Error: node_modules/ngx-stripe/lib/services/stripe-instance.class.d.ts:105:5 - error TS2416: Property 'paymentRequest' in type 'StripeInstance' is not assignable to the same property in base type 'StripeServiceInterface'.
  Type '(options: PaymentRequestOptions) => PaymentRequest | undefined' is not assignable to type '(options: PaymentRequestOptions) => PaymentRequest'.
    Type 'PaymentRequest | undefined' is not assignable to type 'PaymentRequest'.
      Type 'undefined' is not assignable to type 'PaymentRequest'.

105     paymentRequest(options: PaymentRequestOptions): PaymentRequest | undefined;
        ~~~~~~~~~~~~~~


Error: node_modules/ngx-stripe/lib/services/stripe.service.d.ts:109:5 - error TS2416: Property 'paymentRequest' in type 'StripeService' is not assignable to the same property in base type 'StripeServiceInterface'.
  Type '(options: PaymentRequestOptions) => PaymentRequest | undefined' is not assignable to type '(options: PaymentRequestOptions) => PaymentRequest'.
    Type 'PaymentRequest | undefined' is not assignable to type 'PaymentRequest'.
      Type 'undefined' is not assignable to type 'PaymentRequest'.

109     paymentRequest(options: PaymentRequestOptions): PaymentRequest | undefined;

Would really appreciate some insights to resolve this issue

Stripe integration with Angular using ngx-stripe

0 Answers0