将 Google 支付按钮和 Apple 支付按钮集成到 react-native 应用程序中

Posted 2023-04-18

【中文标题】将 Google 支付按钮和 Apple 支付按钮集成到 react-native 应用程序中

【英文标题】：Integrating Google pay buttons and Apple pay buttons into react-native application

【发布时间】：2020-02-02 22:50:33

【问题描述】：

我一直在到处寻找如何集成 Apple (PkPaymentButton) 和 Google Pay (https://developers.google.com/pay/api/web/guides/brand-guidelines#payment-buttons) 提供的原生资产，而无需编写自己的原生模块。

我发现这两个包含在 react-native-GPay 库和 react-native-payment 库中（PKPaymentButton 的接口）。 问题是，我已经在使用另一个库来处理 Apple pay 和 Google pay (tipsi-stripe)，它不提供本机按钮的界面，我不想包含这两个库只是为了使用他们的原生按钮实现。

我还想尊重苹果/谷歌品牌设计指南。它们非常具体： - 不要创建您自己的 Google Pay 按钮或以任何方式更改按钮内的字体、颜色、按钮半径或填充。 - 不要创建自己的 Apple Pay 按钮设计或尝试模仿系统提供的按钮设计。

在我所见的任何地方，似乎人们提供有关如何在 react-native 应用程序中实现 googlepay/apple pay 的教程并不关心品牌指南（他们使用简单的 TouchableOpacity 和一些文本，触发支付接口） 而且我找不到任何只实现按钮 UI 的 react-native 模块

也许我遗漏了一些非常明显的东西（这是我第一次实现这些功能），但是是否有任何 react-native 模块只为原生按钮资产提供接口，而不实现整个支付库？创建一个可以做到这一点的 react-native 模块是否有用？

【参考方案1】：

我也有同样的情况，除了我在项目中没有使用来自tipsi-stripe的GPay，我只是在ios上将它用于Apple Pay。如果它可以帮助你，这是我最近发布的 repo，它将原生 Apple Pay 按钮暴露给 React Native： Apple Pay button for RN

关于android，由于我不熟悉原生Android，所以我没有包含它。我希望有人也会添加它，或者tipsi-will stripe 会包含它。

【讨论】：

您好！我不小心掉到了您的存储库上，并在想“这正是我 6 个月前所寻找的！”，然后我看到了您的评论，非常感谢您的工作！

对于谷歌支付按钮，我基于这个存储库的谷歌支付按钮功能做了一个自定义的原生实现（因为它在我下载它的时候没有工作，从那以后就没有再尝试过）： github.com/hellochirag/react-native-GPay