How Can I Auto-Insert The Test Card Number into Stripe Payment Input?

Wappler General Need Help
1

Hi Wappler Gang!

My app takes Stripe card payments and can operate in test mode where you are always inserting the same card number.

Is there any way in Javascript or dmx to auto-insert that number into the card number field? The HTML doesn’t have an id so I’m not sure how you can uniquely recognise it!

This is the HTML that Stripe creates:

<div class="CardNumberField-input-wrapper">
   <span class="InputContainer" data-max="4242 4242 4242 4242 4240">
      <input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" tabindex="0" value="">
   </span>
</div>

Thanks!
Antony.

2

Hi.
Isn’t the card number field generated in run time? When Stripe renders the checkout form on your page?
I don’t have much experience with this, I just use Stripe Checkout page, so could be wrong here.
But if the inputs are being rendered, you will have to use JS to set the value in the dynamically created field.

3 
<input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" tabindex="0" value="42424242424242">

Can’t you just put the CCnum in the value? Or use DMX-bind:value=“42424242424242” something like that?

4

Hi @baub… no, you can’t do that as the form is autogenerated by Stripe…

5

Yes, I believe this to be correct @sid… so my question is:

What JS code would allow me to do this?

I’m not so proficient at JS!

6

I would be able to give you a code snippet if you can share the HTML rendered for checkout.
But the concept is to identify the input field based on its id or classes, and set the value then.

Based on the code in your question, a jQuery JS code could be like:

$(".InputElement.Input").val('4242 4242 4242 4242')

Another part would be to figure out, when to call this. I am not sure if there are any events when checkout form gets rendered. But if its there, you can set this JS there.
If not, you can use a set timeout function to delay running the above JS code for few milliseconds while checkout form renders.