#arsalan-cardelement-clear
slate crater
what do I have to provide ?
zenith mason
I will just test it using my own code and see if I can reproduce
zenith mason
that works for me, what i tried
var card = elements.create('card', {
style: style
});
// Add an instance of the card Element into the card-element <div>.
card.mount('#card-element');
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
card.clear();
})
it cleared the card elements
I guess I did not try react.
this is a plain stripe.js integration
slate crater
I am using React with package I mentioned
@stripe/react-stripe-js
yes you are right
are these methods elements.create avaiable in it as well ?
zenith mason
let me try, you shouldn't need to call the plain javascript as react will create and mount the element properly for you
let me check
slate crater
hmm true
slate crater
can you just let me know what is the appropriate place to call cardElement.clear() and what are the requirements for it ?
zenith mason
const NewChekoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
let card = elements.getElement(CardElement)
console.log('handle submit with cardElement', card);
card.clear();
};
return (
<form onSubmit={handleSubmit}>
<CardElement />
<button type="submit">
Pay
</button>
</form>
);
}
and when should .clear() be called ?
honestly I was trying with boilerplate too, and yes it was working. I am committing mistake in calling clear and the card element
zenith mason
Depends on your code logic. You can call it in the callback when your user payment failed.
slate crater
you mean it should only be called at the end of the request ?
slate crater
I created cardElement, I am first making a fetch request (for stripe backend), using its result and calling another fetch request (for stripe backend).
alright let me share
I added isStripeCustomerLocated method in backend file as wel
zenith mason
is
console.log('CLEARING CARDELEMENT')
// const cardElement = elements.getElement(CardElement);
// await cardElement.clear();
cardElement.clear()
ever executed?
probably you don't need another .then and call clear in the very first .then function
slate crater
Well can you edit in another gist ? This is being lot trouble some, just because of . clear
zenith mason
I mean this https://gist.github.com/soberservicesguy/a3413785b2f5a9ffea4dfa6e02db3061#file-checkoutform-js-L76
Line 76, is it ever executed?
slate crater
Give me 5 minutes
yes it does
also in my whole execution, that is executing in the end
is there any way, I submit the request, but in the same submit button, I remove that cardElement and new cardElement is available there ?
so that it deosnt take old input
zenith mason
hmm, can you try to change your code to add cardElement.clear() at line 57
https://gist.github.com/soberservicesguy/a3413785b2f5a9ffea4dfa6e02db3061#file-checkoutform-js-L57
since you will be clearing the element anyway; maybe worth trying clearing it earlier
zenith mason
strange
👀
your CheckoutForm is used like this right ?
<Elements key={pk}>
<CheckoutForm />
</Elements>
yeah, it still works for me in the callback
const handleSubmit = async (event) => {
let card = elements.getElement(CardElement)
event.preventDefault();
// const {error, paymentMethod} = await
stripe.createPaymentMethod({
type: 'card',
card,
}).then((pm, err) => {
console.log(pm, err);
console.log('handle submit with cardElement', card);
card.clear();
});
}
no reason it is not working
slate crater
well I changed it to use only 1 route, instead of 2 , now its working
thanks for your time and efforts though
slate crater
after taking card details, first my fetch request goes to check whether the person making request is stripeCustomer or not, then on based on that it makes another request to complete the transaction
now I have merged both requests into
zenith mason
ok, anyway glad the issue is resolved.
slate crater
can you keep this unarchived for a while please ?
zenith mason
sure
slate crater
there is another problem, maybe this is the real one
when I am creating new stripeCustomer, it accepts payment depending upon valid card or failing card, but when I find that customer is already there, then it doent work well. does stripe delete customers in test mode ?
zenith mason
nope, we don't delete any data
slate crater
just let me know whats the method for creating new stripeCustomer (which doesnt make any subscription or payment, just creates customer), and another method which only creates subscription (and doesnt create stripe customer )
zenith mason
You can create new customer https://stripe.com/docs/api/customers/create?lang=curl
you cannot create subscription without creating customer; it is not possible
subscription requires you to have customer, payment_method and product/price
slate crater
ok so what if customer is already there, I only want to assign subscription ?
how to assign subscription to existing customer, without creating new one ?
zenith mason
you can just pass the existing customer id when you create subscriptions https://stripe.com/docs/api/subscriptions/create?lang=curl#create_subscription-customer
slate crater
thats exactly how I am doing, but its creating new customer everytime
const assignSubscriptionIfNotExists = async (stripe, stripeCustomerId, plan) => {
let subscriptionResponse = await stripe.subscriptions
.create({
customer: stripeCustomerId,
items: [{ plan: plan }],
})
return subscriptionResponse
}
const createStripeCustomer = async (stripe, account, email, source, uid, platform) => {
let response = await stripe.customers
.create({
name: account,
email: email,
source: source,
description: account,
metadata: { uid: uid, platform: platform },
})
let customerStripeId = response.id
return customerStripeId
}
probably there is some bug here https://gist.github.com/soberservicesguy/a3413785b2f5a9ffea4dfa6e02db3061#file-backend-L83
where req.query.stripeCustomerID) is always null thus a new customer is created each time
you will need to debug that portion of code