Accept and process payments in your application using the Checkout widget.
Follow the steps below to capture payments.
Initialize the widget
Before integrating the Payment widget, complete the Getting Started - Android.
1. Display the widget
To display the Checkout widget, call the initCheckout function passing the following data:
Parameters
Attributes | Description |
|---|---|
| The context is the context of your activity in Android. It provides access to application-specific resources and information about the environment in which the application is running. |
| The orderToken is a unique token generated for the payment order. This token is generated through DEUNA's API and you must implement the corresponding endpoint in your backend to obtain this information.
|
| Callbacks are return functions that are responsible for listening to and handling payment widget events. These events allow managing specific actions based on the payment status. The main callbacks include: |
| The DEUNA user's bearer token. When this is sent, all actions within the widget are performed on this DEUNA user.
|
| UUID provided by DEUNA. This applies if you want to configure a custom |
| This parameter allows you to specify the language in which the widget interface is displayed. It must be provided as a valid language code (for example, "es" for Spanish, "en" for English, "pt" for Portuguese). Behavior:
|
val deunaSDK: DeunaSDK = ...
deunaSDK.initCheckout(
context = YOUR_ACTIVITY_CONTEXT,
orderToken = "YOUR_ORDER_TOKEN",
callbacks = CheckoutCallbacks().apply {
onSuccess = { order ->
deunaSDK.close() // Close the Payment widget
// Your additional code
}
onError = { error ->
deunaSDK.close() // Close the Payment widget
// Error handling
}
onClosed = { action ->
// The Payment widget was closed
}
onEventDispatch = { event, response ->
// Listen to payment process events
// Your code here
}
},
closeEvents = setOf(CheckoutEvent.changeCart, CheckoutEvent.changeAddress) // Close the widget when user chooses to change address or payment method
)
2. Listen to widget events
When a transaction is successful or fails, you must update your interface to notify users about the transaction result. You can do this by listening to the Payment widget events through callbacks.
The instance of the PaymentWidgetCallbacks class passed to the initPaymentWidget function allows you to listen to widget events through callbacks.
Define the respective callbacks to update your app's interface.
Callbacks
Callback | When is it triggered? |
|---|---|
| It's run when the payment is completed. This callback contains a parameter of type Map<String,Any> with the order information. |
| It's run when an error occurs. This callback contains a parameter of type PaymentsError which identifies the type of error produced. See an example of the callback response here. |
| It's run when the Payment widget is closed. This callback contains a parameter of type enum
|
| It's run when the user intentionally closes the Payment widget (pressing the X button or pressing the back button) without the operation being completed. |
| It's run on all events that the widget can produce. This callback contains a parameter of type |
3. Close the widget
By default, the Payment widget only closes when the user presses the widget's close button or when they press the "back" button on Android.
To close the modal when a payment is successful or when an error occurs, you must call the close function:
deunaSDK.initCheckout(
context = YOUR_ACTIVITY_CONTEXT,
orderToken = "YOUR_ORDER_TOKEN",
callbacks = CheckoutCallbacks().apply {
onSuccess = { order ->
deunaSDK.close() // Close the payment widget
// Your additional code
}
}
)4. Customize widget appearance
Use the setCustomStyle function to customize the widget appearance:
await DeunaSDK.setCustomStyle({...});
For more information, refer to Style Customization.
Example
val deunaSDK: DeunaSDK = ...
deunaSDK.initCheckout(
context = YOUR_ACTIVITY_CONTEXT,
orderToken = "YOUR_ORDER_TOKEN",
callbacks = CheckoutCallbacks().apply {
onSuccess = ...
onError = ...
onClosed = ...
onEventDispatch = { event, response ->
// Listen to payment process events
// Your code here
deunaSDK.setCustomStyle(
data = JSONObject(
"""
{
"theme": {
"colors": {
"primaryTextColor": "#023047",
"backgroundSecondary": "#8ECAE6",
"backgroundPrimary": "#F2F2F2",
"buttonPrimaryFill": "#FFB703",
"buttonPrimaryHover": "#FFB703",
"buttonPrimaryText": "#000000",
"buttonPrimaryActive": "#FFB703"
}
},
"HeaderPattern": {
"overrides": {
"Logo": {
"props": {
"url": "https://images-staging.getduna.com/ema/fc78ef09-ffc7-4d04-aec3-4c2a2023b336/test2.png"
}
}
}
}
}
"""
).toMap()
)
}
}
)