Stripe collect and then payout typescript

Question

I have an error in my react typescript code. It says:

Type 'StripeCardElement | null' is not assignable to type 'StripeCardElement | StripeCardNumberElement | { token: string; }'.
  Type 'null' is not assignable to type 'StripeCardElement | StripeCardNumberElement | { token: string; }'.ts(2322)
(property) card: StripeCardElement | StripeCardNumberElement | {
    token: string;
}

I need to solve this quickly.

const result = await stripe.confirmCardPayment('', {
  payment_method: {
    card: elements.getElement(CardElement),
    billing_details: {
      name: 'Jenny Rosen',
    },
  },
});

Answer 1

Create object and check in advance.

const cardElement = elements.getElement(CardElement);
if (cardElement) {
    const result = await stripe.confirmCardPayment('{CLIENT_SECRET}', {
    payment_method: {
        card: cardElement,
        billing_details: {
        name: 'Jenny Rosen',
        },
    },
    });