stripe-react-serverless-40.tsx

const handleSubmitPayment = async () => {
  if (!stripe || !elements) {
    return;
  }

  try {
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardNumberElement) as any,
      billing_details: {
        name: nameInput,
      },
    });

    if (error || !paymentMethod) {
      throw Error(error?.message || 'Something is not right...');
    }

    const customerID = await StripeManager.getStripeCustomerID();

    if (!customerID) {
      throw Error('Could not identify customer');
    }
    const paymentID = paymentMethod.id;
    const subscription = await StripeManager.createSubscription(customerID, paymentID);

    if (subscription.latest_invoice.payment_intent.status === 'requires_payment_method') {
      setRetry(true);
      localStorage.setItem('latest_invoice_id', subscription.latest_invoice.id);
      throw Error('Your card was declined. Please try again or with another card');
    }

    if (subscription.status !== 'active') {
      throw Error('Could not process payment.');
    }
  } catch (error) {
    console.error(error);
    // Let the user know that something went wrong here...
  }
};