Help customizing stripe checkout form

[ocastaned]

I just activated Stripe gateway in WHMCS, but the form during the checkup process looks ugly, as you can see on this screenshot: 

 

is there anyway to make it look better? I have other payment gateways that shows something like this below. It looks better. 

 

Also, if possible, I would like to change "YY" to "AA" because my site is in spanish language. Stripe is the only one showing it that way.

 

Thank you.

[brian!]

1 hour ago, ocastaned said:

is there anyway to make it look better?

can you think of a shorter Spanish phrase for "Expiry Date" than "Fecha de expiración" ?? if so, use a Language Overrides to replace the language string.

it looks like this is occurring because the label string is too long in Spanish... possibly it was only tested in English (Expiry Date" and this issue went unnoticed.

$_LANG['creditcardcardexpires'] = "Fecha de expiración";

the other option might be to play with the div widths, but if you can think of a shorter phrase, I suspect that would b e the easier solution.

1 hour ago, ocastaned said:

Also, if possible, I would like to change "YY" to "AA" because my site is in spanish language. Stripe is the only one showing it that way.

the MM / YY appears to be hardcoded in the template - so to change that would require a template edit, or perhaps a jQuery hook.

[ocastaned]

Thank you I just changed "Fecha de expiración" to ""Expiración" and it worked fine. Now I need help changing "YY" to "AA". I am not sure where to find the file I need to edit.

[brian!]

21 hours ago, ocastaned said:

Now I need help changing "YY" to "AA". I am not sure where to find the file I need to edit.

it's hardcoded in checkout.tpl - so editing it would be one option...

<input type="tel" name="ccexpirydate" id="inputCardExpiry" class="field" placeholder="MM / YY{if $showccissuestart} ({$LANG.creditcardcardexpires}){/if}" autocomplete="cc-exp">

if it's going to be MM / AA for everyone, then that's a simple edit and you can just replace YY with AA - but I assume Spanish customers should see MM / AA and everyone else MM / YY ??

<input type="tel" name="ccexpirydate" id="inputCardExpiry" class="field" placeholder="MM / {if $language eq "spanish"}AA{else}YY{/if}{if $showccissuestart} ({$LANG.creditcardcardexpires}){/if}" autocomplete="cc-exp">

what WHMCS should really have done was create a language string for MM / YY and then this solution wouldn't be necessary - let's see if they fix this in v7.9 🙄

you could do this with a hook if you really had to, but I assume that you've previously edited this template anyway.

[WHMCS ChrisD]

Hi @ocastaned

Thanks for your post, with Stripe we've migrated over to Stripe Elements this means that the fields used in the form are presented and processed by stripe rather than by WHMCS.