#powers-react-cardelement
high silo
urban charm
Hi, taking a look here
lean escarp
and if im only sending the cardnumber element, how does stripe know the expiration date of the card for example?
jagged monolith
powers-react-cardelement
it's magic
mostly when you "mount" the other element on the page we know they are linked to the card number one, so it just works
And really I think you're maybe quite lost here
My guess is that you didn't really start with the docs and ended up on some code example that is bad/wrong
I would highly recommend that you pause completely and start fresh with our docs: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements
lean escarp
iv been following this https://stripe.com/docs/billing/quickstart
jagged monolith
it uses our newer UI called PaymentElement and is drastically easier overall
nah, that doc is for Checkout and you're not using Checkout at all
lean escarp
arnt i? ```js
eturn (
<form>
{/* <PaymentElement /> */}
<button disabled={!stripe}>Submit</button>
<CardNumberElement className={inputStyles} />
<div className='flex w-full justify-between gap-8'>
<div className={inputDivs}>
<CardExpiryElement className={inputStyles} />
</div>
<div className={inputDivs}>
<CardCvcElement className={inputStyles} />
</div>
</div>
<input placeholder='Name on card' className={inputStyles} />
<CountrySelect />
{/* <AfterpayClearpayMessageElement /> */}
<Button onClick={handleSubmit}>PAY</Button>
</form>```
i want custom fields i dont want a prebuilt UI
jagged monolith
well this code is clearly commenting out our PaymentElement UI, and replacing it with our legacy/deprecated CardElement integration. And none of those options are using Checkout which is what the tutorial you said you used is about
so if you don't use Checkout at all then there's no way you would be following https://stripe.com/docs/billing/quickstart
jagged monolith
but let's not put that aside, this is crucial
like if you use Checkout, it's a completely different integration path
if you don't use checkout than that quickstart doc is totally irrelevant
lean escarp
i just want to use the way that lets me customize each input and not use stripe UI. so which doc would i follow for that?
jagged monolith
Ack, I'm trying to help you here. You're going to regret that decision
we don't have any specific doc about the "split fields" behaviour beyond what I shared with you earlier at https://stripe.com/docs/payments/card-element
lean escarp
well then you should completely remove the docs you have that i was following because it was split behavior
jagged monolith
I don't understand what you are saying
what doc are you following? The only one you shared was completely unrelated and for our Checkout product
lean escarp
jagged monolith
Gotcha. I mean that integration still works, you're literally using it. We just don't have an easy tutorial that uses this for exactly your use-case
We
We'
grr sorry bad keyboard
We're happy to help you if you have a specific question
lean escarp
ya my question is, what do i do after ive recieved a successful payment intent response. this is my code that works for getting a payment intent```js
const CheckoutForm = ({ clientSecret }) => {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
console.log("elements", elements);
const result = await stripe
.confirmCardPayment(clientSecret, {
//`Elements` instance that was used to create the Payment Element
payment_method: {
card: elements.getElement(CardNumberElement),
billing_details: {
name: "Jenny Rosen",
},
},
})
.then(function (result) {
console.log(result);
});
console.log("resultresult", result);
if (result?.error) {
// Show error to your customer (for example, payment details incomplete)
console.log(result);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
return (
<form>
{/* <PaymentElement /> */}
<button disabled={!stripe}>Submit</button>
<CardNumberElement className={inputStyles} />
<div className='flex w-full justify-between gap-8'>
<div className={inputDivs}>
<CardExpiryElement className={inputStyles} />
</div>
<div className={inputDivs}>
<CardCvcElement className={inputStyles} />
</div>
</div>
<input placeholder='Name on card' className={inputStyles} />
<CountrySelect />
{/* <AfterpayClearpayMessageElement /> */}
<Button onClick={handleSubmit}>PAY</Button>
</form>
);```what do i do after ive recieved a successful payment intent response
what does that mean? Successful from what?
jagged monolith
you get a PaymentIntent from what? That's a lot of code, which part exactly. Before paying? After confirming? Something else?
lean escarp
yur extremely difficult to talk to
i sent you the code
const result = await stripe
.confirmCardPayment(clientSecret, {
//`Elements` instance that was used to create the Payment Element
payment_method: {
card: elements.getElement(CardNumberElement),
billing_details: {
name: "Jenny Rosen",
},
},
})
.then(function (result) {
console.log(result);
});```this code returns that response
so now what