#Linas-checkout-sessions
golden spindle
wintry geode
sure, give me a minute.
river thistle
But based on the error message you provided, it's expected that you can't update the Payment Element if the PaymentIntent has been canceled.
wintry geode
array (
'clientSecret' => 'pi_3MMr1P2WxmpWlx1M1F6DAr4B_secret_O1AYhzHFF72PwN4ddyaJNgYk3',
'invoiceID' => 'in_1MMr1M2WxmpWlx1MATTx5QmA',
'paymentIntent' => 'pi_3MMr1P2WxmpWlx1M1F6DAr4B',
),
from backend it looks, that everything ok. But when i try to run fetch function on JS, it throws that error.
river thistle
Thanks! Give me a few minutes to look into this.
Yes it looks like the API response is different due to some internal changes.
Is this change causing issues for your Stripe integration?
wintry geode
yes,if user updates his cart and makes payment, tha payment do not reflect to changes.
egzample: if user adds additional item to cart and makes payment, he pays only for initial product, but not for additional item. (so probably apple pay is not updated properly)
river thistle
Sorry, please ignore my previous message, it was meant for a different thread...
Looking into this now.
The error message you shared earlier is this:
"PaymentIntent in unexpected status" status: "canceled"
But the PaymentIntent you shared (pi_3MMr1P2WxmpWlx1M1F6DAr4B) is not canceled.
Did you share the correct PaymentIntent?
Or did you mean to share this PaymentIntent: pi_3MMr1C2WxmpWlx1M0tS7yQkh? This one is canceled because the corresponding invoice is voided.
wintry geode
i have copied paymentIntent from the backend..
let me check if i'm able to grab it from frontend.
Payment intent grabbed from frontent JS, which was passed from backend: pi_3MMraN2WxmpWlx1M1hVVnmFW
wintry geode
no rush, but were you able to check this "pi_3MMraN2WxmpWlx1M1hVVnmFW" payment intent?
flat dust
👋 taking over for my colleague. Let me catch up.
sorry for the late reply, your message must have slipped between my fingers
the PI you shared isn't canceled
wintry geode
yes, but then i get such error.
flat dust
would you mind sharing the code that generated this error?
wintry geode
sure
(async () => {
const response = await fetch('{{route('update.product', [$slug, $slugVersion])}}', {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items, intentID, customerID, bumpOffer, invoiceID }),
}).then((r) => r.json());
elements.fetchUpdates()
.then(function(response) {
// Handle result.error
console.log(response)
});
maybe this looks nicer
i have to step back for 20mins, but i will get back asap.
wintry geode
i got back.
flat dust
so basically what happens is that you're doing revisions on your invoice
this means that the PaymentIntent for the invoice gets cancelled and we create a new PaymentIntent with the new total amount and attach it to the invoice
my colleague @vague harbor advised against going through this route yesterday
wintry geode
yes, thats what i'm making under backend. but then i return the new payment intent to forntend
my boss wants to implement both solutions and do a split test.
flat dust
you need to update the client_secret because the new PaymentIntent has a new client_secret different than the one you already have stored before making the change
wintry geode
thanks for tip, let me check that
hmm... but fetchUpdates() function is not using client secret ?
elements.fetchUpdates()
.then(function(response) {
// Handle result.error
console.log(response)
});
wintry geode
is there any documentation about it ? because i do not see, that function would be passing client secret.
wintry geode
ok, let me try it.
flat dust
are you using react by any chance? or vanilla js?
wintry geode
vanilla JS.
flat dust
yeah I thought so
wintry geode
i think, it works now, i will try to test with apple pay.
flat dust
sure
wintry geode
hmmm, i do not get that error anymore. But when i click on button to pay, button is loading and nothing happens...
actually i foudn error
dapper hamlet
Hey, taking over here. Let me know if there's any follow-up Qs I can answer!
wintry geode
thanks, doing a few tests.
one thing its a bit strange. i will try to make screenshare video.
dapper hamlet
i can't run the video, coul dyou please describe the issue with some screenshot instead?
wintry geode
at first i select to pay with google pay. then i fill the data, then i select to buy additional data. After that my "google play" selection turns back to "pay with credit card".
maybe vidoe was still uploading ,but now it allows me to play.
dapper hamlet
maybe vidoe was still uploading ,but now it allows me to play.
You mean that you don't have an issue any more ?
wintry geode
from technical side it is possible to pay.
but that automatic change from Apply pay to credit card looks like a bug?
dapper hamlet
Not sure I'm understanding the issue well, could you try to upload another demo video illustrating the issue ?
wintry geode
sure
i'm on mobile internet + vpn, so that doesnt help with speed. but it should upload in 5mins.
maybe it will allow to post here.
dapper hamlet
Thanks for sharing it, now it's working
The issue is that when you click on the checkbox "Yes, I will take it", you are creating a new payment intent and you are updating the client secret used in the PaymentElements, the UI re-charges and the card option is selected again
dapper hamlet
Why you want to create a new PaymentIntent ? you can't just update the amount of the existing PaymentIntent ?
wintry geode
user is adding or removing new item. so i want that item would reflect as a separate product.
thats why i create invoice and then attach items to that invoice.
and if user delesect that item, then i'm revising invoice and removing that item.
i guess, there is no elegant way to solve it ?
primal kettle
Hi there 👋 I'm jumping in as my teammate needs to step away. Please bear with me a moment while I catch up on the context here.
Using Invoices here may be making this scenario more complicated, is there a specific feature/functionality of Invoices that you wanted to leverage which drew you towards using them?
wintry geode
yes,i wanted that products would be listed separately.
and that user could add or remove additional product.
primal kettle
Gotcha, so are you generating a new Invoice every time an item is added or removed?
wintry geode
i'm "revising invoice"
primal kettle
Can you elaborate on what that means? What API calls are you making when the customer chooses to add an additional item via your frontend?
wintry geode
we have main product and additional product, which user can add /remove on top.. So, when user adds/remove additional product the flow is like this: 1) revising invoice 2) adding or removing that additional invoice item. 3) finalize invoice 4) retrieving payment intent 5) passing payment intent, client secret, invoice id to front-end.
not sure if i was clear here.
primal kettle
An Invoice can only be finalized once though, so I'm getting the impression that you would be creating a new Invoice each time a product is added/removed from the front end, which I believe is the key drawback here since that generates a new Payment Intent which requires reloading the Payment Element.
I was looking to see if you could detect what the customer had selected previously, and then forcibly reselect that type of payment method when the element is reloaded, but you can't do the latter part of that.
Another problem you'll see with this, is that if the customer was doing a card payment, then they would need to re-enter their data after the element is reloaded.
wintry geode
I do revide on finalzied invoice.
*revise
$revision = $this->stripe->invoices->create([
"from_invoice" => [
"invoice" => $request->invoiceID,
"action" => "revision",
]
]);
primal kettle
That creates a new Invoice, you're calling invoices->create
wintry geode
yes, but as a revision.
primal kettle
Sure, but it's a new Invoice object that will result in a new Payment Intent object being created that requires you to reload the Payment Element.
My suggestion would be to either move the Payment Element to a screen after the one you showed, so no more changes will be made once the Payment Element is rendered, or look into using Payment Intents instead of Invoices.
wintry geode
but with payment intents i wont be able to list separate products?
i think, we will be moving to Stripe Checkout.
where initial action is on stripe website.
i just don't see how to add product photo in "customize checkout page" section.. ( https://stripe.com/docs/api/checkout/sessions/create )
primal kettle
Not as line items the way you do with Invoices, but if you need to track data that is important to your flow and pass it along with Stripe objects then you can use our metadata field for that:
https://stripe.com/docs/api/payment_intents/update#update_payment_intent-metadata
https://stripe.com/docs/api/metadata
It allows you to store up to 50 key/value pairs of data on Stripe objects, so you could potentially use that to track your customer's cart.
You wouldn't add product photos to the Checkout Session, instead they get added to your Product via the Stripe dashboard and then the Checkout Sessions will pull those in depending on the number of items in the session and the amount of fields that the session needs to display to the customer.
wintry geode
got it. and then i have to provide price id, instead of the amount ?
but what would be if the price is dynamic ?
primal kettle
For Checkout Sessions, yes, you will need to provide Price objects for that. For dynamic prices you can use price_data to create a Price object in an ad-hoc fashion during the creation of the session:
https://stripe.com/docs/api/checkout/sessions/create?lang=go#create_checkout_session-line_items-price_data
Linas-checkout-sessions
wintry geode
thank you. and my last question:
when user pays on stripe website and gets back redirected to our server. somehow i need to retrieve his customer id.
maybe i could fetch it from stripe if i have payment intent ?
regal saffron
Hi there. Toby had to step out, so I'm taking over. If you have the payment intent and already tied the customer object to the payment intent, it's available here: https://stripe.com/docs/api/payment_intents/object#payment_intent_object-customer