React-stripe-elements: "Value" attribute in CardNumberElement?

[davidivad96]

I need to put a value in the CardNumberElement component. Not a placeholder (this can be done with the "placeholder" attribute). I want to put a default value, just like the "value" attribute in the "input" tag of html does.

I've tried the "value" attribute, but it doesn't work. Anyone knows if this is possible?

[atty-stripe]

HI @davidivad96! This is not possible, as the PCI compliance level that Elements provides prevent merchants from handling credit card numbers themselves.

Curious, what is your use case? What is the value that you're trying to set, and why?

[davidivad96]

Well, my case is that I have a profile user page where you can edit your personal information. In that page there is a section where you save your payment information.

So I need this because once you have put and saved your card number I would like to leave it there like a value (showing only the 4 last numbers, the rest would appear as asterisks) so that you can see and edit that information when you go to the profile user page.

Some recommendation in order to do this? And thanks for the quick reply!!

[cweiss-stripe]

Hi @davidivad96
We recommend to create your own text/div component to show the obfuscated card number (* * ** 1234). The CardNumberElement is really only designed to let customers enter card numbers, not to display them.

[larafale]

hello @cweiss-stripe , I'm building a visual test page in order to play with stripe API & Element so we can better understand the workflow before migrating to this f**ng SCA regulation :)

We need to test many scenarios, with different test card numbers (https://stripe.com/docs/testing#regulatory-cards). I understand that in production the user enter the card himself, but for our testcases, we need to be able to prefill the card infos without having to type them manually everytime we run a test.

Does stripe element provide a setter() for card infos ? if not, should I try to set them programmatically in the DOM, or will the Lib wont work that way because it will miss internal validation ? Thx for your feedback.

[harvey56]

Hello @cweiss-stripe, @atty-stripe . I'd like to use the following component : https://github.com/amarofashion/react-credit-cards#readme. It adds a nice visual, and enhances the user experience. How can I do that given I cannot capture the value field of the onChange event with react-stripe-elements ? Any other suggestions ?

[atty-stripe]

Hi @harvey56, unfortunately you cannot emulate that component, as the CardElement does not expose the card number your customer is typing. This is due to PCI reasons, and is documented here: https://stripe.com/docs/security#validating-pci-compliance.

[atty-stripe]

@larafale Elements do not provide any setter helpers. The best way to test their functionality is to assume they work and mock the inputs / outputs (such as mocking out createPaymentMethod).

[gleidsonh]

Hi @atty-stripe. Why in this post blog he could use a 'View Card'? Is it possible to do that without Stripe Elements or not anymore?