如何在静态网站中集成支付网关和结账功能

过去，静态网站通常只提 *** 品图片和说明，让客户通过电子邮件或 *** 订购。但如今，客户期待的是具有强大电子商务功能的更动态体验。这样可以简化购买流程，鼓励用户在您的网站上完成交易，而不是探索竞争对手的选项。

在静态网站上添加支付网关和结账功能非常简单。应用程序编程接口（API）和无服务器架构可让您在中嵌入电子商务功能，使您的企业能够直接接受交易。

本教程将探讨如何将 支付网关添加到一家鲜花速递店的静态网站。请按照步骤学习如何将这些功能添加到您的网站，并为推动在线销售创造新的机会。

准备工作

在深入了解将支付网关和结账集成到静态网站的步骤之前，让我们先为顺利和成功的实施奠定基础。

1. 下载此并部署到静态网站托管服务器。
2. 注册 ，选择商业账户，因为它更适合本教程。这种类型的账户是测试集成按钮所必需的。注册后，添加企业信息并链接银行账户。账户通过验证后，您可以从 获取 API 凭据，以便日后使用。
3. 创建 ，输入业务和银行详细信息。stripe 提供快速账户激活服务，这对本项目非常有利。账户激活后，您可以立即访问 。这是您获取 API 密钥的地方，也是后续步骤所需的重要组成部分。

查看示例静态网站

本教程使用已有的静态网站来展示 PayPal 和 Stripe 结账功能的集成。尽管内容是静态的，但示例网站模仿了一家在线花店。

Kinsta 的静态网站托管基础架构为部署和测试 PayPal 和 Stripe 结账功能提供了一个高效的环境，可以创建一个更复杂、更吸引人的静态网站。

部署网站后，请转到主页。单击 “ORDER INQUIRY” 按钮。

带有 ORDER INQUIRY 按钮的网站主页示例

在 Flowers Catalog 页面选择可用产品 – 土耳其玫瑰。

带有各种花卉选项的网站目录页面示例

该操作将带您进入产品详细信息页面，在该页面上有 PayPal 和 Stripe 的付款按钮。

示例网站产品页面

如何将 PayPal 结账整合到静态网站中

添加 PayPal 结账功能可为客户提供安全可信的支付方式，并简化交易流程，提升用户体验。这种整合可大大提高网站功能和客户满意度。

以下是如何将 PayPal 结账集成到你的静态网站：

1. 登录 。
2. 在控制面板上，导航至 “Apps & Credentials” 部分。打开 Sandbox 模式，然后点击 Create App。
3. 在表单中为你的应用命名。选择 “Merchant” 作为类型，然后单击 Create App。PayPal 的创建应用程序表单：
   
   
4. 从 API credentials 部分复制 Client ID，以便以后 *** PayPal 结账按钮。PayPal 应用程序凭据：
5. 向下滚动应用程序页面，查看其他设置。本教程使用默认设置即可。单击 Save Changes。PayPal 应用程序的功能：
6. 接下来，将 PayPal 结账集成到静态网站中。使用 PayPal 的 创建一个结账按钮。它能让你在静态网站中集成各种支付方式，而无需设置后端应用程序。在 product.html 文件中的 </body> 标签之前添加以下 JavaScript 代码。将 YOUR_CLIENT_ID 替换为你的 PayPal 客户 ID。您可能还需要将  USD 货币替换为您的 PayPal 账户接受的货币。

   <!-- PAYPAL BUTTON SCRIPT-->
   <script   
   src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
   data-sdk-integration-source="button-factory"></script>
   <script>
   paypal.Buttons({
   createOrder: function(data, actions) {
   // Set up the transaction
   return actions.order.create({
   purchase_units: [{
   amount: {
   value: '1.00'
   }
   }]
   });
   },
   onApprove: function(data, actions) {
   // Capture the funds from the transaction
   return actions.order.capture().then(function(details) {
   // Show a success message to the buyer
   alert('Transaction completed by ' + details.payer.name.given_name);
   });
   }
   }).render('#paypal-button-container');
   </script>
   <!-- PAYPAL BUTTON SCRIPT-->

   paypal.Buttons  函数定义了两个函数：

   • createOrder — 配置交易细节，如购买金额（本例中为 1.00 美元）。
   • onApprove — 处理交易审批、捕获资金并向买方显示成功信息。在上面的代码中，我们使用了 alert() 函数。

   最后，render 函数指定 PayPal 按钮应在 ID 为 paypal-button-container 的现有 <div> 中呈现。

   现在，您已将 PayPal 集成到您的静态网站中。

如何将 Stripe Checkout 集成到您的静态网站中

Stripe 是一个广泛使用的技术平台，为各种规模的企业提供支付处理解决方案。下面介绍如何将 Stripe 支付添加到您的静态网站：

1. 在使用 Stripe 结账按钮之前，您可以通过 API 或 管理产品和价格。要使用仪表板，请打开它，选择 Test mode，然后单击 Product Catalog。Stripe 产品目录页面：
2. 单击 + Add Product 按钮，打开 Add a product 表单。Stripe 的添加产品页面：
3. 在以下字段中输入产品的详细信息：
   • Name: Turkish Rose
   • Description: This is a beautiful Turkish Rose
   • Image: (上传样本 文件)
   • Payment model: One-off
   • Amount: $1.00
   • Currency: USD (或您选择的货币)
4. 点击 Add product。
5. 在  Product catalog 页面的列表中，选择 Turkish Rose 产品。Stripe 产品目录详情：
6. 在产品 Pricing 部分，单击 Create payment link。查看产品选项，确保数量为 1。土耳其玫瑰的 Stripe 产品详情：
7. 点击 Create link。Stripe 产品付款详情：
8.  在 PAYMENT LINK 页面，点击 Buy 按钮。Stripe PAYMENT LINK 页面详情：
9. 当 “Buy button” 按钮面板出现时，你可以查看为结账按钮生成的代码。选择 Button 布局，打开 Change button text，然后在 Change button text 字段中输入 “Buy with Stripe”。然后，单击 Save changes and copy code，将生成的代码复制到操作系统的剪贴板中。Stripe 表单创建购买按钮：
10. 将复制的代码粘贴到示例代码的 product.html 文件的 </body> 标签结尾之前（在 STRIPE BUTTON BEGIN 和 STRIPE BUTTON END 注释之间），与 PayPal 类似。

    <!-- STRIPE BUTTON BEGIN -->
    <script> async
    src="https://js.stripe.com/v3/buy-button.js">
    </script>
    <stripe-buy-button>
    buy-button-id="BUY_BUTTON_ID"
    publishable-key="PUBLISHABLE_KEY"
    >
    </stripe-buy-button>
    <!-- STRIPE BUTTON END -->

完成 PayPal 和 Stripe 结账按钮的实施后，将静态网站代码部署到静态网站托管环境中。

测试结账流程

打开静态演示网站的产品详细信息页面。确保 PayPal 和 Stripe 按钮显示正确。

带有 PayPal 和 Stripe 结账按钮的网站产品页面示例

点击 PayPal 结账按钮。它将打开一个登录对话框，客户将在该对话框中通过 PayPal 验证，然后进行购买。

PayPal 流程提供登录或注册选项

如果在此阶段遇到登录问题，可能是由于使用了个人账户而非企业账户进行测试。

客户也可以选择 PayPal 的 Debit or Credit Card 按钮。点击该选项查看对话框。输入一些账户信息。

PayPal 流程可选择使用借记卡或信用卡

PayPal 会显示您的订单和账户详情。点击 “Complete Purchase“。

PayPal 流与购买确认

PayPal 批准交易后，客户端 JavaScript 代码会显示一个提示，通知您交易已完成。该提示用于开发和调试目的，不应在生产代码中使用。

PayPal 流会发出交易完成提醒

要验证该交易，请打开 面板。单击 Activity > All Transactions，显示最近所有交易的详细列表。

PayPal 业务交易详情

在鲜花网站的 product.html 页面上，您还可以点击 “Buy with Stripe” 按钮来测试 Stripe 结账流程。此操作会触发 Stripe 对话框，其中包含产品详细信息和支付选项，包括 Google Pay、链接和信用卡支付。

Stripe 流支付选项

为便于演示，请选择 Google Pay。这时会出现一个对话框，要求你使用列表中的一张卡（如已保存的万事达卡）使用 Google Pay 确认购买。

使用 Google Pay 时的 Stripe 流程

点击 PAY。如果支付成功，Stripe 会向客户显示购买确认。

Stripe 购买确认

在 Stripe 控制面板中，打开 “Payments” 选项卡。它会显示已完成交易的详细信息，包括金额、货币、描述、客户和日期。

Stripe 付款详情页面

如何排除结账过程中的故障

以下是一些故障排除步骤，用于诊断和解决结账测试过程中遇到的错误：

• 修复支付网关配置。
• 验证 。
• 检查客户浏览器的兼容性。
• 正确处理错误。
• 在多个环境中测试结账流程。
• 使用日志和监控技术。

小结

您现在已经将 PayPal 和 Stripe 支付网关的结账按钮集成到了在线花店示例中。同样的技术也可用于在其他静态网站中添加支付选项，从而鼓励客户购买产品并提高销售额。