Lite SDK (Payment iOS)

On this page, you will find all the steps to add, configure, and use the Lite iOS SDK to make payments in your iOS project.

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 Yuno SDK 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

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

import YunoSDK

Yuno.initialize(
    apiKey: "<Public 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
)

The Lite 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: Initiate the payment process

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

Yuno.startPaymentLite(showPaymentStatus: Bool)

For the Lite checkout version, you need to send an additional parameter, which can be the vaulted token and/or the payment method the customer will use to make the payment.

protocol PaymentMethodSelected {
    var vaultedToken: String? { get }
    var paymentMethodType: String { get }
}

Yuno.startPaymentLite(paymentSelected: paymentSelected, showPaymentStatus: Bool)

Step 5: 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 6: 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 additional screens for 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 parameter showPaymentStatus is used to determine whether the payment status should be displayed. 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.

In order 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.

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