在应用程序侧集成SDK
完成SDK的安装和初始化后：
- 通过指定支付方式ID和重定向URL来初始化支付UI：
headlessCheckout.form.init方法返回一个用于与支付UI进行后续交互的对象。- 重定向URL用于重定向用户，例如在完成3-D Secure验证后。
Copy
- typescript
await headlessCheckout.form.init({
paymentMethodId: ID,
returnUrl: 'returnUrl',
});
- 在支付UI的HTML标记中添加以下组件：
- 必需组件：
psdk-legal— 用于显示法律文件信息。psdk-total— 用于显示总购买金额。
- 支付表单组件。您可以使用内置的
psdk-payment-form组件，也可以使用现成的组件手动创建支付UI元素。 - 支付按钮组件 —
psdk-submit-button。
- 必需组件：
Copy
- html
<psdk-legal></psdk-legal>
<psdk-total></psdk-total>
<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>
- 添加
check_status事件处理以监听支付状态变化。
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'check_status': {
showStatus = true;
}
}
});
- 在支付UI的HTML标记中添加
psdk-status组件以显示支付状态。
Copy
- html
@if (showStatus) {
<psdk-status></psdk-status>
}
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
