Apple Pay 与 Angular 集成

Question

我想将 ApplePay 和 GooglePay 集成到我们的 Angular 应用程序中。

对于GooglePay，google 提供了一个有用的npm 包。https://www.npmjs.com/package/@google-pay/button-angular

我试图为 ApplePay 寻找类似的优质套餐，但没有找到。

我想在 Angular 上实现 ApplePay。有两种方法可以实现它（JS API 和 Payment Request API），我想使用 API 方法，因为我想在服务器端进行尽可能多的处理。通过查看以下页面，很难理解 JS API 和 Payment Request API 之间的区别。 https://applepaydemo.apple.com/

令人惊讶的是，我找不到任何 Angular 使用 ApplePay 的示例代码。我不敢相信以前没有人在 Angular 上使用过 ApplePay。可能还有另一种/更好的方法吗？

在 Angular 中，获取窗口实例甚至很棘手。我已经尝试了这个问题中的解决方案，并设法使用服务提供商注入窗口实例。我可以在适当的设备上显示 ApplePay 按钮，但在调用 ApplePaySession 对象时出现以下错误。显然注入的窗口不是顶级窗口。

错误：尝试从安全源与其顶级框架不同的文档启动 Apple Pay 会话。

根据WebKit 代码，这是它返回错误但不确定如何解决它的时候。

 if (!ancestorDocument->securityOrigin().isSameSchemeHostPort(topOrigin))
      return Exception { InvalidAccessError, "Trying to start an Apple Pay session from a document with an different security origin than its top-level frame." };

有没有人在 Angular 上尝试过 ApplePay 或者有关于如何绑定到 Angular 验证事件的示例代码吗？谢谢。

Answer 1

如果你想要一个支持两种支付类型的包，我找到了 Angular 的 NPM 包ng-wallet。但是，我不建议使用非官方发行商的软件包。ng-wallet的发布者可能不会维护 Google/Apple API 更改。

如果您计划长期维护 Angular 应用程序，建议使用由 Google/Apple 定期维护的软件包：

• Google Pay - 使用适用于 Angular 的官方Google Pay包。
• Apple Pay - Apple 尚未发布 Apple Pay 的 NPM 包。使用第三方发行商的软件包可能会导致上述问题。您最好的选择是使用他们的Apple Pay JS API自行实现。

请记住，Apple 仅在 Safari 上支持 ApplePay。