Stripe Integration: the Single Column layout is messed up

  • Profile Image
    Kramer_Malte
    Asked on October 21, 2020 at 12:45 PM

    I added a Stripe section to my form. At first it looked nice with the product section separated and with check boxes for each. However, now it appears broken as shown below. I've tried to delete it and re-added. I've tried to clone the form without the section and then add it. But nothing seems to fix it. Please let me know what I should do.

    Screenshot
  • Profile Image
    Cecile_A
    Answered on October 21, 2020 at 06:02 PM

    Hello Kramer_Malte,

    You can change your Product List Layout to Three Columns.

    To do this, follow the steps below:

    1. Go to Payment Settings
    2. Make sure you are under Products tab
    3. Click Settings 1603317599_5f90af5fc1e55_13.png
    4. Change Product List Layout to Three Columns1603317546_5f90af2a5e0c3_12.png


    Result:1603317535_5f90af1fc3924_11.png

    I hope this helps. Let us know if you need further assistance.

  • Profile Image
    Kramer_Malte
    Answered on October 21, 2020 at 06:29 PM

    Hi Cecile,

    When I first used this section it had a checkbox next to each product and added up the total automatically below. Neither of those functions work and in your screenshot it doesn't show the checkboxes or the total either.

    Is there another solution that brings back the original form with its full functionality?

    Best,

    Malte



  • Profile Image
    gerardw
    Answered on October 21, 2020 at 11:44 PM

    Could you let us know if you are referring to this form: https://form.jotform.com/202874439503155

    If yes, the payment field is disconnected. Please connect to Stripe and check:

    1603338015_5f90ff1f91367_2210_2.png

    Since you do not have any submissions for this form, I would additionally request you to remove/delete this payment field and add a new Stripe payment field and check.

  • Profile Image
    Kramer_Malte
    Answered on October 22, 2020 at 11:31 AM

    Hey! I deleted the Stripe section and re-added it and connected it but the problem remains. This is the form: https://form.jotform.com/202874439503155.

  • Profile Image
    BDAVID
    Answered on October 22, 2020 at 06:09 PM

    Good day, the Single Column layout of the Stripe payment field is corrupted. I cloned your form, clear my forms cache, removed and added the Stripe field in my clone version, but the issue persists, but it only happens on this form.

    I'll need to report this issue to our back-end team.

    Meanwhile, please inject this code in your form as a temporary solution: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    .stripe-payment-wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    .form-line[data-payment="true"] .form-product-item .p_checkbox {
      position: relative;
      width: 20px;
      height: 20px;
      border-radius: 2px;
      margin-top: 2px;
      margin-bottom: 0px;
      box-sizing: border-box;
    }
    .stripe-payment-wrapper [data-wrapper-react=true] {
      display: flex;
      flex-wrap: wrap;
    }
    .form-line[data-payment="true"] .form-checkbox, .form-line[data-payment="true"] .form-radio {
      clip: auto !important;
    }
    .p_checkbox > .form-checkbox, .form-radio {
      position: absolute;
      opacity: 1;
      height: 18px;
      width: 20px;
      overflow: hidden;
      clip: auto;
    }
    .form-line[data-payment="true"] .form-product-item .form-product-container {
      padding-left: 16px;
    }

    See the result in my clone version: https://form.jotform.com/202956590183966?jumpToPage=12

    1603404417_5f9202810f9e4_products.png

    Let us know if you need more help.