In the previous example we built a basic form that collected account information and allowed customers to sign up for free membership levels. In this example we'll extend that by adding form fields related to billing information such as billing address and credit card information. Collecting billing information is required when you have payment methods configured on your site that allow you to process credit cards (i.e. Authorize.net, Stripe, etc). When checking out using an offsite payment method like PayPal, these fields will be captured and stored if they are filled out, but are not required.
- The first thing we'll do is create a form section where we can put Form SmartTags related to billing information. Creating this form section is not required but is recommended. Doing this allows MemberMouse to only show billing information when necessary. Using this example as a starting point you'll add the following below the account information section:
<!-- all billing information Form SmartTags and design elements go here -->
Now, we'll add some form fields inside the
MM_Form_Sectionblock so that the user can fill out billing information such as billing address and credit card information. Here's what you'll add in order to collect billing information:
Address: [MM_Form_Field name="billingAddress"]
City: [MM_Form_Field name="billingCity"]
State: [MM_Form_Field name="billingState"]
Zip Code: [MM_Form_Field name="billingZipCode"]
Country: [MM_Form_Field name="billingCountry"]
Credit Card Number: [MM_Form_Field name="ccNumber"]
Exp. Date: [MM_Form_Field name="ccExpirationDate"]
Security Code: [MM_Form_Field name="ccSecurityCode"]
Notice that we can place any content around the
MM_Form_Fieldtags. In this case we've added a section header and field labels.
Collect Billing Information Form Example
Below is an example of what this form will add when the product being purchased is a paid product. Note: MemberMouse will ensure that this section is only available when the user is purchasing a paid product and will be hidden when signing up for a free membership.
Note: The form will look different depending on the theme you've chosen.
Checkout Page Examples Overview