带重定向的电子钱包
带有重定向的电子钱包，如PayPal、Klarna和Skrill，会将用户重定向到支付系统网站进行授权和确认支付，之后用户会返回到卖家的网站。这种方法确保了支付安全性，因为卖家无法访问用户的支付数据。
以下说明使用PayPal作为示例，描述了如何配置Headless checkout以接受通过带重定向的电子钱包进行的支付。
创建支付状态页面，用户在完成PayPal支付后将被重定向到该页面。例如：
https://example.com/return-page.html。在支付UI的HTML标记中添加
psdk-status组件以显示支付状态。
示例：
Copy
- html
@if (showStatus) {
<psdk-status></psdk-status>
}
创建用于显示PayPal表单的页面。例如：
https://example.com/form-page.html。指定支付方式ID和状态页面URL来初始化支付UI。
示例：
Copy
- typescript
await headlessCheckout.form.init({
paymentMethodId: 24, // PayPal payment ID
returnUrl: 'https://example.com/return-page.html',
});
- 添加
redirect事件处理以将用户重定向到外部页面进行PayPal支付。完成购买后，用户将被重定向到支付状态页面(https://example.com/return-page.html)。
示例：
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'redirect':
this.handleRedirectAction(nextAction);
}
});
private handleRedirectAction(redirectAction: RedirectAction): void {
const url = this.buildRedirectUrl(redirectAction);
window.location.href = url; // redirect to PayPal page
}
private buildRedirectUrl(redirectAction: RedirectAction): string {
const url = new URL(redirectAction.data.redirect.redirectUrl);
const params = Object.entries(redirectAction.data.redirect.data);
params.forEach((entry) => {
const [key, value] = entry;
url.searchParams.append(key, value);
});
return url.toString();
}
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
