Component: Checkout Custom Fields

⚠️ This feature is for the legacy Limio checkout and is not supported in Modular Checkout. Learn more about Modular Checkout here.

Use this component to add custom fields to the checkout to be mapped to existing Zuora custom fields

How to Use

After adding the component to the page builder, you'll see an empty white square - you can then edit the options, the fields are then seamlessly integrated into the checkout experience upon preview and publishing of the checkout page (see above).

Prop Definitions:

• Title - The section title 
• Custom fields input schema - A list of fields to display to the user
  • Custom field label - The text shown above the input field on checkout
  • Custom field Zuora id - The id of the custom field as seen in Zuora This must match for the field to work
  • Custom field type - The type of field, either Dropdown or Text (Pick Dropdown if the Zuora field type is Picklist)
  • dropdownItems - The list of items to display in the dropdown, this can be ignored if the field type is text
    • Label - The text the user will see in the dropdown
    • Value - The value of the picklist item in Zuora This must match for the field to work
• Custom fields inputs location (HTML Class) - The HTML Class of the HTML Element where the new fields should be injected, e.g.:

  .SinglePageCheckout .CheckoutWrapper .CheckoutContent

• Checkout custom fields placement - Decides whether the new fields should be added Above the existing Elements within the selected HTML Element, or Below.

Important Considerations

The fields created, must be present in Zuora, and if using the Zuora type 'Picklist' it must be a valid option, otherwise orders will fail to be processed.

Currently the fields only map to Subscription and Customer fields, found under Billing > Manage Custom Fields > Subscription fields in your Zuora settings