FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 小程序支付常见问题

由于 FinClip 小程序是运行在微信以外的集成了 FinClip SDK 的第三方APP,故不能使用原来在微信小程序中已经实现的微信支付;而是先让第三方 APP 接入微信支付的能力,然后再由小程序调起APP的微信支付能力,最后跳转至微信完成支付。

具体实现步骤如下:

image.png

# 1. APP 接入微信支付

首先APP需要接入微信支付能力:微信支付支持在开放平台 (opens new window)注册并完成认证的移动端应用APP接入支付功能。APP接入支付后,商户通过微信提供的SDK调用微信支付模块完成收款需求。

目前微信支付支持手机系统有:IOS(苹果)、Android(安卓)和WP(Windows Phone)。详情说明请参考微信支付APP接入介绍 (opens new window)指引文档 (opens new window)

# 2. APP 实现自定义注入接口

APP集成了微信支付的能力后,需要开发者注册自定义接口将支付能力注入至SDK中,让小程序能调用,详细说明如下。

# 2.1 Android端

注册自定义小程序接口的具体说明请参照FinClip小程序开放平台-自定义小程序接口 (opens new window)

  1. 自定义Api类,实现AbsApi接口,指定api名称为"requestPayment"。
public class WxPayApi extends AbsApi {

    private final Context context;

    public WxPayApi(Context context) {
        this.context = context;
    }

    private static final String API_NAME_REQUEST_PAYMENT = "requestPayment";

    @Override
    public String[] apis() {
        return new String[]{API_NAME_REQUEST_PAYMENT};
    }
    
    // ...
}


  1. 注册自定义Api类。
if (FinAppClient.INSTANCE.isFinAppProcess(this)) {
	return;
}

// SDK初始化结果回调,用于接收SDK初始化状态
FinCallback<Object> callback = new FinCallback<Object>() {
    @Override
    public void onSuccess(Object result) {
        // SDK初始化成功,注册自定义小程序接口
        FinAppClient.INSTANCE.getExtensionApiManager().registerApi(new WxPayApi(DemoApp.this));
    }

    // ...
};


  1. 实现自定义Api类invoke()方法,在invoke方法内调用后台下单接口,下单成功后调起微信支付。
@Override
public void invoke(String event, JSONObject param, ICallback callback) {
    if (API_NAME_REQUEST_PAYMENT.equals(event)) {
        IWXAPI wxApi = WXAPIFactory.createWXAPI(context, null);
        // 判断是否安装了微信
        if (!wxApi.isWXAppInstalled()) {
            JSONObject result = new JSONObject();
            try {
                result.put("errMsg", "WeChat not installed");
            } catch (JSONException e) {
                e.printStackTrace();
            }
            callback.onFail(result);
            return;
        }

        // 调用后台下单接口,拿到调起微信支付所需参数,此处省略,开发者请自行实现
        // ...

        PayReq request = new PayReq();
        request.appId = Constants.WX_APP_ID;
        request.partnerId = mchid;
        request.prepayId = prepayId;
        request.packageValue = "Sign=WXPay"; // 微信订单详情扩展字符串,暂填写固定值Sign=WXPay
        request.nonceStr = nonceStr; // 随机字符串,不长于32位
        request.timeStamp = timeStamp;
        request.sign = sign;
        wxApi.sendReq(request); // 调起微信支付
    }
}


  1. 在微信支付信息回调WXPayEntryActivity,结果回调方法内利用自定义api invoke方法参数callBack对象将支付结果返回给小程序。
public class WXPayEntryActivity extends Activity implements IWXAPIEventHandler {

    // ...

    @Override
    public void onResp(BaseResp resp) {
        if (resp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
            WxPayApi.notifyPayResult(resp.errCode);
            finish();
        }
    }

}

public class WxPayApi extends AbsApi {

    // ...

    private static ICallback callback;

    public static void notifyPayResult(int errCode) {
        if (callback != null) {
            if (errCode == 0) {
                callback.onSuccess(null);
            } else {
                JSONObject result = new JSONObject();
                try {
                    result.put("errCode", errCode);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                callback.onFail(result);
            }
            WxPayApi.callback = null;
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        callback = null;
    }

    @Override
    public void invoke(String event, JSONObject param, ICallback callback) {
        if (API_NAME_REQUEST_PAYMENT.equals(event)) {
            WxPayApi.callback = null;

            // ...
        }
    } 
}


  1. FinClip还提供了官方的安卓APP Demo 工程和小程序 (opens new window)作为示范,如有需求,您可以前往下载体验。

# 2.2 iOS 端

  1. 在原生App中调用SDK的注入requestPayment方法,requestPayment是微信小程序对应的支付方法名。
__weak typeof(self) weakSelf = self;
[[FATClient sharedClient] registerExtensionApi:@"requestPayment" handle:^(id param, FATExtensionApiCallback callback) {
    // 下单-支付调用,调用结果通过回调通告小程序
    [weakSelf getTestPayment:callback];
}];
  1. 模拟下单、支付
// 支付时,支付的回调是异步的,故这里将小程序的回调持有,在适当的时机调用(用户可根据自己的场景自行实现自己调用的逻辑)
@property (nonatomic, copy) FATExtensionApiCallback callback;
- (void)getTestPayment:(FATExtensionApiCallback)callback {
    NSString *urlString = @"https://xxx.xxx.com/api/order"; // 下单接口,模拟下单
    NSURL *url = [NSURL URLWithString:urlString];
    NSMutableURLRequest *requset = [NSMutableURLRequest requestWithURL:url];
    requset.HTTPMethod = @"POST";
    __weak typeof(self) weakSelf = self;
    NSURLSessionTask *task = [[NSURLSession sharedSession] dataTaskWithRequest:requset completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)response;
        if (httpResponse.statusCode == 200) {
            // 下单成功后,模拟微信支付
            PayReq *request = [[PayReq alloc] init];
            request.partnerId = @"partnerId";
            request.prepayId = @"prepayId";
            request.package = @"Sign=WXPay";
            request.nonceStr = @"nonceStr";
            request.timeStamp = 100000;
            request.sign= @"sign";
            dispatch_async(dispatch_get_main_queue(), ^{
                [WXApi sendReq:request completion:^(BOOL success) {
                    if (success) {
                        // 唤起微信成功时,将回调持有,方便后面使用(这里实现方式可以自行定义,此处只是模拟)
                        weakSelf.callback = callback;
                    } else {
                        // 唤起微信失败时,直接调用回调,传入失败
                        callback(FATExtensionCodeFailure, nil);
                    }
                }];
            });
            return;
        }
        callback(FATExtensionCodeFailure, nil);
    }];
    [task resume];
}
  1. 微信支付成功时,回调处理
#pragma mark - WXApiDelegate
//发起支付请求回调
- (void)onReq:(BaseReq *)req {
    
}

//支付结果回调
- (void)onResp:(BaseResp *)resp {
    if ([resp isKindOfClass:[PayResp class]]) {
        PayResp *response = (PayResp*)resp;
        //response.errCode
//        WXSuccess           = 0,    /**< 成功    */
//        WXErrCodeCommon     = -1,   /**< 普通错误类型    */
//        WXErrCodeUserCancel = -2,   /**< 用户点击取消并返回    */
//        WXErrCodeSentFail   = -3,   /**< 发送失败    */
//        WXErrCodeAuthDeny   = -4,   /**< 授权失败    */
//        WXErrCodeUnsupport  = -5,   /**< 微信不支持    */
        switch (response.errCode) {
            case WXSuccess: // 支付成功时,回调调用
                self.callback(FATExtensionCodeSuccess, nil);
                break;
                
            default:    // 支付失败时,回调调用
                self.callback(FATExtensionCodeFailure, nil);
                break;
        }
    }
}

请注意

小程序支付api requestPayment的回调,需要用户进行维护。因为支付功能是异步的,需要在支付成功或失败的回调中,调用小程序支付api requestPayment的回调。

这里伪代码使用当前类持有小程序支付api requestPayment的回调,在支付功能的回调中进行调用。用户可以根据自己的场景需求,使用其他技术进行处理。

  1. FinClip还提供了官方的iOS APP Demo 工程和小程序 (opens new window)作为示范,您可以前往下载体验。

# 3. 小程序实现接口的调用

移动端相关 api 准备好后,在小程序中使用代码如下:

// 小程序中调用代码
wx.requestPayment({
  success: (res) => {
    console.log('payment success', res)
  },
  fail: (res) => {
    console.log('payment fail', res.errMsg)
  }
})

# 4. 小程序接入支付宝支付

FinClip小程序接入支付宝支付的步骤与接入微信支付的步骤基本一致,此处不再赘述,APP接入支付宝支付请参考文档支付宝支付接入文档 (opens new window)

© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单