Billing address

Learn about customisation options for the billing address component.

Styling

val billingAddressConfig = BillingAddressComponentConfig(
    fields = BillingAddressFields(
        countrySelection = CountrySelectionComponentConfig(
            isRequired = Boolean,
            availableCountries = List<Country>,
            defaultCountry = String,
            showFlags = Boolean,
            searchPlaceholderText = String,
            noCountryText = String,
            style = CountrySelectionStyle?,
            label = String,
            placeholder = String,
            showTrailingIcon = Boolean,
            showValidIcon = Boolean,
            validIcon = Int,
            invalidIcon = Int,
            showInvalidIcon = Boolean,
            validations = CountrySelectionValidations
        ),
        postcode = PostcodeComponentConfig(
            isRequired = Boolean,
            maxLength = Int,
            style = PostcodeStyle?,
            validations = PostcodeValidations,
            label = String,
            placeholder = String,
            showTrailingIcon = Boolean,
            showValidIcon = Boolean,
            validIcon = Int,
            invalidIcon = Int,
            showInvalidIcon = Boolean
        ),
        address = AddressComponentConfig(
            isRequired = Boolean,
            maxLength = Int,
            style = AddressStyle?,
            validations = AddressValidations,
            label = String,
            placeholder = String,
            showTrailingIcon = Boolean,
            showValidIcon = Boolean,
            validIcon = Int,
            invalidIcon = Int,
            showInvalidIcon = Boolean
        ),
        prefillBillingAddressCheckbox = PrefillBillingAddressCheckboxConfig(
            countrySelectionComponent = CountrySelectionComponent?,
            postcodeComponent = PostcodeComponent?,
            addressComponent = AddressComponent?,
            shippingAddress = ShippingAddress?,
            checked = Boolean,
            styles = PrefillBillingAddressCheckboxStyle,
            label = String
        )
    ),
    allowPrefillBillingAddress = Boolean,
    layoutMode = BillingAddressLayoutMode,
    style = BillingAddressStyle?,
    localisation = BillingAddressLocalisation,
    displayRequiredIcon = Boolean?
)

Property	Description
`fields` BillingAddressFields?	Configuration for the individual fields.
`allowPrefillBillingAddress` Boolean	Whether to enable prefill from shipping address. Defaults to `false`.
`layoutMode` BillingAddressLayoutMode	The layout arrangement for the fields. Defaults to `HORIZONTAL`.
`style` BillingAddressStyle?	Custom styling configuration.
`localization` BillingAddressLocalization	The localisation settings.
`displayRequiredIcon` Boolean?	Whether to display a required icon for required fields.

Callbacks

data class BillingAddressComponentConfig(
    var onTriggerFieldValidation: ((ValidationResult) -> Unit)? = null,
    var onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    var onValidationFailed: ((List<ValidationResult>) -> Unit)? = null
)

Callback	Description
`onTriggerFieldValidation: (ValidationResult) -> Unit`	Event handler for or individual field validation.
`onValidationPassed: (List<ValidationResult>) -> Unit`	Event handler for when all billing address validations pass.
`onValidationFailed: (List<ValidationResult>) -> Unit`	Event handler for when any billing address validation fails.

For more information about callbacks, see Events.

Examples

import com.pxp.checkout.components.billingaddress.BillingAddressFields
import com.pxp.checkout.components.address.AddressComponentConfig
import com.pxp.checkout.components.countryselection.CountrySelectionComponentConfig
import com.pxp.checkout.components.postcode.PostcodeComponentConfig

val customFields = BillingAddressFields(
    countrySelection = CountrySelectionComponentConfig(
        label = "Country of Residence",
        isRequired = true,
        showCountryFlags = true
    ),
    postcode = PostcodeComponentConfig(
        label = "Postal Code",
        isRequired = true,
        maxLength = 10
    ),
    address = AddressComponentConfig(
        label = "Street Address",
        placeholder = "123 Main Street, City",
        isRequired = true,
        maxLength = 100
    ),
    prefillBillingAddressCheckbox = PrefillBillingAddressCheckboxConfig(
        label = "Same as shipping address",
        isVisible = true
    )
)

val config = BillingAddressComponentConfig(
    fields = customFields,
    allowPrefillBillingAddress = true,
    layoutMode = BillingAddressLayoutMode.VERTICAL,
    style = customBillingAddressStyle,
    displayRequiredIcon = true
)

val billingAddressComponent = checkout.createComponent<BillingAddressComponent, BillingAddressComponentConfig>(
    type = ComponentType.BILLING_ADDRESS,
    config = config
)

Billing address

Styling

Callbacks

Examples

Was this helpful?