#anishsubedi1_83944
low condor
payment_method isn't required when creating a SetupIntent. You can create a SetupIntent without that and then confirm it with new payment details collected from the user. This page demonstrates how to do that https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements
knotty cypress
looking into it
knotty cypress
Based on this doc you send above: Is stripe.confirmSetup different than stripe.setupIntents.confirm? We don't have to do stripe.setupIntents.confirm?
low condor
stripe.confirmSetup is a client side javascript call that you can use on your webpage to collect new payment info from a customer
stripe.setupIntents.confirm as far as I know only exists as a call in our server-side APIs so it would be for flows where that final confirmation happens on the server rather than the client
knotty cypress
I am always getting this error. When I setup an element. Tried different ways. Do you know how to solve this?
low condor
Can you send the text of your elements code what you are using here?
Like how you set up your elements provider and how you instantiate the Payment Element?
peak depotBOT
rain cradle
👋 stepping in as Pompey needed to step away
Can you provide your code snippet where you render your <ElementsProvider /> ?
knotty cypress
This is main body. Things work when I do for setupIntents.confirm (problem was payment_method: 'pm_card_visa' changing this value based on client).
Above, he suggested to use future payment doc. And problem occurs I think on this implementation.
rain cradle
Are you passing your client secret within options here?
knotty cypress
yes.
It breaks right here
const elements = useElements();
console.log('breaks');
with error (in promise) Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.
rain cradle
Yeah so try doing {clientSecret && ( <Elements options={options} stripe={stripePromise}>
so that you wait to have your clientsecret before Elements is intialized and you render your inner components
knotty cypress
Didn't work.
rain cradle
Are you trying to call useStripe() in the same component that you are rendering your Elements Provider?
It has to be in a nested component
peak depotBOT
knotty cypress
still working on this
still same issue:
Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.
at parseElementsContext
wicked locust
👋 hopping in here since bismarck has to head out
Can you show me what your code looks like now after making the changes that bismarck mentioned?
knotty cypress
Sure. I have copy pasted SetupForm.js from doc, and index.js part in higher component like bismarck mentioned.
This solved the wrapper issue.
Now, setting up final step stripe.confirmSetup.
Looks like it is working but how do i verify this payment method is new credit user provided?
wicked locust
So you're no longer getting those issues with confirmSetup?
wicked locust
👍
I'm not fully understanding the most recent question you had though - how do i verify this payment method is new credit user provided?
Are you just asking how you can check whether this is a new payment method?
knotty cypress
yes
wicked locust
Sorry I keep pushing - areyou trying to see if a new payment method is being created or are you actually trying to check the card number to see if it's one that has been used on your account before?
knotty cypress
so, when user updates the credit card , I want to see if it is getting changed in existing
subscription or not.
peak depotBOT
knotty cypress
My task is: Update the credit card (add new) on existing subscriber, so that next subscription will take place in updated credit card. Followed this approach:
https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements
wicked locust
Ah, if you want to listen for if the default Payment Method on the Customer was changed then you can listen for customer.updated and check if invoice_settings.default_payment_method was updated. If you're updating the default payment method on the subscription istead of the customer, then you'd check customer.subscription.updated and see if default_payment_method was changed there
knotty cypress
A bit confused: What am I supposed to do after this?
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: 'http://localhost:8080/user/profile',
},
});
Does it update the new credit to subscription directly?
wicked locust
No, you'd need to update your customer to set invoice_settings.default_payment_method on the Customer if you want the payment method to be automatically used for subscriptions moving forward
knotty cypress
Like this right on subscription and customer ?:```await stripe.subscriptions.update(userDetail.userSubscriptionProfile.stripeSubscriptionId, {
default_payment_method: confirmSetupIntent.payment_method,
});
await stripe.customers.update(customerId, {
invoice_settings: {
default_payment_method: confirmSetupIntent.payment_method,
},
});
You don't have to do it in both - setting it on the subscription will only update the default for that particualr subscription but updating it on the customer will use that default for ALL subscriptions/invoices on that customer
knotty cypress
cool, I though so.
But the problem is:
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: 'http://localhost:8080/user/profile',
},
});```
with return_url page get's refreshed and unable to access confirmSetup objects.You can set a variable to determine how to handle redirects. Some payment methods require them so you will want to either use Stripe.js to retrieve the intent's info or use your server to retrieve the info depending on what you need
https://stripe.com/docs/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect
https://stripe.com/docs/js/setup_intents/retrieve_setup_intent#stripe_retrieve_setup_intent
knotty cypress
ok. Reading.
knotty cypress
This prevents the refresh so keys are still there. But, it is not allowing update.
low condor
Yeah, subscriptions cannot be updated from the frontend like that. You will need to send the info about the change that you want to make to your server and then have the server update the Subscription
knotty cypress
nv..In "stripe.update", stripe was from useStripe instead of require('stripe'). But will do it from backend.
So, it finally update the default link. That's correct?
Is there a way we can get info of that link? To check credit card number for final confirmation.
low condor
What info are you looking for from Link?
knotty cypress
is credit card update or not?
low condor
You can't tell what kind of payment method it is past it being a Link PM. But for your testing purposes you can check that that default PM matches the one that you set as the default
knotty cypress
you mean on frontend?