Checkout stuck in processing mode

[newhub-spec]

Description:

The project was installed successfully in Vercel with Host & Stripe Test Key variables. I can add products to the cart but pressing checkout button go in Processing...

I have included the Stripe domains in CORS allowed list of GraphQL plugin setting. However, it is still showing the errors.

In Chrome, it is only showing Proxy errors which is the last line of above Mozilla console screenshot: { "client": "default", "operationType": "query", "operationName": "getStripePaymentIntent", "statusCode": 200, "gqlErrors": [ { "message": "Internal server error", "extensions": { "category": "internal" }, "locations": [ { "line": 3, "column": 3 } ], "path": [ "stripePaymentIntent" ] } ] }

I will appreciate the solution to make this great project working.

Thanks & regards.

[orbikular]

Go to your checkout.vue and then have a look at the payNow Method.

I moved the following 2 lines:

const { stripePaymentIntent } = await GqlGetStripePaymentIntent();
const clientSecret = stripePaymentIntent?.clientSecret || '';

into the following if.

Which looks like this now:

const payNow = async () => {
  buttonText.value = t('messages.general.processing');
  try {
    if (orderInput.value.paymentMethod.id === 'stripe' && stripe && elements.value) {
      const { stripePaymentIntent } = await GqlGetStripePaymentIntent();
      const clientSecret = stripePaymentIntent?.clientSecret || '';
      const cardElement = elements.value.getElement('card') as StripeCardElement;
      const { setupIntent } = await stripe.confirmCardSetup(clientSecret, { payment_method: { card: cardElement } });
      const { source } = await stripe.createSource(cardElement as CreateSourceData);

      if (source) orderInput.value.metaData.push({ key: '_stripe_source_id', value: source.id });
      if (setupIntent) orderInput.value.metaData.push({ key: '_stripe_intent_id', value: setupIntent.id });

      isPaid.value = setupIntent?.status === 'succeeded' || false;
      orderInput.value.transactionId = source?.created?.toString() || new Date().getTime().toString();
      deleteThumbnails();
    }
  } catch (error) {
    console.error(error);
    buttonText.value = t('messages.shop.placeOrder');
  }

  proccessCheckout(isPaid.value);
  try {
    gtag_report_conversion();
    console.warn('gtag_report_conversion');
  } catch (e) {
    console.error(e);
  }
};

Otherwise the code is trying to get a payment intent even if you have selected another payment option.

If you are about to pay with stripe, this probably won't resolve the issue.

[alexookah]

@orbikular Could you make a PR to check your suggested solution?

[alexookah]

@orbikular i think your proposed changes fix this issue. can you make a PR?

[johnykes]

Hello, I have the exact same issue. I use the versions from the current readme.md, just made a shop

[johnykes]

Go to your checkout.vue and then have a look at the payNow Method.

I moved the following 2 lines:

const { stripePaymentIntent } = await GqlGetStripePaymentIntent();
const clientSecret = stripePaymentIntent?.clientSecret || '';

into the following if.

Which looks like this now:

const payNow = async () => {
  buttonText.value = t('messages.general.processing');
  try {
    if (orderInput.value.paymentMethod.id === 'stripe' && stripe && elements.value) {
      const { stripePaymentIntent } = await GqlGetStripePaymentIntent();
      const clientSecret = stripePaymentIntent?.clientSecret || '';
      const cardElement = elements.value.getElement('card') as StripeCardElement;
      const { setupIntent } = await stripe.confirmCardSetup(clientSecret, { payment_method: { card: cardElement } });
      const { source } = await stripe.createSource(cardElement as CreateSourceData);

      if (source) orderInput.value.metaData.push({ key: '_stripe_source_id', value: source.id });
      if (setupIntent) orderInput.value.metaData.push({ key: '_stripe_intent_id', value: setupIntent.id });

      isPaid.value = setupIntent?.status === 'succeeded' || false;
      orderInput.value.transactionId = source?.created?.toString() || new Date().getTime().toString();
      deleteThumbnails();
    }
  } catch (error) {
    console.error(error);
    buttonText.value = t('messages.shop.placeOrder');
  }

  proccessCheckout(isPaid.value);
  try {
    gtag_report_conversion();
    console.warn('gtag_report_conversion');
  } catch (e) {
    console.error(e);
  }
};

Otherwise the code is trying to get a payment intent even if you have selected another payment option.

If you are about to pay with stripe, this probably won't resolve the issue.

I tried this, and it works.

PS: I used 'Cash on delivery'. Not sure why I get error from Stripe though