testingstripe-paymentsbehatmink

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

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.

invalid card number with behat

The incorrect card number is not consistent; when I re-ran the test three times, I got these numbers:

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?

Solution

  • 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");
  }