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, and so on). If a valid value is provided for `styleFile`, then the Checkout widget uses 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 is 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 uses the language specified in this parameter, regardless of the merchant's settings. If not provided, then the widget uses 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 widget
        },
        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, you must 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`	Runs when the payment is completed. This callback contains a parameter of type he steps bel with the order information.
`onError`	Runs 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 run 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, then 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() ?? [:]
        )   
        }
    )
)