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

WBOLT_COM 2 月 01, 2024 196 0

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

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

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

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

准备工作

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

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

查看示例静态网站

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

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

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

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

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

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

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

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

示例网站产品页面

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

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

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

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

<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.Buttons 函数定义了两个函数：
- createOrder — 配置交易细节，如购买金额（本例中为 1.00 美元）。
- onApprove — 处理交易审批、捕获资金并向买方显示成功信息。在上面的代码中，我们使用了 alert() 函数。
最后，render 函数指定 PayPal 按钮应在 ID 为 paypal-button-container 的现有 <div> 中呈现。

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

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

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

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

将复制的代码粘贴到示例代码的 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 结账按钮的实施后，将静态网站代码部署到静态网站托管环境中。