Payment Widget on Mobile

  • Profile Image
    EmerysMemoryFoundation
    Asked on April 05, 2019 at 11:55 AM

    Hello,

    I've got a Wix website and I'm embedding my payment-enabled JotForm to accept donations via Stripe.


    Everything looks great except I'm having trouble getting the fields in the payment portion of the form to stay within the mobile pixel parameters. 


    Screenshot from my phone: https://www.screencast.com/t/7WuN4SCi


    All of the other fields however are fitting perfectly. I've tried the mobile widget and it doesn't help. In fact, it worsens the issue.

    Is there any way to customize the payment portion of the JotForm to have smaller dimensions, or to stack the payment input fields instead of having them side by side? 



    Thanks!


    Mel

  • Profile Image
    Kevin_G
    Answered on April 05, 2019 at 02:10 PM

    You may try injecting the following CSS code to your form and see if that helps: 

    .payment-form-table tr:nth-child(2) td:nth-child(2) span{

        width: 280%;

    }


    .payment-form-table tr:nth-child(3) td:nth-child(2) span{

        width: 268%;

    }


    .payment-form-table tr:nth-child(4) td:nth-child(2) span{

        width: 268%;

    }



    iframe#square_cc_ccv {

        width: 100%;

    }



    iframe#square_cc_postal{

        width: 100%; 

    }


    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps.