Prefill checkout fields

In this help article, you will learn how to prefill fields on a checkout.

With Checkout Page, you can easily create a one-page checkout and prefill your checkout fields.

Prefilling fields on a checkout lets your customers save time, speeds up the checkout process and boosts conversion.

You can prefill fields with information you’ve already collected from a customer.

For example, if you’ve already collected your customer’s name, email address, shipping address, or any other information, you can prefill this information to speed up your customer’s checkout experience and boost your sales.

How to prefill fields on the checkout

image-011f6a.png

Prefilling fields is as easy as adding the data to the checkout link or to the URL of your site that contains an embedded checkout or checkout popup.

You will add this data to the query string (URL Parameters) of your one-page checkout link.

For example, if you want to prefill the email field with miranda@gmail.com, you can add ?customer_email=miranda@gmail.com to the URL.

You can also prefill multiple fields at once. For example, if you want to prefill the email field with miranda@gmail.com and the name field with Miranda, you can add ?customer_email=miranda@gmail.com&customer_name=Miranda to the URL.

Prefilling fields works based on the field reference. You can find a field’s reference by toggling ‘Additional field settings’ in the field’s settings.

Checkout Page automatically creates references for your fields based on your field data type or the label.

image-e5c118.png

These are the standard references for each field data type:

  • Customer name: customer_name
  • Customer email address: customer_email
  • Customer phone: customer_phone
  • Shipping address: shipping_address_line1
  • Shipping address line two: shipping_address_line2
  • Shipping address city: shipping_address_city
  • Shipping address country: shipping_address_country
  • Shipping address postal code: shipping_address_postal_code
  • Shipping address state: shipping_address_state

Steps to prefill fields on the checkout

  1. Set up your one-page checkout with the fields you want to collect data for, such as the customer’s name, email address, shipping address, etc
  2. Add the checkout to your site by embedding it or by using a popup, or share the one-page checkout link directly
  3. For each field you want to prefill, do the following:
  4. Copy the field reference from the field’s settings
  5. Add the field reference to the query string of the URL
  6. To start the query string, add ? to the URL: https://yoursite.com?
  7. Add the field reference, for example ?customer_email: https://yoursite.com?customer_email
  8. Add = and the data you want to prefill the field with, for example =miranda@gmail.com: https://yoursite.com?customer_email=miranda@gmail.com
  9. For every field after the first, add & to the URL instead of ?: https://yoursite.com?customer_email=miranda@gmail.com&customer_name=Miranda
  10. Test the checkout to make sure the fields are prefilled correctly

Prefill fields on embedded & popup checkouts

There are two ways to prefill fields on embedded and popup checkouts.

  1. Add the query string to the checkout link in the embed or popup code
  2. Add the query string to the URL of your site that contains the embed or popup checkout

Hide prefilled fields from the checkout

If you already have a customer’s information and prefill the field with the above steps, you can hide the field entirely to make the checkout process even faster.

For example, you already have your customer’s name and email address, but you still want to store them with the order. You can prefill the fields and hide them from your checkout so that your customer doesn’t have to enter this information again.

This way, you make sure a customer’s data is consistent across their payments.

Hiding a field is easy:

  1. Open the checkout in your dashboard
  2. Go to Checkout, then Fields and click on the dropdown next to the field you'd like to hide
image-c5a5a3.png
  1. Open Additional settings
  2. Check the Hide field checkbox

image-059365.png

In some cases, even when the Hide field option is checked, the field can still be visible on the checkout.

This is how Checkout Page determines if a field should be hidden:

  • If a field is hidden and required but not prefilled, the field will be displayed to your customers.
  • If a field is hidden but not required and not prefilled, the field will not be displayed to your customers.
  • For email fields, if the prefilled value is not a valid email address, the field will be displayed with the current value