当Google Pay首次出现在俄罗斯时，我开了一个帐户，在那儿添加了一张卡，然后意识到我无能为力了。 我的手机没有NFC，也没有互联网支付的钱-好的，没关系。 最后，总是可以用手从卡上驱动数字或从浏览器密码存储中拉出数字。
然后，我看着排在我前面的其他人如何用智能手机付款； 然后我看到了无处不在使用Google Pay的广告和折扣，但仍然无法利用它-我仍然带着没有NFC的手机一起走。
现在已经到了。 现在，我可以在连接到Yandex.Cash的站点上的任何设备上通过Google Pay付款（其中有很多）。 我将告诉您它是如何发生的以及我们的开发人员必须解决哪些技术问题； 前端和后端都有很多有趣的东西。
只需添加API
“开发人员同志，有什么困难？”
-是的，我们刚刚在码头上添加了Google提供的图书馆。
这是我与收银员开发人员添加Google Pay的第一分钟对话（包括55秒钟的尴尬沉默）。 但是后来我并没有感到惊讶，我们发现了一些有趣的事情。
Google Pay更改了信用卡付款流程
现在，通过收银台，您可以使用任何信用卡付款，甚至在海外也可以。 像任何在线信用卡付款一样，它并不总是很方便-有时您需要去钱包，在黑暗中开车，检查任何地方都没有混乱。 为了使生活更轻松，您可以登录到Yandex并使用绑定卡付款。
我们实施了一项计划，使通过收银员进行的卡支付变得统一且有据可查。 如果您删除了所有复杂的路由和安全细微差别，则该方案如下所示：
- 用户选择商品，下订单并切换到付款表格Yandex.Cash。 您可以在此处输入任何卡的详细信息，或登录到Yandex以查看链接的卡。
- 有关所选付款方式的数据将发送到后端进行令牌化。 浏览器收到卡令牌并尝试使用它进行付款。
- 如果一切正常，后端将要求银行冻结卡上的金额，进行付款并返回其状态。 基于此，浏览器将重定向到成功页面或显示错误消息。
在不同阶段，终止流程的条件不同-无效的令牌，空帐户或关闭Internet-但逻辑保持不变。 在这种情况下，您可以在服务器上完全呈现页面，但是我将在下面讨论其难点。
对于Google Pay，您需要执行一些其他中间步骤。
首先，在选择付款方式和令牌化之间，有一个对Google API的调用-这是检查设备是否支持通过Google Pay付款的必要条件。 单击“付款”按钮后，将出现Google Pay Web界面，用户可以在其中登录，选择添加的卡之一或输入新卡的详细信息。
其次，谷歌提供了另一种安全保护措施。 浏览器不会直接接收详细信息，而是会收到一个密码，然后该密码转到后端进行标记化。 使用Google的密钥将其解密，然后参见步骤3。
当然，每个额外的步骤（甚至严格遵循文档）都是一个额外的开发和测试时间。 商家几乎无需执行任何操作，这真是太令人高兴了-通过Google Pay将付款连接到具有Yandex.Cash付款表格的任何网站都非常容易。 详细信息在收银员的网站上 。
在前端还发现了一个有趣的故事-与创意搜索，证据和用户体验有关。
付款页面上的Google Pay按钮
收银员的付款页面完全组装在服务器上-它从后端接收数据，通过模板引擎运行它，并为浏览器提供HTML，CSS和JavaScript代码。 因此，页面绘制速度更快-当所有数据准备就绪时，所有动态内容都通过客户端上的JS工作。
困难在于，只能通过Google的客户库确定客户的Google帐户是否添加了付款方式。 因此，必须在客户端上实现使用付款按钮绘制部分页面的逻辑。 经过短暂搜索后，找到了技术解决方案。
在后端，您需要检查商店是否已通过Google Pay启用付款-如果已启用，则在模板引擎中，我们将指向Google Pay库的CDN链接添加到页面中，并向浏览器显示您需要使用此付款方式下载数据的标志。
在客户端上，您需要检查是否有必要的标志-如果有，请致电验证方法此设备是否支持通过Google Pay付款。 如果一切顺利，那么我们向用户显示另一个按钮。 结果，该页面仍呈现在服务器上，但是现在我们向另一个服务提出了几个附加请求。
原来，该服务有时可能没有响应。
整整一个月，没有一个休息！
这个故事是关于我们的用户体验部门的-他们如何寻找一种绘制Google Pay按钮的方法，但同时又不干扰用户与表单的交互。
首先想到的是在整个页面上保留转折，然后等待Google的回应。
但是，如果您等待Google的回应，则服务器渲染毫无意义（在我们获取客户端数据之前，用户仍无法与页面进行交互），并且我们开始依赖第三方服务。 如果Internet出现问题，则表明Google被阻止或无法访问，则用户将无法使用该页面，尽管不会阻止他输入卡号。
设计师提供了更多选择，但由于各种原因，它们不适合使用，布局要求逐渐改变。
接近时间
方法二
结果，存在三个主要要求：
- 无论第三方服务是否响应以及他将执行多长时间，用户都应该能够付款。 服务不应变慢。
- 需要可伸缩性。 添加Apple或Samsung的付款时，这不应影响使用银行卡输入字段的速度和功能。
- 解决方案应该没有太多的动画/动态。 如果用户开始输入数据，并且此时Google Pay按钮加载并且发生了某些变化，则用户可能不了解发生了什么以及为什么。
在此基础上，出现了付款表格的最终设计。 他按照所有条件排列-可伸缩，不会阻止银行卡的输入，并且在接收银行卡数据时不会出现不必要的动画。
没有NFC的智能手机呢？
对于通过线下商店中的Google Pay付款，仍然需要NFC，没有选择。
NFC不需要在线。 所有桌面浏览器都可以与Google Pay一起正常使用。 智能手机有一些细微差别-Google对使用Google Pay的设备有一些要求 。 以下是不允许的清单：
- 使用Android 4.4.3或更早版本的手机；
- 为开发人员安装Android版本；
- root，解锁引导加载程序或安装非官方固件；
- 使用Samsung MyKnox；
- 使用未经验证的Google设备。
在其他情况下，通过Internet上的Google Pay付款应该可以正常工作-但很可能没人知道所有例外情况。
如果您已经使用Yandex.Cash，则会得出苛刻的业务结论
要通过Google Pay接受付款，请写信给您帐户中的经理。 一段时间后，该按钮将单独出现，您可以将开发人员的时间花在其他事情上。
转化将增加-根据Mediascope的一项研究，有36.3％的用户以非接触方式付费。 Yandex.Money自己的研究表明，有43％的持卡人将其用于非接触式支付。 此外，Android用户中有很多使用Android的人-他们无需输入3D安全代码。
如果您尚未使用Yandex.Cash，则会得出苛刻的业务结论
紧急连接 ，为什么要拉东西？
关于卡萨有什么好处的其他故事
9万个站点上的10个人：如何不发疯
我厌倦了通过WebView接受付款。 我该怎么办？
我们如何保护诈骗者的评论，购买和旅行