Customizing Stripe tool through the source code

  • kauseway
    تم السؤال بتاريخ ١٦ يناير ٢٠١٥ في ١:٢٨ م

    If I use the source code instead of script or I-frame can I customize the look of the stripe widget. For example it asks for the first name and last name, but we already ask that higher up in the form. I assume that stripe widget needs the name but can we just hide those fields?  Also the look of the expiration date has always looked bad.  Just want to know what if anything we can customize as far as the look if we use just source code.

     

    https://secure.jotformpro.com/form/50005155818954

  • Ben
    تم الرد بتاريخ ١٦ يناير ٢٠١٥ في ٢:٤٣ م

    Hi,

    I believe that if you remove those fields you would either not be able to submit to Stripe, or you would have the captcha shown on each submission.

    Unfortunately I think that you can only have these fields removed if you add the Full Name tool instead of the text box tool that you already have, but would need to check and follow up on that.

    Can you please tell us in the mean time what you do not like about the expiration fields so that we might be able to find a solution for that.

    Best Regards,
    Ben

  • kauseway
    تم الرد بتاريخ ١٦ يناير ٢٠١٥ في ٢:٥٢ م

    Thanks!
    I understand that this widget needs the name fields. From a previous support question I was told I could use a script to duplicate fields. So If I ask for someones name in the first form, I can populate the stripe widget name fields as they are required. Correct?

    If so, I dont want to remove those fields but hide them. So the user doesnt have to enter their name again!  Can they just be hide?

    And how much styling can we do in source code to the field.Customizing Stripe tool through the source code Image 1 Screenshot 20

     

    Thanks and let me know.

  • kauseway
    تم الرد بتاريخ ١٦ يناير ٢٠١٥ في ٢:٥٤ م

    I posted a sample of another form. Very clean and clear. Here is mine. Not bad but there is a random dash to the right of the cc field. The month and year only need to take up so much width but they stretch across the entire row. Again there is a dash but it doesnt look right the way the form is displaying.  And I dont need the name. I dont mind having another field pass the name to the stripe widget and then just hide it. Need to know if that can be done?Customizing Stripe tool through the source code Image 1 Screenshot 20

  • Ben
    تم الرد بتاريخ ١٦ يناير ٢٠١٥ في ٣:٤٨ م

    Hi,

    OK. You can make a change to hide the name field through the source code. To do that just add

    type="hidden"

    in the HTML code for the input.

    It would then look like this:

    <input type="text" id="input_14_cc_firstName" size="20" name="q14_myProducts14[cc_firstName]" class="form-textbox validate[required] cc_firstName" type="hidden">

    The month and year only need to take up so much width but they stretch across the entire row. Again there is a dash but it doesnt look right the way the form is displaying.

    The reason for this is that the jotform is as wide as the mobile screen would be, activating the mobile responsive option. The same is for credit card field.

    The credit card field should look like this [credit card number] - [security code], but as it is taking the entire width it will no longer look like that, showing the dash on the right.

    Now this code will restore the fields as they should be:

    #cid_14 .form-address-table .form-sub-label-container {
        color: transparent;
    }
    #cid_14 .form-address-table tr:last-child .form-sub-label-container {
        margin: 2%;
        width: 46%;
    }

    You can see here how to inject this CSS code to your jotform: Inject Custom CSS Codes.

    Do let us know if that helps.

    Also, I would suggest making all the tweeks that you need and can inside of the jotform builder so that you can then only do the parts that you can not do in the builder itself through the source code.

    Also, passing the first name and last name should be possible and should work. You can do that through a bit of javascript.

    Best Regards,
    Ben

  • kauseway
    تم الرد بتاريخ ٢٣ يناير ٢٠١٥ في ١٠:٥٨ ص

    So just to follow up. I want to build my own Credit card fields. Can I just create my own fields and hide the jotform creditcard section. All information would be copied to jotform creditcard field. Will that work?

  • Ben
    تم الرد بتاريخ ٢٣ يناير ٢٠١٥ في ١٢:٠٥ م

    That depends on the fields. You could do that with name section, but not with the credit card number and security codes as that would be against our terms of use, unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

  • kauseway
    تم الرد بتاريخ ٢٤ يناير ٢٠١٥ في ٩:٢٥ ص

    Can you clarify this point:

     

    unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

     

    I do want to use the source code. I am trying to get full control of the form to make it look exactly like I need it to.  So is there a way to have my own card number, expiration and security code field.  It copies into the jotform widget but those custom fields dont get sent to the database? Is that how it would work?

  • jonathan
    تم الرد بتاريخ ٢٤ يناير ٢٠١٥ في ٥:٠٩ م

    unless you make them in the source code and they are not sent to our database or have equivalent fields in our database for that info.

    Our colleague Ben meant that you can do this and might work for you.

    BUT I would also like to emphasize that when using the source code on your own website and capturing data to your own database, will still be detected as a type of phishing, if you will be capturing sensitive or confidential information like CC account names, numbers, and or security code. You can should check the Jotform Terms of Use also.

    Let me also tell you that the form's source code are all plain text and never encrypted.

    So its very open for any user with enough knowledge to read programming code, and check the source code of your form. And then be able to compromise whatever sensitive/confidential data the application is getting.

    If you will instead use the Stripe integration tool, not only it will be secured on jotform side, but the data will be secured and encrypted also as the transactions will all be processed by the payment process Stripe.

    Hope this help. Let us know if you have further inquiry.

    Thanks.

     

     

  • kauseway
    تم الرد بتاريخ ٢٤ يناير ٢٠١٥ في ٨:٣٨ م

    Ok. Let me try again since i am not able to get a yes or no here.

    I am not trying to use my own database. I am trying to control the look of the form. I was told I can make the form look anyway I want if using source code?  YES or NO?

     

    Can I make the stripe widget look anyway I want using source code? YES or NO?

     

     

  • Ben
    تم الرد بتاريخ ٢٥ يناير ٢٠١٥ في ٢:٥٢ ص

    I am not trying to use my own database. I am trying to control the look of the form. I was told I can make the form look anyway I want if using source code?  YES or NO?

    Yes, you can make it look any way you want using source code.

    Can I make the stripe widget look anyway I want using source code? YES or NO?

    Yes, that is correct.

    So is there a way to have my own card number, expiration and security code field.  It copies into the jotform widget but those custom fields dont get sent to the database? Is that how it would work?

    Yes, that is correct as well.

    How to do that:

    1. The extra fields in your source code, should not be present in the jotform as well (in your Jotform Builder), or the data in them would be sent to our data centers and as such would be breaking the terms of use.

    2. the data in the jotform fields, must be filled out by the required values (credit card details, security code, etc)

    * You can make entire Stripe integration hidden if that is what you want, as long as it gets filled out and the fields with the sensitive data is not sent to us, everything should be working properly

    * In regards to security, it is true what my colleague Jonathan had mentioned, and I would suggest using HTTPS on your website to make the transactions safer.

    I hope that this helps answer all of your questions, however if you are still not 100% sure about something do let us know.