Card submit

Learn about customisation options for the card submit component.

Styling

val cardSubmitComponentConfig = CardSubmitComponentConfig(
    cardNumberComponent = CardNumberComponent?,
    cardExpiryDateComponent = CardExpiryDateComponent?,
    cardCvcComponent = CardCvcComponent?,
    cardHolderNameComponent = CardHolderNameComponent?,
    newCardComponent = NewCardComponent?,
    cardOnFileComponent = CardOnFileComponent?,
    clickOnceStandaloneComponent = ClickOnceStandaloneComponent?,
    cardConsentComponent = CardConsentComponent?,
    billingAddressComponents = BillingAddressComponents?,
    useCardOnFile = Boolean,
    componentsToValidate = List<BaseComponent<*>>,
    avsRequest = Boolean,
    hideSubmitButton = Boolean,
    disableUntilValidated = Boolean,
    validateOnBlur = Boolean,
    errorMessage = String?,
    style = CardSubmitStyle?,
    buttonText = String?,
    loadingText = String?,
    fingerprintCallbackUrl = String?
)

Property	Description
`cardNumberComponent` CardNumberComponent?	Card number component reference for validation and data collection.
`cardExpiryDateComponent` CardExpiryDateComponent?	Card expiry date component reference for validation and data collection.
`cardCvcComponent` CardCvcComponent?	Card CVC component reference for validation and data collection.
`cardHolderNameComponent` CardHolderNameComponent?	Card holder name component reference for validation and data collection.
`newCardComponent` NewCardComponent?	Combined card component reference for validation and data collection.
`cardOnFileComponent` CardOnFileComponent?	Card on file component reference for token-based payments.
`clickOnceStandaloneComponent` ClickOnceStandaloneComponent?	ClickOnce component reference for quick payments.
`cardConsentComponent` CardConsentComponent?	Card consent component reference for card storage consent.
`billingAddressComponents` BillingAddressComponents?	Billing address components for address verification service.
`useCardOnFile` Boolean	Whether to use card on file for payment. Defaults to `false`.
`componentsToValidate` List<BaseComponent<*>>	List of components to validate on submit. Defaults to empty list.
`avsRequest` Boolean	Whether to request Address Verification Service. Defaults to `false`.
`hideSubmitButton` Boolean	Whether to hide the submit button. Defaults to `false`.
`disableUntilValidated` Boolean	Whether to disable button until all fields are validated. Defaults to `false`.
`validateOnBlur` Boolean	Whether to validate fields when they lose focus. Defaults to `false`.
`errorMessage` String?	Error message to display on the submit button.
`style` CardSubmitStyle?	Custom styling configuration for the submit button.
`buttonText` String?	Custom text for the submit button.
`loadingText` String?	Text to display while processing payment.
`fingerprintCallbackUrl` String?	Callback URL for fraud detection fingerprinting.

Callbacks

data class CardSubmitComponentConfig(
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,
    val onTriggerFieldValidation: ((ValidationResult) -> Unit)? = null,
    val onPreTokenisation: (() -> Boolean)? = null,
    val onPostTokenisation: ((CardTokenisationResult) -> Unit)? = null,
    val onSubmit: (() -> Unit)? = null,
    val onChange: ((CardSubmitState) -> Unit)? = null,
    val onValidation: ((List<ValidationResult>) -> Unit)? = null,
    val onConsentChanged: ((Boolean) -> Unit)? = null,
    val onSubmitError: ((BaseSdkException) -> Unit)? = null,
    val onCollectStart: (() -> Unit)? = null,
    val onCollectEnd: (() -> Unit)? = null,
    val onPreInitiateAuthentication: (() -> PreInitiateIntegratedAuthenticationData?)? = null,
    val onPostInitiateAuthentication: ((AuthenticationResult) -> Unit)? = null,
    val onPreAuthentication: ((PreInitiateSuccessAuthenticationResult) -> InitiateIntegratedAuthenticationData?)? = null,
    val onPostAuthentication: ((AuthenticationResult, ThreeDSAuthenticationData?) -> Unit)? = null,
    val onPreAuthorisation: ((PreAuthorisationData, BaseSdkException?) -> TransactionInitiationData?)? = null,
    val onPostAuthorisation: ((SubmitResult) -> Unit)? = null
)

Callback	Description
`onValidationPassed: ((List<ValidationResult>) -> Unit)?`	Event handler for when validation passes. Inherited from ComponentConfigImpl.
`onValidationFailed: ((List<ValidationResult>) -> Unit)?`	Event handler for when validation fails. Inherited from ComponentConfigImpl.
`onTriggerFieldValidation: ((ValidationResult) -> Unit)?`	Event handler for when field validation is triggered individually. Inherited from ComponentConfigImpl.
`onPreTokenisation: (() -> Boolean)?`	Event handler called before card tokenisation. Return false to prevent tokenisation.
`onPostTokenisation: ((CardTokenisationResult) -> Unit)?`	Event handler called after successful card tokenisation.
`onSubmit: (() -> Unit)?`	Event handler for when submit button is clicked.
`onChange: ((CardSubmitState) -> Unit)?`	Event handler for component state changes.
`onValidation: ((List<ValidationResult>) -> Unit)?`	Event handler for validation results from all components.
`onConsentChanged: ((Boolean) -> Unit)?`	Event handler for card storage consent changes.
`onSubmitError: ((BaseSdkException) -> Unit)?`	Event handler for submission errors.
`onCollectStart: (() -> Unit)?`	Event handler for when data collection starts.
`onCollectEnd: (() -> Unit)?`	Event handler for when data collection ends.
`onPreInitiateAuthentication: (() -> PreInitiateIntegratedAuthenticationData?)?`	Event handler called before initiating 3DS authentication.
`onPostInitiateAuthentication: ((AuthenticationResult) -> Unit)?`	Event handler called after 3DS authentication initiation.
`onPreAuthentication: ((PreInitiateSuccessAuthenticationResult) -> InitiateIntegratedAuthenticationData?)?`	Event handler called before 3DS challenge.
`onPostAuthentication: ((AuthenticationResult, ThreeDSAuthenticationData?) -> Unit)?`	Event handler called after 3DS challenge completion.
`onPreAuthorisation: ((PreAuthorisationData, BaseSdkException?) -> TransactionInitiationData?)?`	Event handler called before payment authorisation.
`onPostAuthorisation: ((SubmitResult) -> Unit)?`	Event handler called after payment authorisation.

For more information about callbacks, see Events.

Example

import com.pxp.checkout.components.cardsubmit.CardSubmitComponent
import com.pxp.checkout.components.cardsubmit.CardSubmitComponentConfig
import com.pxp.checkout.components.cardnumber.CardNumberComponent
import com.pxp.checkout.components.cardexpirydate.CardExpiryDateComponent
import com.pxp.checkout.components.cardcvc.CardCvcComponent
import com.pxp.checkout.components.cardholdername.CardHolderNameComponent
import com.pxp.checkout.components.cardsubmit.CardSubmitStyle

// Create individual card components
val cardNumberComponent = checkout.createComponent<CardNumberComponent, CardNumberComponentConfig>(
    type = ComponentType.CARD_NUMBER,
    config = CardNumberComponentConfig(
        placeholder = "1234 5678 9012 3456"
    )
)

val cardExpiryComponent = checkout.createComponent<CardExpiryDateComponent, CardExpiryDateComponentConfig>(
    type = ComponentType.CARD_EXPIRY_DATE,
    config = CardExpiryDateComponentConfig(
        placeholder = "MM/YY"
    )
)

val cardCvcComponent = checkout.createComponent<CardCvcComponent, CardCvcComponentConfig>(
    type = ComponentType.CARD_CVC,
    config = CardCvcComponentConfig(
        placeholder = "123"
    )
)

val cardHolderNameComponent = checkout.createComponent<CardHolderNameComponent, CardHolderNameComponentConfig>(
    type = ComponentType.CARD_HOLDER_NAME,
    config = CardHolderNameComponentConfig(
        placeholder = "John Doe"
    )
)

// Optional: Create custom styling
val customStyle = CardSubmitStyle(
    backgroundColor = Color.Blue,
    textColor = Color.White,
    borderRadius = 8.dp,
    padding = 16.dp,
    loadingIndicatorColor = Color.White
)

val config = CardSubmitComponentConfig(
    // Component references for validation and data collection
    cardNumberComponent = cardNumberComponent,
    cardExpiryDateComponent = cardExpiryComponent,
    cardCvcComponent = cardCvcComponent,
    cardHolderNameComponent = cardHolderNameComponent,
    
    // Payment configuration
    useCardOnFile = false,
    avsRequest = true,
    disableUntilValidated = true,
    validateOnBlur = true,
    
    // Button configuration
    buttonText = "Pay Now",
    loadingText = "Processing Payment...",
    hideSubmitButton = false,
    
    // Styling
    style = customStyle,
            
            // Payment flow callbacks
    onPreTokenisation = {
        println("About to tokenise card data")
        // Perform pre-tokenisation checks
        true // Return true to proceed
    },
    
    onPostTokenisation = { result ->
        println("Card tokenised successfully: ${result.token}")
    },
    
    onSubmit = {
        println("Submit button clicked")
    },
    
    onChange = { state ->
        println("Submit state changed: ${state.status}")
    },
    
    onValidation = { results ->
        val allValid = results.all { it.isValid }
        println("Validation results: ${if (allValid) "Valid" else "Invalid"}")
            },
            
            onSubmitError = { error ->
        println("Submit error: ${error.message}")
    },
    
    // 3DS Authentication callbacks
    onPreInitiateAuthentication = {
        println("Preparing 3DS authentication")
        // Return authentication data if needed
        null
    },
    
    onPostInitiateAuthentication = { result ->
        println("3DS authentication initiated: ${result.status}")
    },
    
    onPreAuthentication = { result ->
        println("Starting 3DS challenge")
        // Return challenge data if needed
        null
    },
    
    onPostAuthentication = { result, authData ->
        println("3DS authentication completed: ${result.status}")
    },
    
    // Payment authorisation callbacks
    onPreAuthorisation = { data, error ->
        if (error != null) {
            println("Pre-authorisation error: ${error.message}")
            return@CardSubmitComponentConfig null
        }
        println("Preparing payment authorisation")
        // Return transaction data
        null
    },
    
    onPostAuthorisation = { result ->
        println("Payment completed: ${result.status}")
        if (result.isSuccess) {
            println("Payment successful!")
                                } else {
            println("Payment failed: ${result.errorMessage}")
        }
    }
)

val cardSubmitComponent = checkout.createComponent<CardSubmitComponent, CardSubmitComponentConfig>(
    type = ComponentType.CARD_SUBMIT,
    config = config
)

Card submit

Styling

Callbacks

Example

Was this helpful?