在iOS应用开发中，内嵌HTML5页面完成支付是常见需求，核心是通过iOS原生端和H5页面的交互，实现支付参数传递、支付流程触发和结果回传。整个过程需要结合WebView加载H5页面，以及JS和原生代码的交互能力完成对接。
iOS调用HTML5支付的核心流程
整体对接流程分为四个核心步骤，分别是H5页面准备、iOS端WebView配置、JS交互桥接实现、支付结果处理，下面逐一展开说明。
1. H5支付页面准备
H5端需要先完成支付接口的对接，在用户触发支付时，将支付所需的核心参数传递给iOS原生端，或者由原生端主动获取H5的支付参数。H5页面中需要定义好和原生端交互的JS方法，示例如下：
<!-- H5支付页面核心代码 -->
<script>
// 触发支付时调用的方法，将支付参数传递给iOS原生
function triggerPay() {
// 支付参数，实际开发中由后端接口返回
const payParams = {
orderId: "20240520001",
amount: "99.00",
payType: "wechat"
};
// 调用iOS原生注册的方法，传递支付参数
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.payHandler) {
window.webkit.messageHandlers.payHandler.postMessage(payParams);
}
}
// 接收iOS原生返回的支付结果
function receivePayResult(result) {
if (result.code === 0) {
alert("支付成功");
} else {
alert("支付失败：" + result.msg);
}
}
</script>
<button onclick="triggerPay()">发起支付</button>
2. iOS端WebView配置
iOS端需要使用WKWebView加载H5支付页面，同时配置好JS交互的控制器。如果是iOS 8及以上系统，推荐使用WKWebView，性能比早期的UIWebView更好，交互也更稳定。配置示例代码如下：
// 导入所需头文件
#import <WebKit/WebKit.h>
@interface PayViewController () <WKScriptMessageHandler, WKNavigationDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end
@implementation PayViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 配置WKWebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 添加JS交互的消息处理器，名称要和H5中调用的名称一致
[config.userContentController addScriptMessageHandler:self name:@"payHandler"];
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];
// 加载H5支付页面，实际地址替换为你的H5页面地址
NSURL *url = [NSURL URLWithString:@"https://ipipp.com/pay_page.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
// 页面销毁时移除消息处理器，避免内存泄漏
- (void)dealloc {
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"payHandler"];
}
@end
3. JS交互桥接实现
实现WKScriptMessageHandler协议的方法，接收H5传递过来的支付参数，然后调用原生支付SDK完成支付流程。示例代码如下：
// 接收H5传递的消息
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"payHandler"]) {
// 获取H5传递的支付参数
NSDictionary *payParams = message.body;
NSString *orderId = payParams[@"orderId"];
NSString *amount = payParams[@"amount"];
NSString *payType = payParams[@"payType"];
// 调用对应的支付SDK，这里以微信支付为例，实际根据接入的支付渠道调整
[self startWechatPayWithOrderId:orderId amount:amount];
}
}
// 微信支付调用示例
- (void)startWechatPayWithOrderId:(NSString *)orderId amount:(NSString *)amount {
// 实际开发中这里调用后端接口获取支付签名等参数，再调起微信SDK
// 支付成功或失败后，回调到对应的方法
// 假设支付完成后调用回调方法
[self handlePayResult:@{@"code": @0, @"msg": @"支付成功"}];
}
4. 支付结果回传H5
原生端支付完成后，需要将支付结果回传给H5页面，让H5页面更新展示状态。可以通过WKWebView的evaluateJavaScript方法调用H5中定义的JS函数，传递结果参数。示例代码如下：
// 处理支付结果并回传给H5
- (void)handlePayResult:(NSDictionary *)result {
NSError *error;
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:result options:0 error:&error];
if (!error) {
NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
// 调用H5中定义的receivePayResult方法，传递结果
NSString *jsStr = [NSString stringWithFormat:@"receivePayResult(%@)", jsonString];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (error) {
NSLog(@"回传支付结果失败：%@", error.localizedDescription);
}
}];
}
}
对接常见问题及解决方法
- JS交互无响应：检查H5中调用的消息名称是否和iOS端注册的名称完全一致，iOS端是否在页面销毁时正确移除了消息处理器，避免内存泄漏导致交互失效。
- 支付参数传递错误：确认H5传递的参数格式是原生端可解析的，比如JSON对象，避免传递特殊字符导致解析失败。
- 支付完成后H5无更新：检查回传结果的JS方法名称是否和H5中定义的一致，JSON字符串的格式是否正确，特殊字符是否做了转义处理。
注意事项
如果H5支付页面需要兼容iOS和安卓两端，建议在H5中做环境判断，针对不同端调用对应的交互方法。另外，支付相关的参数不要在前端明文存储，敏感信息尽量由后端接口返回，保障支付安全。如果使用的是第三方支付平台，需要严格按照对应平台的接入文档配置回调地址和参数，避免出现支付状态不同步的问题。
iOSHTML5支付支付接口调用WebViewJavaScriptCore修改时间：2026-07-11 08:12:37