How can I remove the GBP text on the Square payment field

  • Profile Image
    movz
    Asked on January 19, 2018 at 03:46 PM

    It already has the £ sign so the currency is repeated twice, it looks daft.

    Can GBP be removed? 

  • Profile Image
    Marvih
    Answered on January 19, 2018 at 05:26 PM

    I can't seem to remove it using CSS. I will need to do further test.

  • Profile Image
    movz
    Answered on January 19, 2018 at 05:31 PM

    Any effort is greatly appreciated. Thanks Marvih

  • Profile Image
    Jim_R
    Answered on January 19, 2018 at 07:54 PM

    Hey @movz - The GBP part is not an HTML element, it's just a text node so it can't be styled and manipulated with CSS. So, here's the workaround I came up with:

    https://www.jotform.com/80187140343955

    I placed the actual prices on the PRODUCT NAME and hid the product details (all of it) using CSS. So, instead of just hiding the GBP part, I hid the entire price + GBP (e.g. £98 GBP).

    After placing the prices on the PRODUCT NAME, inject these CSS codes to your form to hide the rest:

    .form-product-details {

        display: none;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Result:

  • Profile Image
    movz
    Answered on January 19, 2018 at 08:23 PM

    Thanks Jim awesome work!!!

  • Profile Image
    movz
    Answered on January 22, 2018 at 07:52 AM

    Just one more thing. The total still have the GBP displayed can it also be removed with css and how to add that? I'm a newbie css.


    .form-payment-price  {

        display: none;

    }

    Just removes the whole price...

  • Profile Image
    Richie_P
    Answered on January 22, 2018 at 11:42 AM

    Unfortunately the only way to remove the total with GBP is getting your form's source code, removing the "GBP" text in the code and embedding the code to your website.

    You can check the thread by my colleague here. https://www.jotform.com/answers/150327-change-color-of-price-remove-USD

    I have tried covering the text with css codes but it will only overlap when the purchase is higher.

    .form-product-details:after,
    .form-payment-price:after {
       content : "";
       position :absolute ;
       width : 50px;
       height : 20px;
       margin-top: -15px;
       margin-left : 33px;
       background-color : white;
    }

    See screen cast.

    Hope you find this information useful.

    Please let us know if you have further questions.


  • Profile Image
    movz
    Answered on January 22, 2018 at 03:14 PM

    Thanks for trying, really appreciate this.

    I take this is not under Jotform's control then, if it is this should be an easy changeable non-source code option, unless of course it's Squareup?

     

  • Profile Image
    Marvih
    Answered on January 22, 2018 at 03:27 PM

    The integration seems to be done that way. But since it is handled by a Script code, then the only way to modify it is by modifying the script itself on the source code.

    You can apply some CSS tricks to cover it like what my colleague Ritchie P did.