Prefill checkout fields

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

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

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

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 clicking More 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

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. For each field you want to prefill, do the following:
  3. Copy the field reference from the field’s settings
  4. Add the field reference to the query string of the URL
  5. To start the query string, add ? to the URL: https://yoursite.checkoutpage.co?
  6. Add the field reference, for example ?customer_email: https://yoursitecheckoutpage.co?customer_email
  7. Add = and the data you want to prefill the field with, for example =miranda@gmail.com: https://yoursite.checkoutpage.co?customer_email=miranda@gmail.com
  8. For every field after the first, add & to the URL instead of ?: https://yoursite.checkoutpage.co?customer_email=miranda@gmail.com&customer_name=Miranda
  9. Test the checkout to make sure the fields are prefilled correctly

Query parameter list

The following is a list of all the query parameters that you can add to your URL for each field.

Please note that query parameters are determined on the field's reference, which is created by:

  • Either the field type
  • Or the field name that you've input, which will also be the reference
  • The selected data type
  • Inputting your own custom reference
FieldsQuery parameters
Name (single-line text)?customer_name=
Email Address?customer_email=
?email-address=
Country?country=
?billing_address_country=
?shipping_address_country=
State/Province (single-line text)?billing_address_state=
?shipping_address_state=
City (single-line text)?billing_address_city=
?shipping_address_city=
Company name (single-line text)?company-name=
Address (single-line text)?billing_address_line1=
?billing_address_line2=
?shipping_address_line1=
?shipping_address_line2-
Postal Code (single-line text)?billing_address_postal_code=
?shipping_address_postal_code=
Phone Number?phone=
?customer_phone=
?shipping_phone
Quantity?quantity=
Date?date=2030-01-01
Time?time=00:00
Tax ID?tax-id=
PO Number?po-number=

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

3. Open Additional settings

4. 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