faaz_payment-element-submit

[grim pine]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1384206142858592328

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[quick hemlock]

This is my event handler code FWIW:

[inner belfry]

HI 👋

So you are rendering the Payment Element and Google Pay is an available option? When you click the Submit button does the modal launch?

Is your Javascript code performing many actions prior to reaching the confirmPayment function call?

[quick hemlock]

No the modal does not launch

[inner belfry]

That's a screenshot of your code. Can you share your submit hanlder code as text?

[quick hemlock]

export const handleSubmit = async (event = null) => {
event?.preventDefault();
donationSubmitButton().disabled = true;
donationErrorDivs().forEach(div => div.remove());

const isProcessedConnectedStripe =
donationProcessPaymentCheckbox().checked && selectedMerchantAccount().dataset.connectedStripe;

if (isProcessedConnectedStripe && NB.payments.stripeElementsObject) {
try {
// Trigger form validation and wallet collection
const { error: submitError } = await NB.payments.stripeElementsObject.submit();

  // Confirm the payment with the stored client secret
  const { error, paymentIntent } = await stripeClient.confirmPayment({
    elements: NB.payments.stripeElementsObject,
    clientSecret: NB.payments.clientSecret,
    redirect: 'if_required',
    confirmParams: {
      return_url: window.location.origin + '/donations/complete',
    },
  });

  if (error) {
    handleInitialDonationFormError(error.message);
    donationSubmitButton().removeAttribute('disabled');
    // Clear client secret on error
    sessionStorage.removeItem('stripeClientSecret');
    NB.payments.clientSecret = null;
    return;
  }

  // If we get here, the payment was successful
  if (paymentIntent && paymentIntent.status === 'succeeded') {
    addPaymentIntentInput(paymentIntent.id);
    // Clear client secret on success
    sessionStorage.removeItem('stripeClientSecret');
    NB.payments.clientSecret = null;
    submitForm();
  }
} catch (err) {
  handleInitialDonationFormError(err.message);
  donationSubmitButton().removeAttribute('disabled');
  // Clear client secret on error
  sessionStorage.removeItem('stripeClientSecret');
  NB.payments.clientSecret = null;
}

} else {
submitForm();
}
}

[inner belfry]

Okay. Can you add logging and log the values of isProcessedConnectedStripe and NB.payments.stripeElementsObject as well as any error that is occuring when you attempt to submit the the elements object?

[quick hemlock]

I figured it out. isProcessedConnectedStripe was false and the rest of the handler was not working. Once I hard-coded that to true and fixed it. It started loading. Appreciate you helping me debug. Thank you @inner belfry !

[inner belfry]

Sure thing! Sometimes all it takes is a second pair of eyes on the code

I'm glad you got it figured out 🙂