You can use a Credit Card field in your forms to collect payments from users. We don't recommend collecting credit card information without an add-on to handle it securely. As a result, you won't normally see the credit card field listed with your other fields. The Credit Card field will only appear if you have the Stripe or Authorize.net AIM add-on active.
Security best-practices
Whenever you are collecting sensitive information, you should use SSL on your site. Depending on your web host, you may be able to get free and easy SSL through Let's Encrypt. Please contact your web host for information on how to set up SSL on your site.
Standard field options
Field-specific options
Credit Card Security
When allowing a user to enter their credit card information, you have four different options for storing the credit card information. When collecting credit card information, the CVC code (3-digit code on the back of VISA and MasterCard, and 4-digit code on the front of AMEX) will never be stored.
- Save only the last 4 digits - This will only save the last four digits of the card number, and the card's expiration date.
- Do not store the card number - This will only store the card's expiration date.
- Store the whole card number (not recommended) - This will store the whole card number, and the card's expiration date. Storing credit card numbers on your own site is not recommended, and comes with extra liability.
- Do not store or POST card values - This will only store the card's expiration. In addition to not storing the card's number or CVC, this option will also prevent those values from being sent to your server. This is the most secure option, but is not supported by every payment processor. This option is recommended when using Stripe, but it not supported with Authorize.net.
Insert placeholders
If you would like to add a placeholder text to the credit card field inputs, follow the steps below.
- Go to your form Build page.
- Select the credit card field where you would like to insert a placeholder. In the field options, go to the Advanced section and insert your desired placeholder text in the credit card fields.
- Save the form and click Preview. Now when the user opens the form, the credit card fields will show the placeholder text. When they start typing in the credit card fields, the placeholder text will be cleared.
Displaying credit card information
Based on how you choose to handle the security of your credit card field, you can display your data differently. Here are examples for how your credit card information can be displayed.
- Save only the last 4 digits
xxxxxxxxxxxx1111 01/2017
- Do not store the card number.
01/2017
- Store the whole card number (not recommended)
4111111111111111 01/2017
- Do not store or POST card values
01/2017
Using the Credit Card field
Collecting Payment
If you would like to find out more about collecting payment, click on the add-on you are using to find out more about creating a form action to collect payment.
Enable Google Autofill
If you would like to enable Google Autofill to the credit card field in your form, add the autocomplete="cc-number" attribute to the credit card number input field.
- Go to your form Settings → Customize HTML.
- Look for the Credit Card box and replace [input] with [input autocomplete="cc-number"]
Note: This will also enable the autocomplete options for CVC fields.
Related developer hooks
- Change the labels in a Credit Card field with the frm_combo_dropdown_label hook.
-
If you have another way of processing payments, you can enable the credit card field by adding this line to your code:
add_filter( 'frm_include_credit_card', '__return_true' );