#Aliciant-cardElement
still solar
hi there, to clarify, you're not able to get the cardElement to render when you're using SetupIntents?
raven tree
Yes. I am able to get it to happen if there is no card associated with the customer.
But if I try to do it again, (to add another card for example), the cardElement doesn't render.
still solar
do you have a publicly accessible test site? Otherwise, can you share the relevant code snippets here on how you're initializing / rendering the cardElement?
raven tree
sure
await axios
.post('/api/stripe-setup-intent', {
userid,
stripeid
})
.then((response) => {
setClientSecret(response.data.stripeIntent);
setStripeid(response.data.stripeId);
setDoneGettingClientSecret(true);
});
{ready && !isEditingCard && (
<CollectPaymentInfo
dibsCardInfo={dibsCardInfo}
hasPaymentMethod={hasPaymentMethod}
clientSecret={clientSecret}
studioCardInfo={studioCardInfo}
setCardValueChanged={setCardValueChanged}
setIsEditingCard={setIsEditingCard}
/>
)}
to render the cardElement ->
<Elements options={options} stripe={stripePromise}>
<CheckoutForm clientSecret={clientSecret} setCardValueChanged={setCardValueChanged} />
</Elements>
and then the actual form ->
<form onSubmit={handleSubmit} className="form">
{!successfulIntent && <CardElement id="card-element" options={cardStyle} spacing={1} />}
<button type="submit" id="payment-request-button" disabled={isLoading || processing}>
<span id="button-text">
{processing ? (
<div className="spinner" id="spinner">
Processing
</div>
) : (
buttonnote
)}
</span>
</button>
{message && <div>{message}</div>}
</form>
(I don't know if that helps - sort of hard to ready)
*read
still solar
what is this variable? i.e. what is the value it's evaluating here? !successfulIntent
raven tree
I think it's easier to explain. So in React, I have a parent js file that will render the full page. In that file, I am checking to see if I have a payment method for the customer. If I do, then I display last 4 + expiration date. If I do not have a payment method for that customer, then I render the cardElement (using the setupIntent).
That all works well.
The problem happens when I am displaying the last 4 + expiration date (just in plain HTML i.e. no stripe elements). I have an "edit" button.
When the user clicks the edit button, I am aiming to create a new clientSecret to render a new cardElement.
I am able to get a new clientSecret using setupIntent, but when I try to pass that to the cardElement, it doesn't render.
still solar
what are you expecting the customer to be able to edit?
raven tree
I am expecting to be able to add a new payment method to the customer.
Basically, I need to give them the ability to change their credit card on file.
still solar
i understand what you're trying to do, but you're going to need to trace through your code step by step to see what's possibly going wrong here
the first thing that comes to mind here is what is this value : !successfulIntent evaluating to. Since only if both values here {!successfulIntent && <CardElement id="card-element" options={cardStyle} spacing={1} />} evaluate to true, then the CardElement will show
raven tree
Right, I tried without that, I tried with it - I couldn't get the CardElement to show.
It seemed like it was something related to the setupIntent clientSecret. Like maybe I was rendering the CardElement too soon? Or something like that? I'm not sure.
Ok, I was just wondering if there were any guides related to editing credit cards on file.
still solar
to clarify, you wouldn't edit a credit card on file
raven tree
I am updating our codebase, and the way that we did it before seems very outdated.
still solar
in your case, it would be creating a new card, and then deleting the old one on file
raven tree
Yes, exactly.
Adding a new card.
Could there be a problem with using the same files to generate a new CardElement?
for example, do I need to set a key, or an id that says this is an entirely NEW CardElement?
still solar
i'd suggest you create a simple sample that replicates the issue you're seeing now so that I can take a closer look
unfortunately, without the full code i.e. replicable sample to look at, it's not going to be possible for me to to troubleshoot
raven tree
Maybe I'm just tired. I'll give it another go in the morning to see if I can sort it out.
still solar
sure! feel free to reach out again with a sample if you're still having trouble