PayPal: Is it possible to cutomize the payment field?

  • Profile Image
    AgilityAssoc.Canada
    Asked on September 14, 2017 at 02:11 PM

    Hello,

    Further to PayPal,I think this widget has restrictions on what can be done but is there anyway to widen the input field, change text color?

    Thank you, Robert

  • Profile Image
    Kevin_G
    Answered on September 14, 2017 at 02:14 PM

    It's possible to customize the payment field with some CSS code, you could use this one and just add the desired rules (text size, color, field's size):

    [data-type="control_paypal"] input[name*="myProducts"]{

       /* CSS rules go here*/  

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    Kevin_G
    Answered on September 15, 2017 at 11:18 AM

    Your code is correct based on my tests, the only difference is that the "PayPal" word needs to be in lowercase.

    [data-type="control_paypal"] input[name*="paypal"]

    {

       text-align : center !IMPORTANT;    

    color : #349955 !IMPORTANT;    

    font-weight : bold !IMPORTANT;

        width:90px !IMPORTANT;

    }

    Injecting this code should format your field: 

    I hope this helps.

  • Profile Image
    AgilityAssoc.Canada
    Answered on September 15, 2017 at 01:48 PM

    Hi,

    OK that works now, Thank You.

    What about adding a $ sign to the value, is that possible? Or adding it to the lead edge of the input field using ::before pseudo in the css. 

    Regards, Robert

  • Profile Image
    Kevin_G
    Answered on September 15, 2017 at 02:59 PM

    Yes, it's possible to add the dollar sign or any other symbol by injecting this code: 

    [data-type="control_paypal"] .form-sub-label-container:before{

        content: "$";

        position: absolute;

        margin-left: 22px;

        margin-top: 6px;

        color : #349955 !IMPORTANT;    

        font-weight : bold !IMPORTANT;

    }

    If you need a different currency sign to appear instead, please simply replace the current one in the "content" property. 

    I hope this helps. 

  • Profile Image
    AgilityAssoc.Canada
    Answered on September 15, 2017 at 03:42 PM

    Hi, Works great, I had to adjust the margins slightly.

    Many Thanks, All's Good :) 

    Regards, Robert