#AlienSoft

1 messages · Page 1 of 1 (latest)

compact stirrupBOT
meager heron
#

What is the exact help/question you need ?

vast zephyr
#

Hi
I'm receiving this error when clicking on the Payment button.
I have custom filed of COUNTRY SELECTION.

#

here is my stripe.confirmPayment

#

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "../machineid",

  receipt_email: email[0],
      payment_method_data: {        
              billing_details: {
                name: clientName,
                email: email[0],
                    address:{
                      country: country
                    }  
              }
      }
}

});

meager heron
#

what is the error message ?

vast zephyr
#

You specified "never" for fields.billing_details.address.country when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address.country when calling stripe.confirmPayment().

meager heron
#

What is the value of country you passed to confirmPayment ?

vast zephyr
#

UK

meager heron
#

it looks like you are not passing it or its empty at runtime... can you share a screenshot or log the confirmParams object ?

vast zephyr
#

But I am passing it as you see above?

#

async function handleSubmit(e) {
e.preventDefault();
setLoading(true);

clientName = document.querySelector("#kpm1-name").value;
email[0] = document.querySelector("#kpm1-email1").value;
email[1] = document.querySelector("#kpm1-email2").value;
email[2] = document.querySelector("#kpm1-email3").value;
email[3] = document.querySelector("#kpm1-email4").value;
email[4] = document.querySelector("#kpm1-email5").value;
country = document.querySelector("#kpm1-country").value;


  console.log(email[0]);
  console.log(country);

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "../machineid?purchase=ok",

  receipt_email: email[0],
      payment_method_data: {        
              billing_details: {
                name: clientName,
                email: email[0],
                      address: {
                      country: country
                      }  
              }
      }
}

});

meager heron
#

Let me do a quick test

vast zephyr
#

ok

meager heron
#

I just did a test and it works fine when passing country.

vast zephyr
#

with a custom COUNTRY dropdown field ?

meager heron
#

No matter where you get the value... but sending a country value with confirmParams works fine.

#

I think you are missing something in your integration for not passing country value at the end.

vast zephyr
#

can I see your stripe.confirmPayment() so I can compare ?

#

here's mine:

#

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "../machineid?purchase=ok",

  receipt_email: email[0],
      payment_method_data: {        
              billing_details: {
                name: clientName,
                email: email[0],
                      address: {
                          country: country,
                          postalCode: postCode
                      }  
              }
      }
}

});

meager heron
vast zephyr
#

ok, i see you have a redirect: 'if_required', which is the only difference really

#

let me run a quick test

dusk knot
#

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!

vast zephyr
#

Hi, so I've managed to resolve the issues above with your colleague. However, now I keep seeing payment_intents error

dusk knot
#

would you mind sharing the request ID?

vast zephyr
#

any luck?

dusk knot
#

the problem is in your return_url. You can't pass a relative url like this one ../machineid?purchase=ok you need to pass a full URL

vast zephyr
#

ohh.. that's bad.

#

can i not have a return_url, but do a redirect on the payment.status succeedded ?

dusk knot
#

if a PM requires redirection you need to have a URL where the PM should lead to when the payment attempt is done

vast zephyr
#

i do need to use a relative path though, so I though perhaps this can by bypassed if i redirect the window.Location to the URL when a successfull payment is ok

dusk knot
#

let's say the customer chose Klarna (maybe you don't want to integrate with this PM type, but it's just meant to be as an example), the customer would then be redirected to the Klarna's payment page to finish the payment there. Once it's done, Klarna (which has no sense of your website) would need a full URL to redirect the customer back to your website

#

you can construct the relative path from the current window.location

vast zephyr
#

ok i see

#

so the return url needs to capture where it's coming from then redirect

#

ok, now i do have a full url, but see another error in the console

#

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at HTMLFormElement.handleSubmit (checkout.js:104:13)

#

if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}

dusk knot
#

maybe there's no error

#

would you mind sharing your code?

vast zephyr
#

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://www.mywebsite.com/machineid?purchase=ok",

  receipt_email: email[0],
      payment_method_data: {        
              billing_details: {
                name: clientName,
                email: email[0],
                      address: {
                          country: country,
                          postal_code: postCode
                      }  
              }
      }
},
  
  redirect: 'if_required'

});

// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your return_url. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the return_url.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}

setLoading(false);
}

dusk knot
#

I think you need to pass error?.type

vast zephyr
#

this is the default stripe template pretty much

#

technically if there is no error, it shouldn't even reach that point.. right?

dusk knot
#

if there's no redirection then yes

#

it can reach that point

#

but in all cases it's better to add the ? accessor

vast zephyr
#

hmm ok, that seems to bypass the error in the console and now it prints out "An unexpected error occurred." on the FORM error div

#

can you track the error please, here is the new ID

dusk knot
#

I think your code somehow is confirming the payment twice

#

which is generating an error for one but not the other payment

vast zephyr
#

twice? 🙂 how

dusk knot
#

maybe the click event is bubbling somehow

vast zephyr
#

here's my actual TEST page

#

in case you want to take a look/debug

vast zephyr
#

have you been able to track anything ?

digital geyser
#

Hi there 👋 taking over as my teammate needed to step away, please bear with me a couple minutes and I'll be back to take a look as soon as I can be.

vast zephyr
#

sure

digital geyser
#

Thank you for your patience, I've caught up on the context here. It does look like for that most recent Payment Intent you shared that multiple requests to confirm it were made, and both used a publishable key so they appear to have come from client-side code. That being said, they were about 30 seconds apart, so I think the two requests were triggered by separate actions rather than all being part of one flow executing. You'll be best suited to debug your code and figure out where the extra request is coming from.

vast zephyr
#

i'm just seeing in my TEST MODE control panel that the payment is going through, but on the (page itself) it throws an error 🙂

#

i think something wrong with redirection ?

digital geyser
vast zephyr
#

nothing out of the ordinary on my side as I'm using the template from STRIPE DOCS

#

so I can't understand how it's double charging itself ?

digital geyser
#

Nor do I, have you added any logging to figure out where the second request is coming from?

vast zephyr
#

let me do some output to the console to try and trace the flow.

#

seems to be failing at "some error"

#

Do you see anything wrong with the confirmPayement here

#

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://www.korgpamanager.com/machineid?purchase=ok",

  receipt_email: email[0],
      payment_method_data: {        
              billing_details: {
                name: clientName,
                email: email[0],
                      address: {
                          country: country,
                          postal_code: postCode
                      }  
              }
      }
},
  
  redirect: 'if_required'

});

console.log("some error ???");

// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your return_url. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the return_url.
if (error?.type === "card_error" || error?.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}

setLoading(false);
}

KORG PA Manager | MachineID

KORG PA Manager - MachineID

digital geyser
#

The second attempt to confirm an already confirmed Payment Intent will return an error, that is expected. You need to figure out where the second request is coming from to begin with.

vast zephyr
#

doesn't make sense. the SUBMIT button gets disabled on CLICK so it can't be a double submission

digital geyser
#

The requests I saw were ~30 seconds apart, I don't think they were both being triggered from the same button press.

#

What is the process for making a payment on your site? I'll try to step through that process if I get a chance to between other threads.

vast zephyr
digital geyser
#

Looks like the original script was modified so that it only redirects if required by the selected payment method, so the error catching block will need to be updated since now it is possible for that code to be hit without an error being surfaced.

#

You will want to wrap this part in a check that checks whether error is populated:

console.log("some error ???");

// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your return_url. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the return_url.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}

vast zephyr
#

ok problem resolved 🙂

#

ok well that problem resolved, but it seems another issue now 🙂

#

for some reason it's not reaching paymentIntent.status

#

so you click buy.. button loads, there is a payment on the stripe account, but then no redirection... and doesn't reach the paymentIntent.Status so that I can forward/redirect

tulip ocean
#

Hello 👋
Stepping in as toby had to step away

Not sure I completely follow what you mean by

doesn't reach the paymentIntent.Status so that I can forward/redirect
Can you elaborate?

vast zephyr
#

// Fetches the payment intent status after payment submission
async function checkStatus() {
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);

if (!clientSecret) {
return;
}

const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

      console.log("payment OK -->>redirect");

switch (paymentIntent.status) {
case "succeeded":
showMessage("Payment succeeded!");

           //Now Redirect to the MachineID Page    
           //window.setTimeout(redirectSuccess, 1400);    
  break;
case "processing":
  showMessage("Your payment is processing.");
  break;
case "requires_payment_method":
  showMessage("Your payment was not successful, please try again.");
  break;
default:
  showMessage("Something went wrong.");
  break;

}
}

#

payment OK -->>redirect. not reaching here at all

#

not outputting paymentIntent.status either

tulip ocean
#

have you tried printing the response?
const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

vast zephyr
#

nothing is printing out

#

:/

#

it's as if async function checkStatus() { is not even being reached

tulip ocean
#

is your checkStatus function being called somewhere?

vast zephyr
#

on top of the page

#

it's the STRIPE STARTUP GUIDE template

tulip ocean
#

I think that function only runs if there's a redirect (which reloads the page). Otherwise it won't really run after confirmPayment

vast zephyr
#

oh i have an idea

#

ok so i'm running the checkStatus after the confirmPayment

#

still nothing

tulip ocean
#

how exactly are you running checkStatus after confirmPayment ?

vast zephyr
#

const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://www.mywebsite.com/machineid?purchase=ok",

      receipt_email: email[0],
          payment_method_data: {        
                  billing_details: {
                    name: clientName,
                    email: email[0],
                          address: {
                            country: country,
                            postal_code: postCode
                          }  
                  }
          }
    },
  
  redirect: 'if_required'

});

// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your return_url. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the return_url.
if (error) {
if (error?.type === "card_error" || error?.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
}

checkStatus();
setLoading(false);
}

tulip ocean
#

You could try setting redirect to always

vast zephyr
#

voila! that worked, but then again it's still didn't reach the paymentIntent.status checks

#

it just redirected

tulip ocean
#

try adding console logs to checkStatus function and see what's going on.
Are you seeing any errors in your console?

vast zephyr
#

yh i do have console logs and it's not reaching any 🙂

#

well, let me add some more on top. i think issue with clientSecret

#

same thing! it's as if it's never reaching there and just redirecting :/

tulip ocean
#

when you receive the redirect, do you see a payment_intent_client_secret param in the URL?

vast zephyr
#

yh

#

i see the paymentintent, secretkey AND paymentStatus on the URL

tulip ocean
#

what does your return_url look like?
If you're using the template code, shouldn't it be redirected to an HTML file?

vast zephyr
#

'im basically trying to PREVENT the auto redirect and do the redirection myself in the paymentIntent.status.succeeded section

#

i changed the URL to redirect to my website page for testing! as the collegue previously mentioned i couldn't leave it empty

#

ohh! unless it should redirect to ITSELF and from there the checkSTATUS will pick up all the URL fields 😄

tulip ocean
#

'im basically trying to PREVENT the auto redirect and do the redirection myself in the paymentIntent.status.succeeded section
Ah then you need to keep redirect to if_required because setting it to always will automatically redirect.

i changed the URL to redirect to my website page for testing! as the collegue previously mentioned i couldn't leave it empty

ohh! unless it should redirect to ITSELF and from there the checkSTATUS will pick up all the URL fields 😄
yeah that's what the sample code does

vast zephyr
#

ohh ok! so i gotta change the return_url. let's see

#

aaaaaaaaand nothing happens again 😄

#

no redirect

tulip ocean
#

if you look at PHP example, the return URL still goes to html file

vast zephyr
#

yes, but I'm not using the HTML example, but rather my own version of it, which is a PHP

#

just tried with the checkout.html still nothing

#

are there any templates/examples with the redirect: 'if_required' option

#

and how it really works

tulip ocean
#

Unfortunately, we don't have any examples for that specifically.

#

Taking a step back

'im basically trying to PREVENT the auto redirect and do the redirection myself in the paymentIntent.status.succeeded section
What's the usecase here? Why are you trying to do this manually?

vast zephyr
#

because the redirect url can't be relative apparantly!

#

and my webpage has several languages, which means I cannot DEFINE a static redirect url

#

oh wait! I did redirect: 'always' then changed the redirect_url to window.location.href

#

now it's refreshing the page and hitting the paymentIntent.status 🙂

#

ok i think i got what i need . let me test and confirm

tulip ocean
#

👍

vast zephyr
#

cool it works ! 😄

#

just the lag of having to reload the payment page again, until it redirects

#

but oh well

tulip ocean
#

Glad you figured it out

vast zephyr
#

final step gotta figure out how to UPDATE the payment intent so I can update the METADATA Fields

tulip ocean
#

👍