Testing with Stripe Elements in Laravel Dusk

This post is quite old now.

If it's a technical article, this means that some of the information in this post might be out of date.

Today I've been playing around with using Laravel Dusk to test a payment form on a small website.

The payment form is a key part of the owner's business so it's crucial it works all the time, whenever the customer makes a purchase.

The site uses Stripe Elements to let the customer enter their payment information securely.

Elements creates its own iframe element which makes it a little tricky to target and test. However, there's a handy method in Dusk which allows you to type inside of an iframe.

php

$this->browse(function ($browser) {
  $browser->type('@input', 'whatever')
    ->withinFrame('.__PrivateStripeElement iframe', function ($browser) {
      $browser
        ->type('[placeholder="Card number"]', '4242424242424242')
        ->type('[placeholder="MM / YY"]', '0923')
        ->type('[placeholder="CVC"]', '123');
    });
});

Anything you need to type inside of Stripe's iframe you can do inside the withinFrame method and target the relevant inputs via their placeholders.

Hopefully someone finds that helpful! 🙂