How do I create a read-only duplicate of a Stripe Element?

0
votes

I'm trying to create a neat little payment form with Stripe. Their latest client-side JS library version only allows you to create credit card number inputs with Elements. I'd like to display their credit card number somewhere else on the screen (in addition to the input the user is filling out) to dynamically fill out a graphic of their credit card. I can't get the credit card number from the Element (the library won't let you), and I debated trying to recreate the card number from a few event listeners, but nothing is working.

With that backstory, is there a way that I could potentially just display the credit card number with Stripe on this credit card graphic? Is there a separate Element for displaying the number? Can I create a duplicate element, mount it on the graphic, and just use something like pointer-events:none to make it read-only?

1
javascripthtmlstripe-payments
The whole point of the Stripe Elements API and stripe.js is to prevent your application from ever seeing the credit card number. If you get the number, then you need to implement all the security requirements for PCI compliance. – Barmar
@Barmar I understand that, which is why I'm asking this question. The only reason I'd need to access the credit card number is to display it again somewhere else on the screen. Is there a way of accomplishing that goal without my program ever touching the credit card number? Can I create a duplicate of the element that the user is filling out and then disable user interactions with it? – Jaden Baptista
you're not supposed to be able to display it to the user. You can get the last 4 digits from the Stripe API, but not the whole number. – Barmar
@Barmar The user can see it when they type it in, so it's not like they're hiding anything by restricting this ability. So you're saying there's no way to duplicate the credit card Element? – Jaden Baptista
Bamar is correct, there's no way to do what you want to do here. There's no way for your application to get or reveal the card number. If you need to display part of it, you can display the brand and last 4 which are available. – floatingLomas

1 Answers

0
votes

I figured I'd just note what I ended up doing. Thanks to @floatingLomas and @Barmar for helping me get there.

I ended up putting the inputs themselves on the credit card graphic, which made for a very cool signup form. I was able to style the Stripe inputs just like mine using CSS, so it didn't look peculiar from the user's perspective.