Fill in a Stripe Elements (https://stripe.com/docs/elements) credit card field using capybara

capybara_fill_stripe_elements.rb

def fill_stripe_elements(card)
  using_wait_time(15) { within_frame('stripeField_card_element0') do
    card.to_s.chars.each do |piece|
      find_field('cardnumber').send_keys(piece)
    end

    find_field('exp-date').send_keys("0122")
    find_field('cvc').send_keys '123'
    find_field('postal').send_keys '19335'
  end }
end

fill_stripe_elements(4242424242424242)

just wanted to add that I had to add js: true and a different selector for the iframe:

it "can add a payment method", js: true do
  fill_stripe_elements(424242424242424)....
end

# and 

def fill_stripe_elements(card)
  using_wait_time(2) { # dropped down to 2 seconds
    within_frame("__privateStripeFrame3") do
    card.to_s.chars.each do |piece|
      find_field('cardnumber').send_keys(piece)
    end

    find_field('exp-date').send_keys("0122")
    find_field('cvc').send_keys '123'
    find_field('postal').send_keys '19335'
  end }
end

The iFrame selector for an elements object is dynamic, so this will cause problems unless one does something like such:

def fill_stripe_elements(card: , expiry: '1234', cvc: '123', postal: '12345')
  using_wait_time(10) { 
    frame = find('#card-element > div > iframe')
    within_frame(frame) do
    card.to_s.chars.each do |piece|
      find_field('cardnumber').send_keys(piece)
    end

    find_field('exp-date').send_keys expiry
    find_field('cvc').send_keys cvc
    find_field('postal').send_keys postal
  end }
end

By selecting the frame with a CSS selector it's a bit more brittle test (you'd have to update the spec anytime the layout changes) but gets around the problem of dynamically assigned iframe name attributes.

Also I just added some extra signature params to make the method more flexible throughout a spec suite (add old expiry, etc).

This is great! thanks for sharing!

Thanks for this, Great help! We've just switched over to using Elements and was a bit puzzled at first how to handle this.

Thanks @kfrz. 👍

Thanks all, this was very helpful to me just now.

Can you help me with the implementation in case of javascript? Also is there a way to fetch contents out of stripe elements?
I am new to both javascript and stripe. @thijsc?

I added another couple helpers to this to handle Stripe SCA in Capybara in case anyone is interested.