#HyperGame-elements
fleet bane
yep!
still island
Got it. That example is using the CardElement: https://github.com/stripe-samples/subscription-use-cases/blob/83015a9f29bf21630b386827a2d633a8ba80952c/fixed-price-subscriptions/client/react/src/Subscribe.js#L45
Providing the client_secret upfront when initialising the Elements instance is only a requirement for the Payment Element: https://stripe.com/docs/payments/payment-element/migration?integration-path=one-time#one-time-update-elements
fleet bane
I am currently having the user to enter the email and payment information in the same page. However, I need to load the Elements with clientSecret first. Is there an alternative way to do it with PaymentElement?
still island
HyperGame-elements
fleet bane
or do I have to prompt the user to input their email first before going to the payment page
still island
I'm not sure I understand the question?
fleet bane
So basically the user would like to subscribe to a product.
User enter email and fill in PaymentElement -> Register Stripe Customer -> Create Stripe Subscription with the returned customerId -> Calls stripe#confirmPayment
As the email is on the same page as the PaymentElement, I could not load the client secret after the subscription is created.
still island
Yeah the generally integration flow is to create the Subscription object before capturing payment details:
- Create Subscription (and Customer if necessary).
– Initiate the Payment Element with theclient_secretfrom associated PI/SI. - Confirm.
fleet bane
ah I see. One more question, is it possible to customise the form labels in PaymentElement?
still island
What specifically?
still island
I'm afraid not: https://stripe.com/docs/stripe-js/appearance-api
fleet bane
it also looks like the text is broken at the bottom. would there also be a way to fix it?
still island
Can you provide somewhere I can reproduce that? I guess you're configuring some style variables that might be messing with it
fleet bane
I only changed the colors
Code for PaymentForm
<div className="bg-slate-800 bg-opacity-50 absolute top-0 right-0 bottom-0 left-0">
<div className="px-5 py-5 mx-auto my-auto min-w-max max-w-xl max-h-xl bg-gray-800">
<form onSubmit={handleSubmit}>
<PaymentElement />
<div className="flex justify-center">
<button className="px-10 py-2 rounded-lg bg-slate-900 text-white font-semibold">
{statusMessage}
</button>
</div>
<div>
{message}
</div>
</form>
</div>
</div>
Is there a link I can reproduce this at?
still island
Looks fine for me. Which browser are you in?
still island
Bizarre, I can't replicate in either
Looks like a font-smoothing issue to me, looks like you're on Windows?
fleet bane
yep!
still island
My guess is its Windows specific. I would recommend creating a GH issue over on the Stripe.js repo: https://github.com/stripe/stripe-js
fleet bane
Alright, thanks for the help! Really appreciate it!
still island
Np!
fleet bane
sorry, got one more question. Is it generally a good practice to create a customer whenever someone signs up? or should I create the customer only before he/she is ready for a purchase
still island
Up to you really!
You might want to do it on account creation so you can persist the Stripe Customer ID with the user object in your database
fleet bane
yea, however, the majority of the user would not be making a purchase, so I’m thinking if it’s a good idea to create tons of customers that probably wont end up paying