#liam-hunt-bonterra_best-practices
odd tulipBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1316438444716593194
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
candid copperBOT
tacit drum
Hi 👋
No, it isn't possible to do client-side filtering of card brands like that.
The best approach to handle this is to either write a new Radar Rule that block the card brands you don't want to accept, if you're already a Radar for Fraud Teams subscriber.
If not, you'll want to use this flow so you get details about the card being used before processing the payment, via the payment_method_preview.card hash on the created Confirmation Token object.
https://docs.stripe.com/payments/build-a-two-step-confirmation
Then you can avoid processing a payment if you detect a card brand you don't want to process is being used, and prompt your customer to provide different payment method details instead.
dreamy wind
Thank you! This is very helpful. If I wanted to provide the customer with more immediate feedback (once they've finished typing the card, as opposed to once they hit submit and generate a confirmationToken), would it be feasible to listen to the PaymentElement onChange event and manually show an error?
I am not sure if the onChange event exposes the card# or card brand. I am also not sure if there is a way to manually show errors on the PaymentElement
tacit drum
No, the change Event for the Payment Element doesn't expose card information. The structure of that event is shown in our reference guide for stripe.js here:
https://docs.stripe.com/js/element/events/on_change?type=paymentElement
dreamy wind
Ok thank you! I think I'm settled for checking the confirmationToken on submit then. Is it possible to manually add validation errors to the PaymentElement? This is probably our preferred UI for showing the customer they've used the wrong card brand
tacit drum
Not really. Typically what you do when using the Payment Element is include a div right under it to hold error messages, then you populate that with either a Stripe returned error or your own error if you're adding additional validations.
Step 3 of the guide I shared shows that error-message div being added. Then Step 4 shows it being updated, and you can reuse that approach to surface your own errors specific to your flows.
The part I'm fuzzy on off the top of my head, that I would recommend testing, is whether createConfirmationToken returns the entire Confirmation Token object to your client-side code, in which case you may be able to detect the card brand client-side:
https://docs.stripe.com/js/confirmation_tokens/create_confirmation_token
dreamy wind
Thank you! This is helpful and should give me enough to go off of. createConfirmationToken does return the full confirmationToken object, including the card brand 🙂
tacit drum
Perfect!