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