Checkout Page Examples

In this article we'll cover a number of examples of using [MM_Form] SmartTags to create checkout forms. Each example is built up step-by-step and you can download the full example so you can use it as a starting point on your own checkout pages. For the most part, the later examples build on top of things covered in the earlier examples so for a comprehensive understanding it's a good idea to go through them sequentially. Also, for the sake of simplicity we'll just be focusing on using the SmartTags so design-related topics will not be covered here.

These examples demonstrate specific use cases for each of the Form SmartTags you can view the Form SmartTag documentation for more information.

Here's a list of the examples we'll cover:

Free Member Checkout Form

Download Example more examples ↑

In this example, we'll cover the basics of using Form SmartTags and create a simple form to sign up new members for a free membership.

  1. The first thing we need to do is add a MM_Form block with the type attribute set to checkout. The MM_Form tag is required to use any other Form SmartTags. It will contain all of our Form SmartTags and our design and layout elements. Start by adding the following text to your page:

    [MM_Form type="checkout"]
    <!-- all Form SmartTags and design elements go here -->
    [/MM_Form]
    
  2. Next, we'll add a form element that will display any errors that occur when the form has been submitted. We'll do this by adding the MM_Form_Message tag and set the type attribute to error.

    [MM_Form_Message type="error"]
    

    Now, when the form is submitted any errors that happen when processing the payment or creating an account will be displayed where the MM_Form_Message is.

  3. Next, we'll create a form section where we can put Form SmartTags related to account information. Creating form sections is not required but is recommended. The benefit of using a form section is that it allows MemberMouse to intelligently show or hide a section based on what is being purchased and who is purchasing it. With regards to account information, when you use a form section, MemberMouse will automatically hide this content when an existing member is checking out because they don't need to fill out this information again.

    Creating a form section is easy, just use the MM_Form_Section tag and set the type attribute to the appropriate section type. In this case, that's accountInfo:

    [MM_Form_Section type="accountInfo"]
    <!-- all account infomration Form SmartTags and design elements go here -->
    [/MM_Form_Section]
    

    IMPORTANT NOTE When MemberMouse processes the MM_Form_Section tag it creates <div> tags and places the content inside the MM_Form_Section tag within the <div> tags. For example, this...

    [MM_Form_Section type="accountInfo"]
    This is my content.
    [/MM_Form_Section]
    

    ...becomes this...

    <div id="mm-account-information-section">
    This is my content.
    </div>
    

    This is important to note because you'll want to make sure that the content you place within the MM_Form_Section tag doesn't conflict with the surrounding <div> tags. For example, these are valid...

    [MM_Form_Section type="accountInfo"]
    <div class="someStyle">
    This is my content.
    </div>
    [/MM_Form_Section]
    
    <div class="someStyle">
    [MM_Form_Section type="accountInfo"]
    This is my content.
    [/MM_Form_Section]
    </div>
    

    These are not valid...

    <div class="someStyle">
    [MM_Form_Section type="accountInfo"]
    This is my content.
    </div>
    [/MM_Form_Section]
    
    [MM_Form_Section type="accountInfo"]
    <div class="someStyle">
    This is my content.
    [/MM_Form_Section]
    </div>
    
  4. Now, we'll add some form fields inside the MM_Form_Section block so that the user can fill out information related to their account such as name, email, phone number and password. Adding form fields is really easy using Form SmartTags. You simply use the MM_Form_Field tag and set the name attribute to indicate which data the field is collecting. For example, to collect a customer's first name you'll set the name attribute to firstName. Here's what you'll add in order to collect account information:

    Account Information
    First Name: [MM_Form_Field type="input" name="firstName"]
    Last Name: [MM_Form_Field type="input" name="lastName"]
    Email: [MM_Form_Field type="input" name="email"]
    Password: [MM_Form_Field type="input" name="password"]
    Phone: [MM_Form_Field type="input" name="phone"]
    

    Notice that we can place any content around the MM_Form_Field tags. In this case we've added a section header and field labels.

  5. Finally, we need to add a buttons so the customer can submit the form. To do this, just add the following:

    [MM_Form_Button type='all' label='Submit Order' color='orange']
    

    This tag will automatically show the appropriate form submission buttons based on what payment methods are configured for your site. For example, if you just have PayPal configured, it will display a PayPal button. If you just have Authorize.net configured, it will display a Submit Order button. If you have both configured, it will display both buttons.

Collect Billing Information

Download Example more examples ↑

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 method configured on your site that allows 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 be required.

  1. 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:
    [MM_Form_Section type="billingInfo"]
    <!-- all billing infomration Form SmartTags and design elements go here -->
    [/MM_Form_Section]
    
  2. Now, we'll add some form fields inside the MM_Form_Section block 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:

    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_Field tags. In this case we've added a section header and field labels.

Collect Shipping Information

Download Example more examples ↑

In the previous example we built a checkout form that collected account and billing information and allowed customers to pay using their credit card or an offsite payment method like PayPal. In this example we'll extend that by adding form fields related to shipping information such as shipping address and shipping method. Collecting shipping information is never required by MemberMouse. If the shipping address fields aren't present then MemberMouse will just assume that the shipping address is the same as the billing address. This allows you to ignore shipping information altogether when what your selling is delivered digitally.

  1. The first thing we'll do is create two form sections where we can put Form SmartTags related to shipping information. Creating these form sections is not required but is recommended. Doing this allows MemberMouse to only show shipping information when necessary. Using this example as a starting point you'll add the following below the billing information section:

    [MM_Form_Section type="shippingInfo"]
    <!-- shipping method and billing same as shipping address checkbox go here -->
    
    [MM_Form_Subsection type="shippingAddress"]
    <!-- all shipping address Form SmartTags and design elements go here -->
    [/MM_Form_Subsection]
    [/MM_Form_Section]
    

    The reason we use two sections for shipping information is because there are two scenarios where MemberMouse can help by showing or hiding sections. Both the shippingInfo and shippingAddress sections are only shown if the product being purchased requires shipping (as defined by the product configuration in MemberMouse). On top of that, the shippingAddress section is only shown if the customer has indicated that their shipping address is different from their billing address. This keeps them from having to enter the same address twice.

  2. Next, we'll add some form fields inside the shippingInfo MM_Form_Section block so that the user can specify which shipping method they want to use and indicate whether or not their billing and shipping addresses are the same. Here's what you'll add:

    Shipping Information
    Shipping Method: [MM_Form_Field name="shippingMethod"]
    
    [MM_Form_Field name="shippingSameAsBilling"]
    Shipping is the same as billing
    
  3. Next, we'll add form fields inside the shippingAddress MM_Form_Subsection block so that the user can enter in their shipping address. Here's what you'll add:

    Address: [MM_Form_Field name="shippingAddress"]
    City: [MM_Form_Field name="shippingCity"]
    State: [MM_Form_Field name="shippingState"]
    Zip Code: [MM_Form_Field name="shippingZipCode"]
    Country: [MM_Form_Field name="shippingCountry"]
    

    Now the customer can provide their shipping information and MemberMouse will ensure that the sections associated with shipping only show up when a customer is purchasing a shippable product.

Display Order Information

Download Example more examples ↑

In the previous example we built a checkout form that collected account, billing and shipping information and allowed customers to pay using their credit card or an offsite payment method like PayPal. In this example we'll extend that by adding form elements that display information about the order on screen such as the name, price and description of the product being purchased, shipping price, discount amount and total price of the order.

To display data on the screen we'll use the MM_Form_Data SmartTag and set the name attribute to indicate which data the field is displaying. For example, to display the product price on screen you'll set the name attribute to productPrice. Using this example as a starting point, you'll add the following after the MM_Form_Message tag to display order information on the screen:

Product Name: [MM_Form_Data name="productName"]
Product Description: [MM_Form_Data name="productDescription"]
Product Price: [MM_Form_Data name="productPrice"]
Shipping Price: [MM_Form_Data name="shippingPrice"]
Discount: [MM_Form_Data name="discount"]
Total Price: [MM_Form_Data name="totalPrice"]

Now order information will be displayed on screen. Everything related to the product will come from the product configuration in MemberMouse. The shipping price will dynamically change based on what shipping method is selected. The discount amount will dynamically change based on what coupon is applied to the order. The total price is dynamically calculated based on the current values of product price, shipping price and discount amount.

Adding Coupon Support

Download Example more examples ↑

In the previous example we built a checkout form that collected account, billing and shipping information, displayed order information and allowed customers to pay using their credit card or an offsite payment method like PayPal. In this example we'll extend that by adding form elements that allow the customer to apply a coupon to their order.

  1. The first thing we'll do is create a form section where we can put Form SmartTags related to coupons. Creating this form section is not required but is recommended. Doing this allows MemberMouse to only show the coupon section when coupons are active and available on your MemberMouse site. Using this example as a starting point you'll add the following below the shipping information section:

    [MM_Form_Section type="coupon"]
    <!-- all coupon Form SmartTags and design elements go here -->
    [/MM_Form_Section]
    
  2. Next, we'll add a form field and a button inside the coupon MM_Form_Section block so that the user can enter in a coupon code and apply in it to the order. Here's what you'll add:

    Coupon Code: [MM_Form_Field name="couponCode"]
    <a href="[MM_Form_Button type='applyCoupon']">Apply Coupon</a>
    

    Now the customer can enter in a coupon code in the couponCode form field and click the Apply Coupon button to apply it to the order.

  3. Next, we'll add a couple of form messages so that the user can be provided with feedback after applying a coupon. Here's what you'll add:

    [MM_Form_Message type="couponSuccess"]
    [MM_Form_Message type="couponError"]
    

    Now when the customer clicks the Apply Coupon button, MemberMouse will display a success or error message based on if the coupon code they entered was valid or not.

Minimal Checkout Form

Download Example more examples ↑

In the previous examples we've built a complete checkout form that utilized all of MemberMouse's checkout form SmartTags to collect account, billing and shipping information, display order information and allow customers to pay using their credit card or an offsite payment method like PayPal. In some cases there may be data that you're not interested in collecting and would like to remove it from the form so that the customer can checkout as quickly as possible.

In this example, we'll create a minimal checkout form that just collects account information, credit card information and billing zip code. In the finished example you'll notice that the account information and order information sections are exactly the same as they were in previous examples so you can check out those examples for more details. For account information fields, note that by placing them within the accountInfo MM_Form_Section they will only be shown when the customer is creating a new account. MemberMouse will automatically hide these fields when a current member is making a purchase ensuring that customers will always be presented with the minimal amount of fields to fill out.

MemberMouse's checkout forms have intelligent validation built in which allows us to inform the customer if they're trying to submit an order with incomplete information. In creating a minimal checkout form we want to make it so that the customer is not responsible for filling out certain fields. The way we do this is with hidden fields. Using hidden fields lets MemberMouse know that the customer will not be filling out these fields so it's okay if there's no data provided. Here's how you would create a billing section that just collects billing zip code and credit card information:

[MM_Form_Section type="billingInfo"]
Zip Code: [MM_Form_Field name="billingZipCode"]
Credit Card Number: [MM_Form_Field name="ccNumber"]
Exp. Date: [MM_Form_Field name="ccExpirationDate"]
Security Code: [MM_Form_Field name="ccSecurityCode"]

[MM_Form_Field type="hidden" name="billingAddress"]
[MM_Form_Field type="hidden" name="billingCity"]
[MM_Form_Field type="hidden" name="billingState"]
[MM_Form_Field type="hidden" name="billingCountry" value="US"]
[/MM_Form_Section]

The zip code and credit information are added in the same way they were in the billing information example. The remainder of the billing fields are added as hidden form fields. Notice that it's also possible to pass a default value for a hidden form field by setting the value attribute.

NOTE The payment method you're using (i.e. Authorize.net, Stripe, etc) may have its own validation requirements so it's possible that when submitting a minimal checkout form you may get an error informing you that a certain billing field is required. In this case you just need to set the value attribute for the hidden field that's required to a default value. For example, if the payment method you're using requires a billing state, you could do the following:

[MM_Form_Field type="hidden" name="billingState" value="NA"]

Working with Custom Fields

Download Example more examples ↑

In the previous examples we've built a number of different checkout forms utilizing MemberMouse's checkout form SmartTags to collect standard account, billing and shipping information. In some cases there may be additional data that you're interested in collecting from customers that's specific to your business. For example, if you're running a weight loss program you may want to collect a customer's current and target weight.

MemberMouse allows you to create custom fields in order to associate additional data with each member's account. Custom fields are identified by the ID assigned to them in MemberMouse. In the following examples we'll show you how to collect custom information through a checkout form.

Collect Data with Standard Input Fields

The MM_Form_Field SmartTag natively supports collecting custom field data through a standard HTML input form field. To do this you just need to set the type attribute to custom and set the id attribute to the ID of the custom field you're collecting data for. Optionally, you can set the isRequired attribute to indicate whether the field is required to be filled out or not. By default custom fields are not required to be filled out by the customer. Here's an example:

Current Weight: [MM_Form_Field type="custom" id="1" isRequired="true"]
Target Weight: [MM_Form_Field type="custom" id="2" isRequired="false"]

Collect Data with Hidden Fields

The MM_Form_Field SmartTag natively supports collecting custom field data through a hidden HTML input form field. To do this you just need to set the type attribute to custom-hidden and set the id attribute to the ID of the custom field you're collecting data for. Here's an example:

[MM_Form_Field type="custom-hidden" id="3"]

Since this form field is hidden the customer won't be able to interact with it directly so hidden custom fields are only useful when used in conjunction with passing custom field data to the checkout form through the URL. A common scenario where hidden custom fields would be used is if you have a pre-registration questionnaire you want customers to fill out. In this scenario the customer fills out a pre-registration form and then that data gets passed to the checkout form. This data is then stored in the hidden custom fields and when the customer submits the checkout form the data will be saved and associated with their account.

Using Decision SmartTags

Download Example more examples ↑

With the MM_Order_Decision SmartTag you can show or hide content on your checkout form based on a number of parameters. You can display different messaging based on if the visitor is a member or not, if they're signing up for a free membership, if they're purchasing a particular product and if the product they're purchasing requires shipping. This allows you to have a single checkout form that can intelligently modify itself based on different scenarios.

One of the most powerful ways the MM_Order_Decision SmartTag can be utilized is in creating a checkout form that upsells customers in a targeted way based on what they're purchasing. This is the scenario we'll demonstrate in this example.

  1. First we'll add a decision block that will only show up if a customer is signing up for a free membership. To do this you'll just add the following:

    [MM_Order_Decision isFree="true"]
    <!-- place marketing copy here -->
    [/MM_Order_Decision]
    

    In this example, the isFree attribute is set to true indicating that the content contained in the decision block should only be displayed when the customer is signing up for a free membership.

  2. Assume that your basic paid membership is associated with product ID 2 in MemberMouse. What you could do inside the decision block is something like this:

    We notice you're signing up for the free membership. 
    Here's why you should consider signing up for a paid membership.
    <a href="[MM_Purchase_Link productId='2']">Yes, sign me up for a paid membership</a>
    

    Now when a customer signs up for a free membership you'll have an opportunity to promote your paid membership and make them a special offer. When they click the purchase link the page will change to reflect them purchasing the basic paid membership.

  3. When a customer is purchasing a basic paid membership you could display some marketing copy that attempts to get them to upgrade to the premium membership. To do this you'll just add the following:

    [MM_Order_Decision productId="2"]
    <!-- place marketing copy here -->
    [/MM_Order_Decision]
    

    Following from the previous step, assume that your MemberMouse site is configured such that product ID 2 is associated with your basic paid membership. In this example, the productId attribute is set to 2 indicating that the decision content should only be displayed when the customer is purchasing the product with ID 2.

  4. Now assume that your premium paid membership is associated with product ID 4 in MemberMouse. What you could do inside the decision block is something like this:

    We notice you're signing up for the basic membership. 
    Here's why you should consider signing up for our premium membership.
    <a href="[MM_Purchase_Link productId='4']">Yes, I want to upgrade</a>
    

    Now when a customer signs up for a basic paid membership you'll have an opportunity to promote your premium membership and make a special offer. When they click the purchase link the page will change to reflect them purchasing the premium paid membership.

This example demonstrates a specific scenario in which you could use the MM_Order_Decision SmartTag. There are a number of other powerful uses of the MM_Order_Decision SmartTag and a number of other attributes you can utilize to dynamically display messaging. See the MM_Order_Decision SmartTag documentation for more information.

Feedback and Knowledge Base