Component: Self-service Form

The Self-service Form component allows your customers to perform a variety of self-service use cases. It is designed for use cases such as adding a new payment method, updating contact details, paying an invoice, or processing an upgrade or downgrade. Unlike the Checkout Form, the Self-service Form is dedicated to post-purchase account management.

The Self-service Form works similarly to the Checkout Form component. It can be configured by using our library of reusable subcomponents for common fields such as text, email, address, and payment details. These pre-built elements make it fast and consistent to assemble forms, while still allowing for customisation when needed. The same subcomponents are used across the Checkout Form and Self-service Form. See the list of Form subcomponents here: Modular Checkout Components

Common use cases for the Self-service Form

• Add a new payment method, for example when a card has expired or is about to expire

• Add a secondary payment method to fall back to, in case the primary payment method fails

• Update contact details when adding a new payment method

• Process an upgrade or downgrade to an existing subscription

Overview

• Add Payment Method: Customers can securely add new payment methods (e.g. card or ACH) via the Stripe Payment Element.

• Default Payment Method Control: Customers can decide whether the new payment method should become their default.

  • Make sure your Self-service Form component has a generic Field subcomponent of type "checkbox" and Limio field name "disableUpdateDefaultPaymentMethod" if you want your users to be able to choose whether their newly added payment method is the default.

• Saved Payment Methods: All new payment methods follow a consistent object structure so they display correctly in the Saved Payment Methods component.

• Extended Address Support: Self-service Forms process additional address fields including mobile phone, work phone, other phone, and work email.

• Normalised Card Data: Card brand, last 4 digits, expiry, and cardholder name are displayed consistently across Stripe and Zuora payment methods.

• Process upgrade or downgrades: The Self-service Form manages the order submission during an upgrade or downgrade action.

Payment Integrations

The components works with:

• Zuora Hosted Payment Methods: How to set up Zuora Hosted Payment Methods for Limio

• Zuora Payment Form: How to set up Zuora Payment Forms for Limio

• Stripe Elements: Limio Stripe Payments Integration

Props

Prop	Type	Description
Order type	picklist	Selects the type of Self Service Order the Form is configured for e.g. Change Payment.
Payment type	picklist	Selects the Default Payment Type to be used by Payment Field in the Form e.g. Zuora iFrame, Zuora Payment Form, Stripe Payment Element.
Required field label	string	This text will appear next to all required fields. If left blank, no indicator will be displayed.
Option field label	string	This text will appear next to all optional fields. If left blank, no indicator will be displayed.
Submit button label	string	Submit button label
Redirect URL	string	URL to redirect customer to after successful form submission

Limitations

• Historical payment methods are not backfilled into the new structure.

• Currently supports Stripe and Zuora only.