根据条件在 PWA 中显示地址栏

Question

我正在通过 PWA 应用中的智能按钮实现 PayPal 支付系统。我面临的问题是，默认情况下，在 PWA 中，地址栏是隐藏的，所以当 PayPal 的支付对话框打开时，它看起来好像是应用程序本身的对话框。这令人担忧，因为它不能让用户保证他们正在使用 PayPal 的系统并且他们的帐户是安全的。

如果我通过浏览器执行相同操作，则付款窗口会在单独的选项卡中打开，并显示 URL。

如何才能在应用程序上复制类似的行为，或者有没有办法在打开支付对话框时显示地址栏？

Screenshot of the dialog

Answer 1

我无法回答在 PWA 中显示地址栏的问题，但如果目标是让智能按钮打开新标签或重定向，解决方案是：不要使用智能按钮。

相反，在您的服务器上集成两条路由，一条用于“设置事务”，一条用于“捕获事务”，记录在此：https://developer.paypal.com/docs/checkout/reference/server-integration/

第一次调用将返回一个approval_url，您可以简单地重定向到（或打开一个完整的浏览器），而不是使用Smart Button JS。

在您打开的这个新窗口/标签/浏览器中通过 PayPal 批准后，退货将发送到您在设置时指定的 return_url，这可以是一个深层链接。

然后返回应该显示一个订单审查/确认页面（除非你想跳过这个，你应该用user_action: 'PAY_NOW'指定一个application_context对象，这样用户就可以点击正确的措辞了会做的。）

然后在此返回时——使用提供的查询字符串信息——运行第二个“捕获事务”调用。如果响应恰好是 INSTRUMENT_DECLINED，只需重新打开原始的approval_url，因为这种情况是可以恢复的（some details on the situation here，虽然演示和处理资金失败指南适用于智能按钮，但概念是相同的）。如果响应是成功或任何其他错误，则继续进行。