Connecting Stripe payments with Glitch

[jfk]

I’m getting a server error when attempting to run the code below and hit the Stripe payments api.

What’s strange is that this function was working properly before but now it’s not. The console logs out “1” but does not make it to the second console log for “2”. Which tells me something is going wrong with Stripe-Glitch connection.

Any suggestions?

  const ChargeCard = async () => {
    //STRIPE
    const fetchPaymentIntentClientSecret = async () => {
      console.log("1");
      return axios
        .post(
          "https://conclusive-glisten-par.glitch.me/create-payment-intent",
          {
            amount: calcDeposit,
          }
        )
        .then((response) => {
          console.log("2");
          return response.data;
        });
    };

[RiversideRocks]

Are there any other errors? Can you maybe set up error handling in your code to find out what went wrong? I have a feeling this is some sort of CORS related error.

[jfk]

I have error handling configured but the ChargeCard function isn’t making it that far. It appears to be crapping out during the axios.post. See below.

  const ChargeCard = async () => {
    //STRIPE
    const fetchPaymentIntentClientSecret = async () => {
      console.log("1");
      return axios
        .post(
          "https://conclusive-glisten-par.glitch.me/create-payment-intent",
          {
            amount: calcDeposit,
          }
        )
        .then((response) => {
          console.log("2");
          return response.data;
        });
    };
    if (!cardDetails?.complete) {
      alert("Please enter your payment info");
      return;
    }
    const billingDetails = {
      email: currentUserDetails.email,
    };
    try {
      const { clientSecret, error } = await fetchPaymentIntentClientSecret();
      if (error) {
        console.log("Unable to process payment");
      } else {
        const { paymentIntent, error } = await confirmPayment(clientSecret, {
          type: "Card",
          billingDetails: billingDetails,
        });
        if (error) {
          alert(`Payment confirmation error: ${error.message}`);
        } else if (paymentIntent) {
          setSuccessMessage(true);
          setPaymentSuccess(true);
          console.log("Payment successful");
        }
      }
    } catch (err) {
      console.log(err);
    }
  };

Here’s a screenshot from Glitch which may help troubleshoot

[wh0]

    } catch (err) {
      console.log(err);
    }

does this part run?

[jfk]

Yes, that fires a 504 error

[wh0]

great, then your error reporting code is working. gather up any information you can from that error response. (I personally don’t know how to do this in axios–does err here contain all the response body?) and see if you can figure out what’s wrong. but given that it’s in the 5xx range, it may be something that you’ll have to ask stripe support about