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 First steps - iOS.
1. Display the widget
Call the initCheckout to display the widget and pass the following data.
| Atrribute | Type | Description |
|---|---|---|
orderToken | string | Unique token generated for the payment order. This token is generated through the DEUNA API and you must implement the corresponding endpoint in your backend to obtain this information. NOTE: The checkout widget requires an order of type PAYMENT_LINK.When creating the order with the API In DEUNA, a redirect URL (redirect_url) must not be defined for the onSuccess callback to execute correctly. |
callbacks | JSON | Callbacks are return functions that listen for and handle widget events. These events allow you to manage specific actions based on the payment status. The main callbacks include: onSuccess, onError, onClosed, onCanceled, eventListener |
styleFile (Optional) | string | UUID provided by DEUNA. This applies if you want to configure a custom styles custom file (Change colors, texts, logo, etc).If a valid value is provided for styleFile, the checkout widget will use the UI settings provided by the theme configuration that matches the provided UUID. |
language(Optional) | string | This parameter allows you to specify the language in which the widget interface will be displayed. It must be provided as a valid language code (for example, "es" for Spanish, "en" for English, "pt" for Portuguese). Behavior: - If provided: The widget will use the language specified in this parameter, regardless of the merchant's settings. - If not provided: The widget will use the language configured by the merchant. |
let deunaSDK: DeunaSDK = ...
deunaSDK.initCheckout(
orderToken: "TU_ORDER_TOKEN",
callbacks: CheckoutCallbacks(
onSuccess: { order in
// Successful payment
self.deunaSDK.close() // Close the widget
},
onError: { error in
// Error in payment process
self.deunaSDK.close() // Close the widgeto
},
onClosed: { action in
// Close the widget
},
eventListener: { event, _ in
// Listen to payment process events
// Close the widget when user chooses to change payment method
if event == .changeCart || event == .changeAddress {
self.deunaSDK.close()
}
}
)
)
2. Listen to Checkout events
When a transaction succeeds or fails, it is important to update your interface to notify users about the result of the transaction. You can do this by listening to the events of the payment widget through callbacks.
The class instance PaymentWidgetCallbacks passed to initPaymentWidget allows you to listen to widget events using callbacks.
Define the respective callbacks to update your app's interface.
Callbacks
| Callback | Trigger |
|---|---|
onSuccess | Executed when the payment is completed. This callback contains a parameter of type [String:Any] with the order information. |
onError | Executed when an error occurs. This callback contains a PaymentsError parameter that identifies the type of error that occurred. |
onClosed (Optional) | Runs when the payment widget is closed. This callback contains a parameter of type enum CloseAction with the following values:- .userAction: When the widget was manually closed by the user (by pressing the X close button or sliding the modal down) without the operation being completed.- .systemAction: When the widget is closed due to the execution of the function close. |
onEventDispatch (Otcional) | It is executed on all events that the widget can produce. This callback contains a parameter of type CheckoutEvent. |
3. Close the widget
By default, the payment widget only closes when the user presses the widget's close button or the back button on iOS.
To close the modal when a payment is successful or when an error occurs, you must call the function close.
The following example code shows how to close the widget when a payment is successful.
let deunaSDK: DeunaSDK = ...
deunaSDK.initCheckout(
orderToken: "TU_ORDER_TOKEN",
callbacks: CheckoutCallbacks(
onEventDispatch: { event, _ in
// Escuchar los eventos del proceso de pago
// Cierra el widget cuando el usuario elige cambiar la dirección o el método de pago
if event == .changeCart || event == .changeAddress {
self.deunaSDK.close()
}
}
)
)
Customize the widget appearance
If the checkout widget is visible and you want to customize its appearance, use the function setCustomStyle.
For more information, refer to CustomStyle customization.
Example
// Extension to convert a String to a Dictionary(JSON)
extension String {
func toDictionary() -> [String: Any]? {
guard let data = data(using: .utf8) else {
return nil
}
do {
let dictionary = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any]
return dictionary
} catch {
print("Error: \(error.localizedDescription)")
return nil
}
}
}
.
.
.
deunaSDK.initCheckout(
orderToken: "TU_ORDER_TOKEN",
callbacks: CheckoutCallbacks(
onEventDispatch: { event, _ in
self.deunaSDK.setCustomStyle(data: """
{
"theme": {
"colors": {
"primaryTextColor": "#023047",
"backgroundSecondary": "#8ECAE6",
"backgroundPrimary": "#8ECAE6",
"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"
}
}
}
}
}
""".toDictionary() ?? [:]
)
}
)
)