PayPal: Is it possible to cutomize the payment field?

  • AgilityAssoc.Canada
    Asked on September 14, 2017 at 2: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

  • Kevin Support Team Lead
    Replied on September 14, 2017 at 2: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. 

  • AgilityAssoc.Canada
    Replied on September 15, 2017 at 9:04 AM

    Hi,

    So I added this,to 72566645808973 & 63423134202946, note the name I use not myProducts.

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

    {

       text-align : center !IMPORTANT;    

    color : #349955 !IMPORTANT;    

    font-weight : bold !IMPORTANT;

        width:90px !IMPORTANT;

    }

    and nothing changed ? So I guess I need some help.

    OH, and can a $ sign be added?

    Thank you, Robert

  • Kevin Support Team Lead
    Replied 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: 

    PayPal: Is it possible to cutomize the payment field?  Image 1 Screenshot 20

    I hope this helps.

  • AgilityAssoc.Canada
    Replied on September 15, 2017 at 1: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

  • Kevin Support Team Lead
    Replied on September 15, 2017 at 2: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;

    }

    PayPal: Is it possible to cutomize the payment field?  Image 1 Screenshot 20

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

    I hope this helps. 

  • AgilityAssoc.Canada
    Replied on September 15, 2017 at 3:42 PM

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

    Many Thanks, All's Good :) 

    Regards, Robert