Full SDK

Step 1: Include the library in your project

You can add the library using CocoaPods or Swift Package Manager.

CocoaPods

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'

After, you need to run the installation:

pod install

Swift Package Manager

To add the Yuno SDK to your iOS project, you need to install the Swift Package Manager. With the Swift package set up, add YunoSDK as a dependency, as presented in the following code block:

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.,
    callback: { (value: Bool) in }  // Optional callback to be notified when the SDK has completed initialization
)

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, 
    let appearance: Yuno.Appearance,
    let saveCardEnabled: Bool, 
    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.

protocol YunoPaymentDelegate: AnyObject {

    var checkoutSession: String { get }
  	// The complete list of country codes is available on https://docs.y.uno/docs/country-coverage-yuno-sdk
    var countryCode: String { get }
    var language: String? { get }
    var viewController: UIViewController? { get }

    func yunoCreatePayment(with token: String)
    func yunoCreatePayment(with token: String, information: [String: Any]) 
    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 calling the startCheckout() function, you need to implement the YunoMethodsViewDelegate in your view. Add the view present on the following code block to your layout to show the payment methods available:

protocol YunoPaymentDelegate: AnyObject {

    func yunoDidSelect(paymentMethod: YunoSDK.PaymentMethodSelected)
    func yunoUpdatePaymentMethodsViewHeight(_ height: CGFloat)
}

let generator = Yuno.methodsView(delegate: self)

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

The following table describes the functions presented in the last code block.

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(showPaymentStatus:Bool)

Step 6: Get the OTT (One Time Token)

You can obtain the OTT to create the payment back-to-back at the end of this process. You will get the OTT in the function yunoCreatePayment() that you get when implementing the YunoPaymentDelegate. 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.