如何将Android原生代码封装为Titanium模块集成Square支付SDK

问题背景 #

使用Titanium开发移动应用，需集成Square移动端SDK生成银行卡支付的payment token，再将token发送至后端完成支付。Square仅提供原生Android/iOS集成方案，需通过自定义Titanium模块实现集成。

Android自定义模块实现步骤 #

1. 初始化Titanium Android模块项目 #

通过Titanium CLI创建模块项目：

ti create --type module --platform android --name squarepayments --id com.yourcompany.squarepayments

2. 集成Square In-App Payments SDK #

在模块的build.gradle文件中添加Square依赖：

dependencies {
    implementation 'com.squareup.sdk.in-app-payments:card-entry:1.5.1'
}

3. 编写模块核心逻辑 #

创建SquarePaymentsModule.java文件，实现SDK初始化、卡片输入界面调用及Token回调：

package com.yourcompany.squarepayments;

import org.appcelerator.kroll.KrollModule;
import org.appcelerator.kroll.annotations.Kroll;
import org.appcelerator.titanium.TiApplication;
import com.squareup.sdk.in-app-payments.CardEntry;
import com.squareup.sdk.in-app-payments.InAppPaymentsSdk;
import com.squareup.sdk.in-app-payments.models.CardTokenizationParameters;
import com.squareup.sdk.in-app-payments.models.CardTokenizationResult;
import java.util.HashMap;

@Kroll.module(name="Squarepayments", id="com.yourcompany.squarepayments")
public class SquarePaymentsModule extends KrollModule {

    private static final String SQUARE_APP_ID = "你的Square应用ID";

    @Kroll.onAppCreate
    public static void onAppCreate(TiApplication app) {
        // 初始化Square SDK
        InAppPaymentsSdk.initialize(app, SQUARE_APP_ID);
    }

    @Kroll.method
    public void startCardEntry() {
        CardTokenizationParameters params = CardTokenizationParameters.builder().build();

        CardEntry.startCardEntryActivity(TiApplication.getAppCurrentActivity(), params,
                (cardTokenizationResult) -> {
                    // 成功获取Token，回调至Titanium
                    fireEvent("tokenReceived", new HashMap<String, Object>() {{
                        put("token", cardTokenizationResult.getToken());
                    }});
                },
                (errorCode, errorMessage) -> {
                    // 错误回调
                    fireEvent("error", new HashMap<String, Object>() {{
                        put("code", errorCode);
                        put("message", errorMessage);
                    }});
                });
    }
}

4. 配置权限 #

在模块的AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS自定义模块实现步骤 #

1. 创建Titanium iOS模块项目 #

通过CLI生成模块：

ti create --type module --platform ios --name squarepayments --id com.yourcompany.squarepayments

2. 集成Square SDK #

在模块的Podfile中添加CocoaPods依赖：

pod 'SquareInAppPaymentsSDK'

执行pod install完成依赖安装。

3. 编写模块核心逻辑 #

创建SquarepaymentsModule.m文件：

#import "SquarepaymentsModule.h"
#import <SquareInAppPaymentsSDK/SquareInAppPaymentsSDK.h>

@implementation SquarepaymentsModule

NSString *const SQUARE_APP_ID = @"你的Square应用ID";

- (id)init
{
    self = [super init];
    if (self) {
        // 初始化Square SDK
        [SQIPInAppPaymentsSDK initializeWithApplicationID:SQUARE_APP_ID];
    }
    return self;
}

- (void)startCardEntry:(id)args
{
    SQIPCardEntryViewController *cardEntryVC = [[SQIPCardEntryViewController alloc] init];
    cardEntryVC.delegate = self;
    
    UIViewController *rootVC = [[[UIApplication sharedApplication] delegate] window].rootViewController;
    [rootVC presentViewController:cardEntryVC animated:YES completion:nil];
}

#pragma mark - SQIPCardEntryViewControllerDelegate
- (void)cardEntryViewController:(SQIPCardEntryViewController *)viewController didObtainCardToken:(SQIPCardToken *)cardToken
{
    // 发送Token回调
    [self fireEvent:@"tokenReceived" withObject:@{@"token": cardToken.token}];
    [viewController dismissViewControllerAnimated:YES completion:nil];
}

- (void)cardEntryViewController:(SQIPCardEntryViewController *)viewController didFailWithError:(NSError *)error
{
    // 错误回调
    [self fireEvent:@"error" withObject:@{@"code": @(error.code), @"message": error.localizedDescription}];
    [viewController dismissViewControllerAnimated:YES completion:nil];
}

@end

Titanium应用中使用模块 #

1. 引入模块 #

在tiapp.xml中声明模块：

<modules>
    <module platform="android">com.yourcompany.squarepayments</module>
    <module platform="ios">com.yourcompany.squarepayments</module>
</modules>

2. 调用模块代码示例 #

var squarePay = require('com.yourcompany.squarepayments');

// 监听Token获取成功事件
squarePay.addEventListener('tokenReceived', function(e) {
    Ti.API.info('获取到支付Token: ' + e.token);
    // 将Token发送至后端处理支付
    sendTokenToBackend(e.token);
});

// 监听错误事件
squarePay.addEventListener('error', function(e) {
    Ti.API.error('支付错误: ' + e.message + ' 错误码: ' + e.code);
    alert('支付失败: ' + e.message);
});

// 打开卡片输入界面
function openCardEntry() {
    squarePay.startCardEntry();
}

// 发送Token到后端的示例函数
function sendTokenToBackend(token) {
    var xhr = Ti.Network.createHTTPClient({
        onload: function() {
            Ti.API.info('后端支付处理完成');
            alert('支付成功');
        },
        onerror: function() {
            Ti.API.error('后端处理失败');
            alert('支付失败，请重试');
        },
        timeout: 10000
    });
    xhr.open('POST', '你的后端支付接口地址');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({paymentToken: token}));
}

内容的提问来源于stack exchange，提问作者Ankush