Credit card number is garbled when testing Stripe.js in Mink - testing

Question

I am trying to use Behat/Mink to test Stripe on my Drupal site.
I have a Stripe testing payment gateway configured. My
My FeatureContext.php looks like this:
/**
* #Then I enter my US JCB credit card info
*/
public function iEnterMyUsJcbCreditCardInfo() {
$this->enterCardDetails('3566 0020 2036 0505', '11 / 21', '777');
}
private function enterCardDetails($card_number, $exp_date, $cvc) {
$this->getSession()->wait(2000);
// Switch to the payment iframe.
$this->getSession()->switchToIFrame(self::STRIPE_CARDNO_IFRAME);
$this->getSession()->wait(1000);
$this->fillField('cardnumber', "$card_number");
$this->getSession()->wait(2000);
I added the wait() because the credit card number is being filled out incorrectly.
For example, when I have the step And I enter my US JCB credit card info, then instead of the correct test card number (3566 0020 2036 0505), I get this: 3566 0000 3605 5022.
The incorrect card number is not consistent; when I re-ran the test three times, I got these numbers:
3566 0022 3005 5600
3566 0002 0360 5502
3566 0006 5500 3220
So it seems like something with stripe.js is interfering with my credit card number input.
The credit card expiration date and CVC/security code input do not have this problem.
When I eliminate the spaces in the credit card number, I still have the same problem (the number is randomly garbled during input).
Even when I set the wait time before and after card number input to 5 seconds each, the card number still gets garbled.
How can I input the credit card number in behat/mink without garbling the number?

Answer 1

I don't know anything about behat or mink, but I would suggest you remove the spaces; those all look like they contain the same numbers, just in different orders, so the spaces might be causing issues as the cursor might be moving around a bit.

Answer 2

Summary: You have to input the credit card number one digit at a time because Stripe.js will screw up the spacing if you try to input it all at once.
Here's the relevant code I've been using for the past couple weeks:
// Handle randomized iframe numbers by targeting the div above them.
const STRIPE_CARDNO_IFRAME = 'card-number-element';
const STRIPE_EXP_IFRAME = 'expiration-element';
const STRIPE_CVC_IFRAME = 'security-code-element';
/**
* #Then I enter my credit card number :cc_number
*/
public function iEnterMyCreditCardNumber($cc_number) {
$payment_errors_element = $this->getSession()->getPage()->find('css', 'div#payment-errors');
if ($payment_errors_element->getText()) {
throw new Exception($payment_errors_element->getText());
}
echo "Test credit card number: $cc_number\n";
$this->switchToMyIframe(self::STRIPE_CARDNO_IFRAME);
$this->getSession()->wait(5000);
$credit_card_field = $this->getSession()->getPage()->findField('cardnumber');
$cc_number_nospaces = str_replace(' ', '', "$cc_number");
$creditcard_singledigits = str_split("$cc_number_nospaces", 1);
foreach ($creditcard_singledigits as $creditcard_singledigit) {
$this->getSession()->wait(2000);
$credit_card_field->sendKeys("$creditcard_singledigit");
}
// Take a screenshot for debugging when the card number is entered incorrectly.
$this->saveScreenshot();
$this->getSession()->switchToIFrame(null);
}
/*
* Helper function to find the iframe.
*/
private function switchToMyIframe($selector) {
$iframe_selector = "div#$selector iframe";
$iframe = $this->getSession()->getPage()->find('css', $iframe_selector);
$iframe_name = $iframe->getAttribute('name');
echo "Switching to iframe $iframe_name\n";
$this->getSession()->switchToIFrame("$iframe_name");
}