Full SDK

Step 1: Include the library in your project.

1.1. To add the Yuno SDK to your iOS project, you need to install the Yuno SDK. If you do not have a Podfile, follow the CocoaPods guide to create one. After creating the Podfile, you will integrate the Yuno SDK with Cocoapods by adding the line below to your Podfile.

pod 'YunoSDK', '~> 1.1.22'

1.2. After that, you need to run the installation:

pod install

• You will also need to install the Swift Package Manager. With the Swift package set up, add YunoSDK as a dependency, as presented in the following code snippet;

dependencies: [
    .package(url: "https://github.com/yuno-payments/yuno-sdk-ios.git", .upToNextMajor(from: "1.1.17"))
]

Step 2: Initialize SDK with the public key

2.1. To start running the Yuno iOS Full checkout, you first need to get your Yuno app ID and iOS API key. Then, import and initialize Yuno as presented in the following code snippet:

import YunoSDK

Yuno.initialize(
    apiKey: "<Your iOS API Key>",
    config: YunoConfig() // This is optional, by default it configures .oneStep card form and disables save card checkbox.
)

2.2. Configuration

The Full checkout enables you to configure the appearance and process. It is an optional step that you configure through the class YunoConfig. If you want to set up the configurations, the following code block presents the elements that can be configured:

final class YunoConfig {
    let cardFormType: CardFormType, // This is optional, .oneStep by default, this is to choose Payment and Enrollment Card flow.
    let appearance: Yuno.Appearance, // This is optional, by default uses Yuno styles.
    let saveCardEnabled: Bool, // This is to choose if show save card checkbox on cards flows. It is false by default
    let cardFormFields: [YunoCardField],
    let keepLoader: Bool,
}

Below you find a description of each configuration variable available.

Step 3: Start the checkout process

The ViewController class is defined as a subclass of UIViewController and also adopts the YunoPaymentDelegate protocol. It overrides the viewDidLoad() method and calls Yuno.startCheckout(with: self). The Yuno.startCheckout(with:) function is a function provided by the Yuno library, and it takes an instance of a class that conforms to the YunoPaymentDelegate protocol as an argument. By passing self (the current instance of ViewController) as the argument, the ViewController becomes the delegate.

To start a new payment process using the Full checkout, you have to call the method YunoPaymentDelegate as a parameter, such as present in the following code snippet:

protocol YunoPaymentDelegate: AnyObject {

    var checkoutSession: String { get }
    var countryCode: String { get }
    var language: String { get }
    var navigationController: UINavigationController? { get }

    func yunoCreatePayment(with token: String)
    func yunoPaymentResult(_ result: Yuno.Result)
}

class ViewController: YunoPaymentDelegate {

    func viewDidLoad() {
        super.viewDidLoad()
        Yuno.startCheckout(with: self)
    }
}

The following table presents all the protocol requirements you have to provide and their descriptions.

Step 4: Add the SDK view to the checkout

After creating a payment using Yuno's iOS Full checkout, you have to add the view present on the following code block to your layout to show the payment methods available:

Yuno.methodsView(delegate: self)
    generator.getPaymentMethodsView(checkoutSession: checkoutSession) { [weak self] (view: UIView) in
        // Add view to your superview
    }
}

Step 5: Initiate the payment process

To effectively start a payment after displaying the payment methods, you have to call the method startPayment, as presented in the code snippet below:

Yuno.startPayment()

Step 6: Get the OTT (One Time Token)

At the end of this process, you can obtain the one-time token (OTT) to create the payment back-to-back. An example of retrieving the OTT is presented below:

func yunoCreatePayment(with token: String) { ... }

Step 7: Create the Payment

Once you have completed the steps described before, you can create a payment. The back-to-back payment creation must be carried out using the Create Payment endpoint. The merchant should call their backend to create the payment within Yuno, using the OTT (One Time Token) and the checkout session.

• Continue: We recommend integrating the continuePayment method of the SDK after the payment is created because certain asynchronous payment methods require additional action from the customer to complete it. The create_payment API will inform you of this scenario via the sdk_action_required field of the response, which will be returned as true. The yuno.continuePayment() function will display the additional screens to the customers, where they can carry out the necessary actions to complete the payment. Otherwise, this step is not necessary. You need to call the following method:

Yuno.continuePayment(showPaymentStatus: Bool)

The showPaymentStatus parameter is used to determine whether the payment status should be displayed or not. By passing true as an argument, the payment status might be shown, while passing false could indicate that the payment status should not be displayed.

Callback

After the payment is completed, the SDK can return different transaction states: success, fail, processing, reject, internalError, and userCancell. The descriptions of each transaction state is presented in the table below.

To get the transaction state, you have to implement the delegate presented in the following piece of code:

enum Result {
    case reject, success, fail, processing, internalError, userCancell
}

func yunoPaymentResult(_ result: Yuno.Result) { ... }
func yunoEnrollmentResult(_ result: Yuno.Result) { ... }

Complementary Features

Yuno iOS SDK provides additional services and configurations you can use to improve customers' experience. Use the SDK Customizations to change the SDK appearance to match your brand or to configure the loader.

• Loader: Control the use of the loader.
• Save card for future payments: In addition, you can display a checkbox for save or enroll cards using cardSaveEnable: true. Below you can find examples of the checkbox for both card form renders.

• You also can choose one of the render options for the card form. Below you find screenshots presenting the difference between the cardFormType ONE_STEP and STEP_BY_STEP.

Step by step

One step

• SDK Customizations: Change the SDK appearance to match your brand.