#hendr1x_api
dusky oarBOT
đ 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/1263855747381596160
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
regal karmaBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- hendr1x_api, 22 hours ago, 36 messages
- hendr1x_api, 23 hours ago, 54 messages
dense cove
var billingDetails = address.scrapeCustomer();
var elements = payment.cache.elements;
const {error, paymentMethod} = await payment.cache.stripe.createConfirmationToken({
elements,
params: {
payment_method_data: {
billing_details: billingDetails
},
return_url: checkout.cache.domain + "/checkout/complete/",
}
});
if (error) {
payment.error(error);
} else {
if (paymentMethod && paymentMethod.id && paymentMethod.id.length > 0){
var paymentInput = xesm.element("input", {type:"hidden",name:"payment_method_code",value:paymentMethod.id});
checkout.cache.form.append(paymentInput);
checkout.cache.form.submit();
} else {
payment.error("Could not save payment");
}
}
so both error + paymentMethod == null
This was working perfectly prior with createPaymentMethod();
I'm getting the following error in console...
shared-e3e70ecce14884f26c67fa57190bb7a2.js:1 Uncaught (in promise) FetchError
at shared-e3e70ecce14884f26c67fa57190bb7a2.js:1:150005
Browser network inspector shows a 200 connecvtion to 'https://api.stripe.com/v1/confirmation_tokens' with a json response with all confirmation_token data
deft ocean
Hm ok so the call is being made fine. Where is this being thrown exactly?
at shared-e3e70ecce14884f26c67fa57190bb7a2.js:1:150005```So that errors when calling createConfirmationToken?
And to be clear, this is what's being printed in the console? payment.error("Could not save payment");
dense cove
I dont' know how to accurately determine when the Uncaught (in promise) is run
Yes, payment.error is what runs
I'm 99% sure its from this : await payment.cache.stripe.createConfirmationToken(
deft ocean
Yes, payment.error is what runs
Which one though
You have two in the code
Do you see "Could not save payment" in the console?
dense cove
"Could not save payment"
sorry
Yes, only that one runs....both paymentMethod and error variables are null
dense cove
Sure one second...
Click "Save to Cart"
then go through checkout process
should only take a few steps
Primary files you need are :
paymentSubmitListener()
I added the following to the code to help you see what is happening :
console.log('Error');
console.log (error);
console.log('Payment Method');
console.log(paymentMethod);
Where did you add that?
Before the if block?
I didn't see them printed, but maybe I checked out before you added them
dense cove
paymentSubmitListener()
The page will automatically give you new cache value but if you are viewing in browser directly you might need to change it manually
dusky oarBOT
deft ocean
Calling createPaymentMethod worked fine with this caching system you implemented?
dense cove
The caching system is only in the browser
I'm just adding a url variable to the files to prevent the browswer from caching
yes
it worked fine with createPaymentMethod
deft ocean
Sorry I mean this part: payment.cache.stripe.createConfirmationToken
The stripe instance is tied to a cache or something it looks like
dense cove
just a simple shared instance
it worked prior yes
payment.init()
It seems like its calling the createConfirmationToken just fine....just isn't isn't returning variables
cinder drift
If you get rid of your caching and initialize Stripe.js fresh for this, does it work? I don't know if Stripe.js is expected to work under these conditions.
Also quick thing from that code but the init function's if statement is incorrect:
if (payment.cache.strip == null){
payment.cache.stripe = Stripe(publicKey);
}
},```
the if statement is missing an e at the end of `payment.cache.strip`Would seeing it run as createPaymentMethod() convience you it's not that problem
cinder drift
Not really, running things in unsupported states often works fine until it doesn't
dense cove
Stripe is initialized fresh....I don't really want to code it in a different manner
cinder drift
Interesting, what exactly is this caching doing? Like is this just so one load of the page doens't try to init Stripe.js multiple times?
dense cove
I can get rid of it in a really hacky way right now I guess
It's just a container for my stripe object...it gets reloaded every page but lets any system that wants to interact with stripe do so in one place
cinder drift
Ah okay, I get more of what this is doing now.
dense cove
I can't do what I wanted easily
IntegrationError: Invalid value for stripe.createConfirmationToken(): the 'elements' provided was created by a different Stripe instance. Please use the same Stripe instance to create the 'elements' and call stripe.createConfirmationToken().
Your literally forcing me to use a container
The I provided didn't help at all? It an uncaught promise on your end after a successful generation of a confirmation token is created
Can you submit a ticket to someone?
Yeah...I literally can't do it another way. I'm using too many async functions
cinder drift
It took me a bit to catch up but I'm looking at your test site now.
I think the way you are caching is fine, I misunderstood because I've seen people try to cache it in ways that break things so that set off alarm bells
dense cove
I think the name cache is a bit of a bad name.
I start a new connection every page load
cinder drift
So instead of const {error, paymentMethod} = createConfirmationToken(... you should have const {error, confirmationToken} =
That call does not return a paymentMethod object
So that is likely causing issues down the line with your code. Can you try replacing the payment method specific code with confirmation token code and see if that improves things? We have a doc that breaks down different things that you need to change between the two flows if you have not already seen it
https://docs.stripe.com/payments/payment-element/migration-ct#client-side
dense cove
I just changed it but its not going to do anything...its just a variable name
cinder drift
Though I do think your page shows that createConfirmationToken is not the call that is causing the FetchError message. It properly runs through the console.log statements that happen after that call.
Right, that's why I linked to the doc, this is more than just a name change
dense cove
That was the document I was using
That document doesn't have anything else for me to do
I'm not creating a paymentIntent yet
cinder drift
Honestly I'm not fully sure what your code does after the createConfirmationToken call as that seems to be specific to your system. If you are still getting your Could not save payment, then that would be worth stepping through the code to see exactly what is happening on your side. That would indicate that either the page didn't update to the new code, or that somehow the confirmationToken isn't getting assigned to that variable via the destructuring.