#clonx.eth
green yachtBOT
Hello! We'll be with you shortly. 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.
- clonx.eth, 3 days ago, 19 messages
fleet ivy
Yes, hello Vanya. So here is our plan: A user signs up for our site and creates an account. we want to assign them a stripe customer id and create a customer object. When they make a purchase, we render a PaymentElement to get their card details, and set up a payment intent, and when their rental is over we charge the card for their usage. Does this make sense?
barren stirrup
Do you want to put a hold on the card or just save it for future charges?
fleet ivy
just save it
at this point only collecting card details, later will have the payment intent to charge a hold
fleet ivy
Ok, thanks for the docs. any other light you can shed?
barren stirrup
Please follow the docs and feel free to reach out if you run into any challenges.
fleet ivy
I have run into an issue. I need to offer a field for coupon code but don't see how i can do this with PaymentElement
@barren stirrup
barren stirrup
There's no Element for handling Coupons, you will need to build it yourself.
fleet ivy
But I did see there is a payment-link that handles coupons
barren stirrup
Payment Links is a different product
fleet ivy
will payment links work with the approach I'm trying to accomplish?
barren stirrup
I would suggest using Stripe Checkout: https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=checkout
fleet ivy
Why do you feel stripe checkout is a better approach than save and reuse from the link you sent prior?
This is where I'm quite confused between these 2 approaches.
They seem to be essentially achieving the same goal, but wondering the differences
barren stirrup
Payment Links is a no-code solution with minimal functionality. It doesn't support providing a Customer ID, etc. PLinks are also designed to be multi-use.
Checkout Sessions are supposed to be programmatically generated every time for each customer personally.
fleet ivy
So does this mean payment links wont work with the approach I described before where we would be using a customer id?
whereas the PaymentElement would?
barren stirrup
The Stripe Checkout would also work with Customer IDs.
To summarise, there's 3 ways:
Payment Links - Stripe-hosted - no-code - multi-use
Stripe Checkout - Stripe-hosted - customisable - one-time use
Payment Elements - user-hosted - customisable
green yachtBOT
fleet ivy
but with stripe checkout I dont see where I can save the card for later use?
glacial jewel
barren stirrup
fleet ivy
ok, not related that the 'try it out' on the website doesnt give the option then?
this might be what confused me
glacial jewel
It's not presented as an option/checkbox on the payment page to the user. It's a setting you configure via the API
fleet ivy
Yes, I understand this, but on the payment link for example. it is a checkbox to show the slight ui changes for this option
sorry, could you link me to where i can create a stripe checkout
glacial jewel
Sorry, I don't understand what you're asking me
fleet ivy
yes I did the try it out for this link
glacial jewel
Great, let me know if you've any questions
fleet ivy
Yes I do
glacial jewel
Then ask away!
fleet ivy
ok so these are the components that contain the checkout form ? <EmbeddedCheckout />
</EmbeddedCheckoutProvider>
glacial jewel
Yes, those are the React components to mount and render an embedded Checkout Session
fleet ivy
but looks like the styling options are handled in the sever?
glacial jewel
There's a hosted alternative you can just redirect users to if you prefer
glacial jewel
but looks like the styling options are handled in the sever?
Any kind of styling/branding is inherited from your account settings. It's pretty limited: https://stripe.com/docs/payments/checkout/customization
fleet ivy
so im here: https://stripe.com/docs/checkout/quickstart perhaps ill do the stripe hosted page. but I dont want the checkout button as I already have one
only want whatever screen is called that comes next
to save the card for later
glacial jewel
Ok, you'll need a button it create the session and redirect the user
fleet ivy
Right, I’ve already got a button and I can use it to call the api to create the session yes?
glacial jewel
Sounds reasonable yep
fleet ivy
Alright- will follow up momentarily…
OK so I'm building a checkout. i don't need an order preview or checkout button because I have the button right. What is the page called that the checkout button takes the user to?
/create-checkout/-session POST call. I want to see how to style and modify this page-
glacial jewel
/create-checkout-session is the backend component of the integration that creates the session and redirects users to the Stripe payment page
fleet ivy
is there a place i can preview this on the stripe site before coding it myself?
With my product
glacial jewel
You can create a Payment Link which is essence the same payment page/UI: https://stripe.com/docs/payment-links/create
fleet ivy
Ahhhh now we've come full circle
ok, so that would be how to preview this but it won't be a payment link in practice?
glacial jewel
I guess? I'm not sure what specifically you want to preview?
The Checkout page is pretty standard and non-customisable
There's examples here: https://checkout.stripe.dev/
fleet ivy
right, I see the examples but they are missing the bit about saving the users card for later. I just assume I will see that when i code it up with the input for saving the card for later?
glacial jewel
But as I stated ages ago, there's no visual representation of the 'save the card for later'. There's no a checkbox if that's what you're expecting
glacial jewel
Yes
fleet ivy
!!!!
This I will trust will display if I set the input for it? but its not in the preview
this was a source of confusion
glacial jewel
Which preview?
fleet ivy
glacial jewel
Here's what it looks like: https://buy.stripe.com/test_00g9CjdAK9mD8xy9Bw
glacial jewel
https://checkout.stripe.dev/
That's because there's no option to save the card on that demo
fleet ivy
right, this is what i was looking for. The demo should have this. would have saved me confusion.
glacial jewel
Sure, but takes 2 minutes to spin-up a Payment Link like I just did to see how it behaves
fleet ivy
which ive done already, but will i be using a paayment link for this solution?
in the end the page ive been asking about is a payment link
?
glacial jewel
I don't know? But Payment Links use Checkout under the hood so the payment page behaves the same
fleet ivy
if oyu dont know imagine how confused I am 🙂
im using checkout
so users are sent to a payment page, but not a apyment link?
glacial jewel
Yes
fleet ivy
im supposed to just know what a payment page is vs a payment link, to know they are different but behave the same?
glacial jewel
A Payment Link is just a reusable URL (like https://buy.stripe.com/test_00g9CjdAK9mD8xy9Bw) you can send multiple times. That URL there then generates a Checkout Session when visited
fleet ivy
Rgiht, I understand that. but I'm trying to better understand where the user is redirected here /create-checkout-session
glacial jewel
That endpoint in your integration will make an API call to this endpoint (https://stripe.com/docs/api/checkout/sessions/create) to create a Checkout Session. That API will return a url which you redirect your users to and then can pay there
green yachtBOT
fleet ivy
ok and this endpoint will have the same style as a payment link but not be a payemnt link correct?
cloud oriole