如何在靜態網站中整合支付閘道器和結賬功能

過去，靜態網站通常只提供產品圖片和說明，讓客戶通過電子郵件或電話訂購。但如今，客戶期待的是具有強大電子商務功能的更動態體驗。這樣可以簡化購買流程，鼓勵使用者在您的網站上完成交易，而不是探索競爭對手的選項。

在靜態網站上新增支付閘道器和結賬功能非常簡單。應用程式程式設計介面（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 賬戶接受的貨幣。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter

<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>

 <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> 
```

<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 類似。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter

<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>

 <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> 
```

<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>

```