Recently, I was tasked with a form with two specific requirements: (1) the form needed to gather payment information to send over to Stripe and (2) the form needed to write non-payment information to our backend system so that the data could be persisted.
During my research, I learned of a neat feature in HTML that allowed me to accomplish my goal without using JS and hidden fields (or other such nonsense). Omitting the ‘name’ attribute from the ‘input’ tags on specific form fields will prevent the information from saving when the form is submitted. By using this method for all payment-related fields, I was able to ensure sensitive data was not saved to the server.
In the case of my Stripe scenario, I ended up with this:
<!-- This input gets submitted -->
<input id="payment_method_nickname" required="required" class="form-control" type="text" name="payment_method[nickname]">
<!-- This input does not -->
<input id="payment_method_name" required="required" data-stripe="name" class="form-control" type="text">
Stripe.js grabs any form field inputs that have the ‘data-stripe’ attribute and sends them to Stripe. Once I get my response back from Stripe, I can append information to the form and do a simple `` to send the inputs with the ‘name’.
This same strategy can be used for other scenarios by simply using data attributes to gather one set of fields.
I’d love to hear if others are using a similar method to keep payment information secure. Comment below with your ideas or questions!