Stripe - change placholders of iframe inputs

Question

I'm working on embedded form, I'm using stripe for online payments, and using their API to call this form.

I want to change placeholder of inputs because in Ireland they're straight different then in US.

We've got:

<div class="line_1">
      <input name="line_1" id="line_1" type="text" placeholder="City" autocompletetype="address-line1" required="">
    </div>

That's part of the iframe code.

I'm calling form on click action:

StripeCheckout.open({
            key:         '50m3s3cr3tk3y',
            amount:      0000,
            currency:    'eur',
            address: true,
            image: '/someimage.png',
            name:        'Product name',
            description: 'Marketing speech',
            panelLabel:  'Call to Action',
            token:       token
          });
jQuery("#line_1").attr("placeholder", "Town/City");

This doesn't seem to work for me, looks like it doesn't even recognize field such as "line_1"

What's the best way to achieve it? As Stripe API doesn't provide it, on other hand there is an option to create own form.

Thanks, Adam

score 2 · Accepted Answer · answered Oct 14 '13 at 14:14

2

http://jsfiddle.net/cdDrB/

I think jquery code to placeholder works fine :

jQuery("#line_1").attr("placeholder", "Town/City");

So : Maybe is there an error with your StripeCheckout function, or, you should change placeholder before call this function... (I hope it's helpfull )

answered Oct 14 '13 at 14:14

BENARD Patrick

30,363
16
99
105

thanks for your answer!! Yep, code seems to work fine, my console log while embedded form is displayed: jQuery("#line_1").attr("placeholder", "Town/City"); [] It looks like it doesn't find object as #line_1, it's in iframe, maybe that's causing problem. – Adam Lesniak Oct 15 '13 at 13:49
1

Oh oki, i see, maybe this ? : http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe – BENARD Patrick Oct 15 '13 at 13:52
thanks!! that's the answer, but it's not working for me as Stripe is on different domain due to security browser reasons. – Adam Lesniak Oct 15 '13 at 14:11

score 1 · Answer 2 · answered Jun 08 '17 at 22:13

You wouldn't be able to modify the content of iframes of Stripe Element due to Same Origin Policy.

However, there is an undocumented placeholder option in Stripe API which can solve your problem. Take a look at this example:

var elements = stripe.elements();
var cardNumber = elements.create('cardNumber', {placeholder: '****-****-****'});
var cardExpiry = elements.create('cardExpiry');
var cardCvc = elements.create('cardCvc');

// you can also update the placeholder after the initialization
cardNumber.update({placeholder: 'bla bla bla'});

cardNumber.mount($form.find('#card_number')[0]);
cardExpiry.mount($form.find('#card_expiry')[0]);
cardCvc.mount($form.find('#card_cvc')[0]);


stripe.createToken(cardNumber).then(function(result){
    var token = result.error ? null : result.token;
    // do something with the stripe token
});

Stripe - change placholders of iframe inputs

2 Answers2