前端 - 网站支付中，选择不同金额会更新不同的二维码，是如何实现的呢？

Question

网站支付中，选择不同金额，会更新不同的二维码，是如何实现的呢？

在网站支付过程中，有的网站，选择不同的金额下方会同时出现微信&支付宝的收款码，然后更改金额之后会重新生成二维码，然后使用手机APP扫描即可支付，这个是如何实现的呢?

有类似的库吗？

Answer 1

在网站支付系统中，实现选择不同金额后更新不同二维码的功能，通常涉及到后端服务器生成动态二维码的逻辑以及前端展示这些二维码的交互。以下是实现该功能的基本步骤和可能的技术栈：

后端逻辑

1. 支付请求处理：
   用户选择金额后，前端会向服务器发送一个包含支付金额的请求。
2. 生成支付订单：
   服务器根据请求的金额，调用支付服务商（如微信支付、支付宝等）的API来生成一个支付订单。这个订单包含了支付所需的所有信息，如订单ID、金额、支付类型等。
3. 获取支付二维码：
   支付服务商在生成订单后，通常会提供一个URL或者一个二维码图片，用于用户扫描支付。服务器需要获取这个二维码的URL或图片，并将其发送给前端。
4. 更新二维码：
   每当用户更改支付金额时，上述过程会重复执行，从而生成新的支付订单和对应的二维码。

前端逻辑

1. 显示二维码：
   前端接收到后端发送的二维码URL或图片后，可以使用HTML的<img>标签来显示二维码图片，或者使用JavaScript库（如qrcode.js）来根据URL生成并显示二维码。
2. 交互逻辑：
   当用户更改支付金额时，前端会捕获这一事件，并发送新的请求到后端以获取新的支付二维码。同时，前端会更新页面上显示的二维码图片。

类似库和工具

• 后端：

  • 大多数支付服务商（如微信支付、支付宝）都提供了SDK或API文档，用于在服务器端生成支付订单和获取支付二维码。

• 前端：

  • qrcode.js：一个流行的JavaScript库，用于在前端生成二维码。虽然在这个场景中，你可能更倾向于直接从后端获取二维码图片，但qrcode.js可以在某些场景下（如直接在前端生成小额支付链接的二维码）发挥作用。
  • HTML <img> 标签：用于直接显示从后端获取的二维码图片。

注意事项

• 确保支付过程的安全性，包括验证用户输入、防止CSRF攻击等。
• 处理好网络请求的错误和超时情况，提供友好的用户反馈。
• 考虑到性能和用户体验，可以优化二维码的生成和加载速度。