Renders a secure tokenization form as a modal sheet. When the buyer submits the form, the SDK tokenizes the payment details and returns a TokenizedResponse via the onPositiveClick callback.
Each form type comes in two style variants, Outlined and Classic, and shares the same parameters.
Function signature
CompletePaymentSheetOutlined(
modifier, applicationId, isSandbox,
paymentSheetResources, paymentSheetColors,
logoTextStyle, textStyle, buttonTextFont,
onDismiss, onNegativeClick, onPositiveClick
)| Parameter | Type | Required | Description |
|---|---|---|---|
applicationId | String | No | Your Finix Application ID. Defaults to sandbox environment. |
isSandbox | Boolean | No | true for sandbox, false for production. Defaults to true. |
onDismiss | () -> Unit | Yes | Called when the buyer dismisses the sheet without submitting. |
onNegativeClick | () -> Unit | Yes | Called when the buyer taps the cancel button. |
onPositiveClick | (TokenizedResponse) -> Unit | Yes | Called with the TokenizedResponse on successful submission. |
paymentSheetResources | PaymentSheetResources | No | Customize logo, button labels, and strings. See PaymentSheetResources. |
paymentSheetColors | PaymentSheetColors | No | Customize field, button, and error colors. See PaymentSheetColors. |
modifier | Modifier | No | Jetpack Compose modifier applied to the sheet container. |
logoTextStyle | TextStyle | No | Text style for the logo label. Default: headlineSmall. |
textStyle | TextStyle | No | Text style for input fields. Default: LocalTextStyle.current. |
buttonTextFont | TextUnit | No | Font size for button labels. Default: BUTTON_TEXT_FONT. |
applicationId
Your Finix Application ID, found in the Finix Dashboard. Application IDs are environment-specific, so use the one that matches your chosen isSandbox value.
isSandbox
Controls which Finix environment the SDK connects to.
| Value | Environment |
|---|---|
true | Sandbox |
false | Production |
Your applicationId must belong to the same environment.
onDismiss / onNegativeClick / onPositiveClick
The three required callbacks control what happens when the buyer interacts with the sheet.
| Callback | Trigger | Receives |
|---|---|---|
onDismiss | Buyer swipes the sheet away | nothing |
onNegativeClick | Buyer taps the cancel button | nothing |
onPositiveClick | Successful tokenization | TokenizedResponse |
Dismiss the sheet in all three callbacks to avoid leaving it open after interaction.
paymentSheetResources / paymentSheetColors
Pass PaymentSheetResources to customize text and images, and PaymentSheetColors to customize colors.
See PaymentSheetResources and PaymentSheetColors for all available properties.
Full example
A complete implementation with customized colors and resources, controlled by a ViewModel.
CompletePaymentSheetOutlined(
applicationId = applicationId,
isSandbox = isSandbox,
paymentSheetResources = paymentSheetResources,
paymentSheetColors = paymentSheetColors,
onDismiss = onDismiss,
onNegativeClick = onNegativeClick,
onPositiveClick = onPositiveClick
)
// Sandbox
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = true,
onDismiss = { },
onNegativeClick = { },
onPositiveClick = { token -> }
)
// Production
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = false,
onDismiss = { },
onNegativeClick = { },
onPositiveClick = { token -> }
)
// Sandbox — use a sandbox Application ID
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = true,
onDismiss = { },
onNegativeClick = { },
onPositiveClick = { token -> }
)
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = false,
onDismiss = {
// Sheet was closed without submitting
viewModel.setShowPaymentSheet(false)
},
onNegativeClick = {
// Buyer tapped cancel
viewModel.setShowPaymentSheet(false)
},
onPositiveClick = { token ->
// Tokenization succeeded — save the token and dismiss
viewModel.saveTokenResponse(token)
viewModel.setShowPaymentSheet(false)
}
)
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = false,
paymentSheetResources = PaymentSheetResources(
logoText = R.string.my_brand_name,
tokenizeButtonText = R.string.pay_now,
cancelButtonText = R.string.back
),
paymentSheetColors = PaymentSheetColors(
tokenizeButtonColor = Color(0xFF00897B),
tokenizeButtonTextColor = Color.White,
focusedIndicatorColor = Color(0xFF00897B),
focusedLabelColor = Color(0xFF00897B)
),
onDismiss = { viewModel.setShowPaymentSheet(false) },
onNegativeClick = { viewModel.setShowPaymentSheet(false) },
onPositiveClick = { token ->
viewModel.saveTokenResponse(token)
viewModel.setShowPaymentSheet(false)
}
)
@Composable
fun CheckoutScreen() {
val viewModel = viewModel<CheckOutViewModel>()
val state = viewModel.state
if (state.showPaymentSheet) {
CompletePaymentSheetOutlined(
applicationId = "APgPDQrLD52TYvqazjHJJchM",
isSandbox = false,
paymentSheetResources = PaymentSheetResources(
logoText = R.string.my_brand_name,
tokenizeButtonText = R.string.pay_now
),
paymentSheetColors = PaymentSheetColors(
tokenizeButtonColor = Color(0xFF00897B)
),
onDismiss = { viewModel.setShowPaymentSheet(false) },
onNegativeClick = { viewModel.setShowPaymentSheet(false) },
onPositiveClick = { token ->
viewModel.saveTokenResponse(token)
viewModel.setShowPaymentSheet(false)
}
)
}
}