Program Details

The ProgramDetails component allows you to show your customers their credit program details.

ProgramDetails Component TEST MODE

Mobile

Desktop

Implementation

Web Components

Add the program-details element to your app where you'd like it to be presented.

<unit-elements-program-details
    customer-token=""
    theme=""
    language=""
    account-id="1111111"
    hide-title="false"
></unit-elements-program-details>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	A Unit Customer token. Required Scopes: customers accounts
account-id	string	Yes	Unit account id. The credit account for which to display program details.
language	string	No	A URL that specifies the language configuration.
theme	string	No	A URL that specifies the UI configuration.
hide-title	string	No	Hide the component title in case value is 'true'.

React Native SDK

UNProgramDetailsComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token.
accountId	string	YES	Unit account id. The credit account for which to display program details.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
hideTitle	boolean	NO	Hide title in case value is true
onLoad	(response: UNOnLoadResponse<[UNAccountData]>) => void	NO	Callback for a loaded component

Example:

import React from 'react';
import {
  UNProgramDetailsComponent,
  UNAccountData
} from 'react-native-unit-components';


export default function YourComponent() {
  return (
    <UNProgramDetailsComponent
      customerToken={/*Customer token here*/}
      accountId={'1105561'}
      onLoad={(response: UNOnLoadResponse<[UNAccountData]>) => { console.log(response) }}
    />
  );
}

Android SDK

Component name: UNProgramDetailsComponent

getProgramDetailsComponent parameters:

Name	Type	Required	Description
accountId	String	YES	Unit account id.
additionalSettings	UNProgramDetailsViewSettingsInterface	NO	Additional settings unique for this component
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.
callbacks	UNProgramDetailsComponentCallbacks	NO	Component's Callbacks sealed class

UNProgramDetailsComponentCallbacks

The callbacks parameter for UNProgramDetailsComponent is of the following type:

typealias UNProgramDetailsComponentCallbacks = (callback: UNProgramDetailsComponentCallback) -> Unit

The UNProgramDetailsComponentCallback is sealed class that has the following callbacks that you can receive from a ProgramDetails component:

sealed class UNProgramDetailsComponentCallback {
    data class OnLoad(val onLoadResult: Result<UNAccountData>): UNProgramDetailsComponentCallback()
}

To get the ProgramDetails Component fragment, call the getProgramDetailsComponent method of UnitComponentsSdk.manager.ui.views.

Example:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import androidx.fragment.app.Fragment
import co.unit.un_components.api.UnitComponentsSdk
import co.unit.un_components.common.builders.UNProgramDetailsViewSettingsBuilder
import co.unit.un_components.common.enums.UNProgramDetailsComponentCallback
import co.unit.un_components.components.UNProgramDetailsComponent

class ProgramDetailsFragment : Fragment(){
    override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        private var unProgramDetailsComponent: UNProgramDetailsComponent? = null

        unProgramDetailsView = UnitComponentsSdk.manager.ui.views.getProgramDetailsComponent(
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when(callback) {
                is UNProgramDetailsComponentCallback.OnLoad -> handleUnitOnLoad(callback.onLoadResult)
            }
        }

        val fragmentLayout = inflater.inflate(R.layout.FILE_NAME, container, false)
        childFragmentManager.beginTransaction()
            .replace(R.id.CONTAINER_NAME, unProgramDetailsComponent as Fragment)
            .commitNow()
        return fragmentLayout
    }
    // ...
    // Event handlers
    // ...
}

The additionalSettings parameter for UNProgramDetailsComponent has this attribute:

UNProgramDetailsViewSettingsInterface

Name	Type	Default Value	Description
hideTitle	Boolean	false	Hide the component title in case value is 'true'.

You can use UNProgramDetailsViewSettingsBuilder() to create an instance of the interface and define your additional settings.

val additionalSettings = UNProgramDetailsViewSettingsBuilder()
    .hideTitle(...)

unProgramDetailsComponent = UnitComponentsSdk.manager.ui.views.getProgramDetailsComponent(
    additionalSettings = additionalSettings,
    theme = YOUR_THEME_URL,
    language = YOUR_LANGUAGE_URL
)

IOS SDK

Component name: UNProgramDetailsComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	NO	Unit account id. The account from which money is being sent.
additionalSettings	UNProgramDetailsViewSettingsProtocol	NO	Advanced optional settings.
callbacks	UNProgramDetailsComponentCallbacks	NO	Callbacks to interact with the Program Details component.
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.

The callbacks parameter for UNProgramDetailsComponentCallback is of the following type:

public typealias UNProgramDetailsComponentCallbacks = (_ callback: UNProgramDetailsComponentCallback) -> Void

The UNProgramDetailsComponentCallback is an enum that has the following callbacks that you can receive from a Program Details component:

public enum UNProgramDetailsComponentCallback {
    case unitOnLoad(result: Result<UNAccountData, UNError>)
}

To get the Program Details Component view, call the getProgramDetailsComponent method of UnitSDK.manager.ui.views.

Example:

class ProgramDetailsScreen: UIViewController {
    fileprivate lazy var programDetailsComponent: UNProgramDetailsView = {
        let unViews = UnitSDK.manager.ui.views

        return unViews.getProgramDetailsComponent(accountId: "424242") { callback in
            switch callback {
            case .unitOnLoad(let result):
                print("UnitOnLoad response: \(result)")
            default:
                break
            }
        }
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the ProgramDetails component as a subview - using SnapKit for example
        self.view.addSubview(programDetailsComponent)
        programDetailsComponent.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.leading.trailing.equalToSuperview()
        }
    }
}

The additionalSettings parameter for UNProgramDetailsComponent is of the following type:

UNProgramDetailsViewSettingsProtocol:

Name	Type	Default Value	Description
hideTitle	Bool	false	Hide the component title in case value is true.

You can use UNProgramDetailsViewSettingsBuilder to create an instance of the protocol and define your additional settings.

Example:

let additionalSettings = UNProgramDetailsViewSettingsBuilder()
    .hideTitle(true)

let unViews = UnitSDK.manager.ui.views
let programDetailsComponent = unViews.getProgramDetailsComponent(additionalSettings: additionalSettings)