Incorrect Stripe Payment Formatting for Credit Card details?

  • Profile Image
    skinnymusicltd
    Asked on March 30, 2016 at 08:32 AM

    Hello

    I am working on form: https://form.jotformeu.com/60885123545357

    On the final page where we will take payment, the formatting of the Stripe payment looks wrong.

    I would like it to look like this:

    [FIRST NAME] [LAST NAME]

    [CARD NUMBER] - [CVV]

    [EXPIRY MONTH] / [EXPIRY YEAR]

    Any ideas?

    Thanks

    Ross

  • Profile Image
    Charlie
    Answered on March 30, 2016 at 10:28 AM

    This seems to be related to the layout of your credit card fields. Please allow me sometime to have a working CSS code, I'll get back to you as soon as I have it working in my end.

  • Profile Image
    Charlie
    Answered on March 30, 2016 at 10:36 AM

    Try using this custom CSS code in your form:

    /* Credit Card Number*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(1) {
        width: 60% !important;
        margin-right: 2% !important;
    }
    .form-textbox.cc_number {
        width: 100% !important;
    }

    /* Security Code*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(2) {
        width: 38% !important;
    }
    .form-textbox.cc_ccv {
        width: 100% !important;
    }

    /*Expiration month*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(1) {
        width: 48% !important;
        margin-right: 2% !important;
    }

    .form-dropdown.cc_exp_month {
        width: 95% !important;
    }


    /*Expiration Year*/
    .form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(2) {
        width: 50% !important;
    }

    .form-dropdown.cc_exp_year {
        width: 100% !important;
    }

     

    Paste it under your CSS tab in the Form Designer Tool. See if that works. You can adjust the width values and try experimenting on it. I added tags or comments on each section of my code so that its easier to understand.You can see how it looks like in this cloned form that I have: https://form.jotform.com/60893772767978

    Let us know if you need more help on this.

  • Profile Image
    skinnymusicltd
    Answered on March 30, 2016 at 10:50 AM

    Works perfectly - thank you so much Charlie!!

  • Profile Image
    Charlie
    Answered on March 30, 2016 at 12:06 PM

    You are very much welcome. If you needed our help again, please do feel free to visit us here in the forum.

    Thank you.