Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fill in a Stripe Elements (https://stripe.com/docs/elements) credit card field using capybara
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)
@markgandolfo
Copy link

markgandolfo commented Dec 4, 2017

Thank you for sharing this.

@jshawl
Copy link

jshawl commented Jan 24, 2018

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

@kfrz
Copy link

kfrz commented Apr 12, 2018

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).

@ashkan18
Copy link

ashkan18 commented May 2, 2018

This is great! thanks for sharing!

@lukewduncan
Copy link

lukewduncan commented Dec 5, 2018

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

@mattSpell
Copy link

mattSpell commented May 23, 2019

Thanks @kfrz. 👍

@thijsc
Copy link

thijsc commented Sep 10, 2019

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

@rajat2797
Copy link

rajat2797 commented Sep 27, 2019

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?

@excid3
Copy link

excid3 commented Oct 24, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment