Hyperwallet UI SDK
注意:这是一个可用于您移动应用的测试版产品。如果您有兴趣使用此产品,请通知您的客户经理和/或项目经理以在集成过程中支持您。
欢迎使用 Hyperwallet 的 iOS UI SDK。此开箱即用的库将帮助您在 iOS 应用中创建转账方式,例如银行账户、PayPal 账户等。
请注意,此 SDK 适用于需要后端数据和 UI 功能的用户。如果您决定自己构建 UI,请参阅 Hyperwallet iOS Core SDK。
必备条件
- Hyperwallet 商户账户
- 设置您的服务器以在 Hyperwallet 平台上管理用户的身份验证过程。有关更多信息,请参阅 身份验证 部分。
- iOS 13.0+
- Xcode 10.2+
- Swift 5.0
依赖关系
安装
使用Carthage或CocoaPods集成到HyperwalletSDK。目前,以下模块可用
- TransferMethod - 列出、添加或删除转账方式
- Transfer - 从用户账户或预付卡创建转账到用户的可用账户
- Receipt - 列出用户/预付卡收据 添加其中一个或多个框架允许用户探索特定功能。如果需要所有功能,应添加所有框架
Carthage
在Cartfile中指定它
github "hyperwallet/hyperwallet-ios-ui-sdk" "1.0.0-beta18"
使用Linked Frameworks and Libraries
选项添加所需的模块,以便在应用程序中可用。使用import <module-name>
在文件中添加依赖项
CocoaPods
- 安装特定的框架(根据需求安装一个或多个框架)
pod "HyperwalletUISDK/TransferMethod", "1.0.0-beta18"
pod "HyperwalletUISDK/Transfer", "1.0.0-beta18"
pod "HyperwalletUISDK/Receipt", "1.0.0-beta18"
- 要安装所有可用模块(TransferMethod,Transfer,Receipt)
pod 'HyperwalletUISDK', '~> 1.0.0-beta18'
使用import HyperwalletUISDK
在文件中添加依赖项。
初始化
安装SDK之后,您需要初始化一个实例来使用SDK的核心功能。同时,您需要提供一个HyperwalletAuthenticationTokenProvider对象来获取身份验证令牌。
设置UI样式
HyperwalletUISDK为所有模块(例如TransferMethod、Receipt)提供了默认主题。如果您导入了HyperwalletUISDK,为了应用默认主题,您需要调用ThemeManager.applyTheme()
,这将把基本主题应用到ProcessingView和SpinnerView。如果您想要自定义UINavigationBar的主题,添加ThemeManager.applyToUINavigationBar()
。例如
...
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Optional - Define the HyperwalletUISDK on the `Theme` object. See the section `Customize the visual style`.
// Set the default tint color
window?.tintColor = .systemBlue
// Avoid to display a black area during the view transaction in the UINavigationBar.
window?.backgroundColor = Theme.UITableViewController.backgroundColor
// Apply basic theme
ThemeManager.applyTheme()
return true
}
}
您也可以根据需求自定义默认主题。请参阅[自定义视觉样式](#Customize the visual style)获取详细信息。
设置认证
在头部添加
import HyperwalletUISDK
使用HyperwalletAuthenticationTokenProvider
实现实例初始化HyperwalletUISDK
HyperwalletUI.setup(_ :HyperwalletAuthenticationTokenProvider)
认证
您的服务器端应能够向Hyperwallet端点/rest/v3/users/{user-token}/authentication-token
发送POST请求以检索身份验证令牌。然后,您需要提供一个类(一个身份验证提供者),实现HyperwalletAuthenticationTokenProvider接口以从您的服务器检索身份验证令牌。
使用Swift Foundation中的URLRequest
的示例实现
public struct AuthenticationTokenProviders: HyperwalletAuthenticationTokenProvider {
private let url = URL(string: "http://your/server/to/retrieve/authenticationToken")!
public func retrieveAuthenticationToken(
completionHandler: @escaping HyperwalletAuthenticationTokenProvider.CompletionHandler) {
var request = URLRequest(url: url)
request.httpMethod = "POST"
request.addValue("application/json", forHTTPHeaderField: "Content-Type")
let defaultSession = URLSession(configuration: .default)
let task = defaultSession.dataTask(with: request) {(data, response, error) in
DispatchQueue.main.async {
guard let data = data,
let clientToken = String(data: data, encoding: .utf8),
let response = response as? HTTPURLResponse else {
completionHandler(nil, HyperwalletAuthenticationErrorType.unexpected(error?.localizedDescription ??
"authentication token cannot be retrieved"))
return
}
switch response.statusCode {
case 200 ..< 300:
completionHandler(clientToken, nil)
default:
completionHandler(nil, HyperwalletAuthenticationErrorType
.unexpected("authentication token cannot be retrieved"))
}
}
}
task.resume()
}
}
用法
完成身份验证后,UI SDK中的函数可投入使用。
用户的转账方式(银行账户、信用卡、PayPal账户、预付卡、纸质支票)
在头部添加
import HyperwalletSDK
import HyperwalletUISDK
列出用户的转账方式
用户可以停用或添加新的转账方式。
let coordinator = HyperwalletUI.shared.listTransferMethodCoordinator(parentController: self)
coordinator.navigate()
根据国家和货币选择可用的转账方式类型
let coordinator = HyperwalletUI.shared.selectTransferMethodTypeCoordinator(parentController: self)
coordinator.navigate()
此外,添加以下方法以关闭显示的视图并根据创建的转账方式执行任何操作。
override public func didFlowComplete(with response: Any) {
if let transferMethod = response as? HyperwalletTransferMethod {
navigationController?.popViewController(animated: false)
}
}
创建转账方式
表单字段基于国家、货币、用户个人资料类型和转账方式类型。应将这些值传递给此方法以创建新的转账方式。
let coordinator = HyperwalletUI.shared.addTransferMethodCoordinator(
"US", // The 2 letter ISO 3166-1 country code.
"USD", // The 3 letter ISO 4217-1 currency code.
"INDIVIDUAL", // The profile type. Possible values - INDIVIDUAL, BUSINESS.
"BANK_ACCOUNT", // The transfer method type. Possible values - BANK_ACCOUNT, BANK_CARD, PAYPAL_ACCOUNT
parentController: self)
coordinator.navigate()
此外,在成功创建转账方式后,添加以下方法以关闭显示的视图并根据创建的转账方式执行任何操作。
override public func didFlowComplete(with response: Any) {
if let transferMethod = response as? HyperwalletTransferMethod {
navigationController?.popViewController(animated: false)
}
}
更新转账方式
let coordinator = HyperwalletUI.shared.updateTransferMethodCoordinator(
"your-transfer-method-token", // The transfer method token
parentController: self)
coordinator.navigate()
列出用户收据
let coordinator = HyperwalletUI.shared.listUserReceiptCoordinator(parentController: self)
coordinator.navigate()
列出预付卡的收据
let coordinator = HyperwalletUI.shared.listPrepaidCardReceiptCoordinator(parentController: self, prepaidCardToken: "your-prepaid-card-token")
coordinator.navigate()
列出所有可用来源的收据
let coordinator = HyperwalletUI.shared.listAllAvailableSourcesReceiptCoordinator(parentController: self)
coordinator.navigate()
从用户账户中发起新转账
为了在转账模块中添加新的转账方式,需要在应用程序中将TransferMethod模块添加为依赖项。如果未添加TransferMethod模块,则用户无法在转账流程中添加新的转账方式。
let clientTransferId = UUID().uuidString.lowercased()
let coordinator = HyperwalletUI.shared
.createTransferFromUserCoordinator(clientTransferId: clientTransferId, parentController: self)
coordinator.navigate()
还需要添加以下方法,以便在成功创建转账后关闭显示的视图并根据创建的转账执行任何操作。
override public func didFlowComplete(with response: Any) {
if let statusTransition = response as? HyperwalletStatusTransition, let transition = statusTransition.transition {
if transition == HyperwalletStatusTransition.Status.scheduled {
navigationController?.popViewController(animated: false)
}
}
}
从预付卡中发起新转账
let clientTransferId = UUID().uuidString.lowercased()
let coordinator = HyperwalletUI.shared
.createTransferFromPrepaidCardCoordinator(clientTransferId: clientTransferId,
sourceToken: "your-prepaid-card-token",
parentController: self)
coordinator.navigate()
还需要添加以下方法,以便在成功创建转账后关闭显示的视图并根据创建的转账执行任何操作。
override public func didFlowComplete(with response: Any) {
if let statusTransition = response as? HyperwalletStatusTransition, let transition = statusTransition.transition {
if transition == HyperwalletStatusTransition.Status.scheduled {
navigationController?.popViewController(animated: false)
}
}
}
显示所有可用来源以满足新的转账需求。用户可以从中选择转账来源并从该来源发起新的转账
let clientTransferId = UUID().uuidString.lowercased()
let coordinator = HyperwalletUI.shared
.createTransferFromAllAvailableSourcesCoordinator(clientTransferId: clientTransferId,
parentController: self)
coordinator.navigate()
还需要添加以下方法,以便在成功创建转账后关闭显示的视图并根据创建的转账执行任何操作。
override public func didFlowComplete(with response: Any) {
if let statusTransition = response as? HyperwalletStatusTransition, let transition = statusTransition.transition {
if transition == HyperwalletStatusTransition.Status.scheduled {
navigationController?.popViewController(animated: false)
}
}
}
NotificationCenter Events
通知名称 | 描述 |
---|---|
Notification.Name.transferMethodAdded | 新转账方式(银行账户、银行卡、PayPal账户、预付卡、纸质支票)已创建时发布。 |
Notification.Name.transferMethodDeactivated | 转账方式(银行账户、银行卡、PayPal账户、预付卡、纸质支票)已停用时发布。 |
Notification.Name.transferCreated | 资金转账已创建时发布。 |
Notification.Name.transferScheduled | 当资金转账已计划时发布。 |
Notification.Name.authenticationError | 当 SDK 无法从客户端实现中获取新的身份验证令牌时发布。客户端可以选择在接收到此通知时关闭应用程序/登出/导航到其他屏幕。 |
当对象将自己添加为观察者时,它指定应接收哪些通知。因此,一个对象可能需要多次调用此方法,以便将自己注册为多个不同通知的观察者。
Notification.Name.transferMethodAdded
如何使用 override public func viewDidLoad() {
super.viewDidLoad()
...
NotificationCenter.default.addObserver(self,
selector: #selector(didCreateNewTransferMethodNotification(notification:)),
name: Notification.Name.transferMethodAdded, object: nil)
}
@objc func didCreateNewTransferMethodNotification(notification: Notification) {
if let transferMethod = notification.userInfo![UserInfo.transferMethodAdded] as? HyperwalletTransferMethod {
// A new transfer method has been created
}
}
Notification.Name.transferMethodDeactivated
如何使用 override public func viewDidLoad() {
super.viewDidLoad()
...
NotificationCenter.default.addObserver(self,
selector: #selector(didTransferMethodDeactivatedNotification(notification:)),
name: Notification.Name.transferMethodDeactivated, object: nil)
}
@objc func didTransferMethodDeactivatedNotification(notification: Notification) {
if let statusTransition = notification.userInfo![UserInfo.transferMethodDeactivated] as? HyperwalletStatusTransition {
// A transfer method has been deactivated.
}
}
Notification.Name.transferCreated
如何使用 override public func viewDidLoad() {
super.viewDidLoad()
...
NotificationCenter.default.addObserver(self,
selector: #selector(didTransferCreatedNotification(notification:)),
name: Notification.Name.transferCreated, object: nil)
}
@objc func didTransferCreatedNotification(notification: Notification) {
if let transfer = notification.userInfo![UserInfo.transferCreated] as? HyperwalletTransfer {
// A transfer has been created.
}
}
Notification.Name.transferScheduled
如何使用 override public func viewDidLoad() {
super.viewDidLoad()
...
NotificationCenter.default.addObserver(self,
selector: #selector(didTransferScheduledNotification(notification:)),
name: Notification.Name.transferScheduled, object: nil)
}
@objc func didTransferScheduledNotification(notification: Notification) {
if let statusTransition = notification.userInfo![UserInfo.transferScheduled] as? HyperwalletStatusTransition {
// A transfer has been scheduled.
}
}
Notification.Name.authenticationError
如何使用 override public func viewDidLoad() {
super.viewDidLoad()
...
NotificationCenter.default.addObserver(self,
selector: #selector(didAuthenticationErrorOccur(notification:)),
name: Notification.Name.authenticationError, object: nil)
}
@objc func didAuthenticationErrorOccur(notification: Notification) {
// Logout/ navigate to any other screen
}
自定义视觉样式
UI SDK 旨在使 UI 风格化过程尽可能简单。`Theme.swift` 对象负责 UI 自定义。
使用 `application(_:didFinishLaunchingWithOptions:)` 方法自定义 SDK 的用户界面。
可以在 Theme 中自定义以下属性
属性 | 默认值 | 描述 |
---|---|---|
Theme.themeColor |
0x00AFD0 |
主色调 |
Theme.tintColor |
UIColor.white |
着色色 |
Theme.Label.color |
UIColor(rgb: 0x2C2E2F) |
标签主要颜色 |
Theme.Label.errorColor |
0xFF3B30 |
错误突出显示颜色 |
Theme.Label.subtitleColor |
UIColor(rgb: 0x3c3c43, alpha: 0.6) |
副标题颜色 |
Theme.Label.textColor |
0x8e8e93 |
文字颜色 |
Theme.Label.titleFont |
UIFont.preferredFont(forTextStyle: .body) |
标题字体样式 |
Theme.Label.subtitleFont |
UIFont.preferredFont(forTextStyle: .subheadline) |
副标题字体样式 |
Theme.Label.footnoteFont |
UIFont.preferredFont(forTextStyle: .footnote) |
注脚字体样式 |
Theme.Label.textSelectionColor |
UIColor(rgb: 0x00AFD0).withAlphaComponent(0.14) |
文字选择颜色 |
Theme.NavigationBar.barStyle |
UIBarStyle.default |
UINavigationBar 的栏样式。 |
Theme.NavigationBar.isTranslucent |
false |
设置不透明背景颜色 |
Theme.NavigationBar.shadowColor |
UIColor.clear |
NavigationBar 阴影颜色 |
Theme.NavigationBar.largeTitleColor |
UIColor.white |
UINavigationBar 大标题颜色 |
Theme.NavigationBar.titleColor |
UIColor.white |
UINavigationBar 标题颜色 |
Theme.NavigationBar.backButtonColor |
UIColor.white |
UINavigationBar 返回按钮颜色 |
Theme.NavigationBar.largeTitleFont |
UIFont.preferredFont(forTextStyle: .largeTitle) |
UINavigationBar 大标题字体 |
Theme.NavigationBar.titleFont |
UIFont.preferredFont(forTextStyle: .body) |
UINavigationBar 标题字体 |
Theme.Button.color |
UIColor(rgb: 0xFFFFFF) |
按钮主要颜色 |
Theme.Button.linkColor |
Theme.themeColor |
按钮链接颜色 |
Theme.Button.font |
Theme.Label.bodyFont |
按钮字体 |
Theme.Button.linkFont |
Theme.Label.titleFont |
链接按钮字体 |
Theme.Button.backgroundColor |
Theme.themeColor |
按钮背景颜色 |
Theme.Text.font |
UIFont.preferredFont(forTextStyle: .body) |
文字字体样式 |
Theme.Text.labelFont |
Theme.Label.titleFont |
文字标签字体样式 |
Theme.Text.color |
Theme.Label.color |
文字主要颜色 |
Theme.Text.labelColor |
Theme.Label.color |
文字标签主要颜色 |
Theme.Text.disabledColor |
Theme.Label.textColor |
文本禁用颜色 |
Theme.Cell.smallHeight |
61 |
常见的 UITableViewCell 高度。 |
Theme.Cell.height |
80 |
常见的 UITableViewCell 高度。 |
Theme.Cell.largeHeight |
88 |
列表传输方法项和选择传输方法类型项的 UITableViewCell 高度。 |
Theme.Cell.headerHeight |
37 |
选择传输方法类型项的头部高度。 |
Theme.Cell.dividerHeight |
8 |
分隔符的 UITableViewCell 高度。 |
Theme.Cell.separatorColor |
UIColor(rgb: 0x3c3c43, alpha: 0.29) |
UITableViewCell 的分隔符颜色。 |
Theme.Cell.tintColor |
UIColor.white |
UITableViewCell 的调色色。 |
Theme.Icon.size |
30 |
图标字体大小 |
Theme.Icon.frame |
CGSize(width: 30, height: 30) |
图标框架 |
Theme.Icon.primaryColor |
Theme.themeColor |
图标主色 |
Theme.Icon.creditColor |
Amount.creditColor |
图标贷记颜色 |
Theme.Icon.debitColor |
Amount.debitColor |
图标借记颜色 |
Theme.Amount.creditColor |
UIColor(rgb: 0x299976) |
贷记颜色 |
Theme.Amount.debitColor |
Theme.Label.color |
借记颜色 |
Theme.ViewController.backgroundColor |
UIColor.white |
UIViewController 的背景颜色。 |
Theme.SpinnerView.activityIndicatorViewStyle |
UIActivityIndicatorView.Style.whiteLarge |
UIActivityIndicatorView 的样式。 |
Theme.SpinnerView.activityIndicatorViewColor |
Theme.themeColor |
UIActivityIndicatorView 的颜色。 |
Theme.SpinnerView.backgroundColor |
UIColor.clear |
背景颜色 |
Theme.ProcessingView.backgroundColor |
UIColor.black.withAlphaComponent(0.85) |
背景颜色。 |
Theme.ProcessingView.stateLabelColor |
UIColor.white |
状态标签颜色。 |
示例:在 AppDelegate 类中定义亮色主题代码
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
ThemeManager.applyWhiteTheme()
// Set the default tint color
window?.tintColor = .systemBlue
// Avoid to display a black area during the view transaction in the UINavigationBar.
window?.backgroundColor = Theme.UITableViewController.backgroundColor
return true
}
}
示例:自定义标签颜色
...
/// Labels
Theme.Label.color = UIColor(red: 252 / 255, green: 67 / 255, blue: 77 / 255, alpha: 1)
Theme.Label.subTitleColor = UIColor(red: 19 / 255, green: 165 / 255, blue: 185 / 255, alpha: 1)
Theme.Label.textColor = UIColor(red: 0 / 255, green: 45 / 255, blue: 67 / 255, alpha: 1)
Theme.Label.errorColor = .red
注意:如果您不使用 ThemeManager.applyToUINavigationBar()
,那么对 Theme.NavigationBar.xxx 的任何更改都不会反映出来。
错误处理
在 Hyperwallet UI SDK 中,我们将 HyperwalletException 分为三大类,分别是输入错误(业务错误)、网络错误和意外错误。
意外错误
一旦发生意外错误,界面中会显示只包含 OK
按钮的 AlertView。
网络错误
网络错误通常是由于连接问题,例如网络连接质量差、从服务器端的请求超时等原因造成的。一旦发生网络错误,UI界面中会显示一个包含“取消”和“重试”按钮的AlertView。
业务错误
当Hyperwallet平台发现无效信息或与数据相关的某些业务限制已被提交并需要用户采取一些行动时,会发生业务错误。
认证错误
认证错误发生在Hyperwallet SDK无法从客户端实现中获取认证令牌时。
许可
Hyperwallet iOS SDK是开源的,可在MIT许可下使用