CSS guide for Stripe Payment Intergration/Widget

  • dangang
    Asked on February 28, 2020 at 4:44 PM

    Hello,

    I would like to improve the look of the default Stripe payment widget. Presently it looks like this:

    1582924942CC Strip Default Screenshot 10

    These are the tweaks I need to make:

    1. decrease the width of payment amount and expiration text boxes.

    2. make payment amount right aligned or get rid of text box and just show amount.

    3. Always show two decimals on the amount.

    4. Replace the currency GBP with a £ in front of the amount.

    5. I would display the amount outside the widget, but the "Show Total Price on the Form" setting on the Stripe integration setting seems to have no effect. It always shows the amount.

    Ideally I could make it look more like this:

    1582926102CC details styled Screenshot 21

    Is there a guide on the particular CSS elements that are required to make the changes listed above?

    Many thanks,
    Dan


  • Girish JotForm Support
    Replied on February 29, 2020 at 10:44 PM

    Hello Dan,

    1. decrease the width of payment amount and expiration text boxes.

    Please add this CSS code to reduce width of payment amount textbox:

    input[id*="_donation"] {

    width:70px !important;

    }

    2. make payment amount right aligned or get rid of text box and just show amount.

    Please add this CSS code to remove the text box:

    #input_30_donation.form-textbox{

    border: none!important;

    box-shadow: none !important;

    }

    3. Always show two decimals on the amount.

    Since the amount is passed on from the field "Payment after discount", you can customize this widget to show two decimal places:

    15830339650103 5 Screenshot 10

    I can see that you had already checked this one. This will pass on the values correctly to the payment field.

    You can also check this thread for more details: https://www.jotform.com/answers/1759941

    4. Replace the currency GBP with a £ in front of the amount.

    As far as I can see this is not possible, since the payment field will only accept numbers. As for removing "GBP", there is no other way to do it aside from getting your form's source codes, removing the "GBP" text in the codes, replacing with pound symbol and embedding the codes to your website.