搜尋

首頁 >web前端 >js教程 >使用 Stripe 和 Netlify 功能建立自訂運費計算器，以支援多貨幣 (€/$)、數量和位置

使用 Stripe 和 Netlify 功能建立自訂運費計算器，以支援多貨幣 (€/$)、數量和位置

Susan Sarandon
Susan Sarandon原創
2024-11-01 17:11:021064瀏覽

提交 3c90066

在您繼續閱讀之前，僅供參考，我自己學習和編碼來建立我們經營業務所需的內容。因此，請按原樣獲取以下資訊。這是我們自己使用的現實世界的例子嗎？關於共享辦公的黃皮書。當時我們找不到更好的解決方案，所以我為我們的電子商務網站建立了以下內容。

Building a Custom Shipping Calculator with Stripe and Netlify Functions for Multi-Currency (€/$), Quantity, and Location Support

在線銷售單一產品（例如一本書）可以很簡單，直到您遇到國際運費、多種貨幣和不同數量的複雜性 - 特別是因為 Stripe Checkout 默認情況下只允許一種運費。在本文中，我們將介紹如何使用 Netlify Functions 和 Stripe 建立自訂運費計算器來應對這些挑戰。最後，您將擁有一個專為銷售最多三本圖書而定制的可行解決方案，並根據客戶的貨幣（歐元/美元）、數量動態運輸成本，以及位置。

雖然這個範例非常適合我們的需求，但您可以對其進行調整以滿足您自己的要求。請隨時分享您的解決方案、升級或所做的任何改進。

？先決條件

在我們深入之前，請確保您具備以下條件：

  • 已部署網站的 Netlify 帳戶。
  • 具有測試和即時 API 金鑰的 Stripe 帳戶。
  • 對 HTML、JavaScript 和無伺服器函數有基本了解。
  • 熟悉環境變數。

？概述

讓我們打造無縫結帳體驗：

  • 依客戶的貨幣、商品數量和地點決定運費。
  • 支持歐元和美元貨幣。
  • 處理歐洲和全球目的地的不同運費。
  • 與 Stripe Checkout 無縫整合。

下面我將介紹前端（HTML 和 JavaScript）和後端（Netlify 函數）元件。

？專案結構

專案應包含下列資料夾和檔案：

/functions
  - create-checkout-session.js
/index.html
.env
netlify.toml
package.json
  • /functions：Netlify 函數目錄。
  • create-checkout-session.js：自訂無伺服器函數。
  • index.html：前端 HTML 檔案。
  • .env：儲存環境變數的檔案
  • netlify.toml：Netlify 的設定檔。
  • package.json：列出像 stripe 這樣的依賴項。

?️ 設定後端（Netlify 功能）

在 /functions 目錄中建立一個名為 create-checkout-session.js 的新檔案。 

/functions
  - create-checkout-session.js
/index.html
.env
netlify.toml
package.json

？代碼分解

導入條紋 

// functions/create-checkout-session.js

// Add Stripe secret key
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {
  // Parse the order data sent from the frontend
  const order = JSON.parse(event.body);

  // Define country groups
  const euCountries = ['AL', 'AM', 'AT', ...]; // Add the EU countries you ship to
  const worldCountries = ['AE', 'AR', 'AU', ...]; // Add worldwide countries you ship to
  let allowedCountries = [];

  // Payment methods based on currency
  let paymentMethods = [];

  // Determine shipping rates and allowed countries
  if (order.currency === 'EUR') {
    paymentMethods = ['card', 'sepa_debit', 'ideal', 'bancontact', 'p24', 'eps', 'giropay', 'sofort'];

    if (order.shippingOption === 'europe-eur') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_EU_${order.items}`];
    } else if (order.shippingOption === 'world-eur') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_W_${order.items}`];
    }
  } else if (order.currency === 'USD') {
    paymentMethods = ['card'];

    if (order.shippingOption === 'europe-usd') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_EU_${order.items}`];
    } else if (order.shippingOption === 'world-usd') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_W_${order.items}`];
    }
  }

  // Create the Stripe Checkout session
  const session = await stripe.checkout.sessions.create({
    payment_method_types: paymentMethods,
    line_items: [
      {
        price: order.priceId, // The price ID of your product
        quantity: order.items,
      },
    ],
    mode: 'payment',
    billing_address_collection: 'auto',
    shipping_rates: [order.shippingRate],
    shipping_address_collection: {
      allowed_countries: allowedCountries,
    },
    success_url: `${process.env.URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.URL}/cancel`,
  });

  return {
    statusCode: 200,
    body: JSON.stringify({
      sessionId: session.id,
      publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    }),
  };
};

使用您的金鑰初始化 Stripe SDK。

處理事件

解析前端傳入的訂單資料。 

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

定義國家組 

exports.handler = async (event) => {
  const order = JSON.parse(event.body);
  // Rest of the code...
};
  • 歐盟和全球航運國家/地區列表。
  • allowedCountries 將根據運送選項進行設定。

設定付款方式

根據幣種決定可用的付款方式。 

const euCountries = [/* ... */];
const worldCountries = [/* ... */];
let allowedCountries = [];

確定運費 

let paymentMethods = [];
  • 使用環境變數根據貨幣、區域和數量設定正確的運費 ID。
  • 環境變數範例：SHIPPING_RATE_EUR_EU_1 表示歐洲 1 件商品使用歐元貨幣。

建立結帳會話 

if (order.currency === 'EUR') {
  paymentMethods = [/* ... */];

  if (order.shippingOption === 'europe-eur') {
    allowedCountries = euCountries;
    order.shippingRate = process.env[`SHIPPING_RATE_EUR_EU_${order.items}`];
  } else if (order.shippingOption === 'world-eur') {
    allowedCountries = worldCountries;
    order.shippingRate = process.env[`SHIPPING_RATE_EUR_W_${order.items}`];
  }
} else if (order.currency === 'USD') {
  // Similar logic for USD
}
  • 使用動態配置建立新的 Stripe Checkout 會話。

?️ 設定前端

以下是與我們的 Netlify 函數互動的 HTML 和 JavaScript 程式碼的簡短範例。

？ HTML 結構 (index.html) 

const session = await stripe.checkout.sessions.create({
  payment_method_types: paymentMethods,
  line_items: [/* ... */],
  mode: 'payment',
  billing_address_collection: 'auto',
  shipping_rates: [order.shippingRate],
  shipping_address_collection: {
    allowed_countries: allowedCountries,
  },
  success_url: `${process.env.URL}/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${process.env.URL}/cancel`,
});

？ HTML 細分

  • 貨幣選項卡：允許用戶在歐元和美元定價之間進行選擇。
  • 書籍數量：使用者最多可以選擇三本書。
  • 運送目的地：下拉清單中填充了國家/地區，按運費分組。
  • 結帳按鈕：點擊時啟動結帳流程。

？ JavaScript 邏輯 (script.js) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Book Pre-Order</title>
  <!-- Include any CSS or Meta tags here -->
</head>
<body>
  <!-- Book Purchase Section -->
  <section id="pricing">
    <div class="pricing-content">
      <!-- Currency Tabs -->
      <ul class="tabs-menu">
        <li id="active_currency_eur" class="current"><a href="#tab-1">Buy in ?? EUR</a></li>
        <li id="active_currency"><a href="#tab-2">Buy in ?? USD</a></li>
      </ul>

      <!-- EUR Tab Content -->
      <div id="tab-1" class="tab-content">
        <h3>1 Print Book</h3>
        <p>A beautiful, 350 pages book.</p>
        <p>Price: <span id="book-price-eur">€95</span></p>

        <!-- Number of Books -->
        <label for="num-books">Number of Books (Max 3)</label>
        <select name="num-books" id="num-books" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <!-- Shipping Destination -->
        <label for="shipping-amount-eur">Select Shipping Destination</label>
        <select name="shipping-amount" id="shipping-amount-eur" required>
          <optgroup label="Europe €14">
            <option value="europe-eur">Austria</option>
            <option value="europe-eur">Belgium</option>
            <!-- Add other European countries -->
          </optgroup>
          <optgroup label="Worldwide €22">
            <option value="world-eur">United States</option>
            <option value="world-eur">Canada</option>
            <!-- Add other worldwide countries -->
          </optgroup>
        </select>

        <!-- Checkout Button -->
        <button id="checkout-button-eur" type="button">PRE-ORDER</button>
      </div>

      <!-- USD Tab Content -->
      <div id="tab-2" class="tab-content">
        <h3>1 Print Book</h3>
        <p>A beautiful, 350 pages book.</p>
        <p>Price: <span id="book-price-usd"></span></p>

        <!-- Number of Books -->
        <label for="num-books-usd">Number of Books (Max 3)</label>
        <select name="num-books-usd" id="num-books-usd" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <!-- Shipping Destination -->
        <label for="shipping-amount-usd">Select Shipping Destination</label>
        <select name="shipping-amount" id="shipping-amount-usd" required>
          <optgroup label="Europe ">
            <option value="europe-usd">Austria</option>
            <option value="europe-usd">Belgium</option>
            <!-- Add other European countries -->
          </optgroup>
          <optgroup label="Worldwide ">
            <option value="world-usd">United States</option>
            <option value="world-usd">Canada</option>
            <!-- Add other worldwide countries -->
          </optgroup>
        </select>

        <!-- Checkout Button -->
        <button id="checkout-button-usd" type="button">PRE-ORDER</button>
      </div>
    </div>
  </section>

  <!-- Include Stripe.js -->
  <script src="https://js.stripe.com/v3/"></script>

  <!-- Include your JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

？ JavaScript 細分

  • 事件監聽器：將點擊事件附加到結帳按鈕。
  • 確定訂單詳細資訊：根據按一下的按鈕，提取貨幣、運送選項、書籍數量和價格 ID。
  • 準備訂單資料：建立一個包含所有必要訂單資訊的物件。
  • 取得結帳會話：使用訂單資料向 Netlify 函數傳送 POST 請求。
  • 重新導向至 Stripe Checkout：使用後端傳回的會話 ID 將使用者重新導向至 Stripe Checkout。

？設定環境變數

確保在 Stirpe Dashboard 上添加您的產品和運費。

條紋：
Building a Custom Shipping Calculator with Stripe and Netlify Functions for Multi-Currency (€/$), Quantity, and Location Support
在 Netlify 上：
Building a Custom Shipping Calculator with Stripe and Netlify Functions for Multi-Currency (€/$), Quantity, and Location Support

在專案的根目錄中建立一個 .env 檔案並新增環境變數（或在 Netlify UI 上執行，如上所示「站點配置 > 環境變數」）：

/functions
  - create-checkout-session.js
/index.html
.env
netlify.toml
package.json
  • 將這些值替換為您的實際 Stripe 鍵和運費 ID。
  • 確保在您的 Stripe 儀表板中建立這些運費。

？更新 netlify.toml

設定 Netlify 在函數中使用環境變數：

// functions/create-checkout-session.js

// Add Stripe secret key
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {
  // Parse the order data sent from the frontend
  const order = JSON.parse(event.body);

  // Define country groups
  const euCountries = ['AL', 'AM', 'AT', ...]; // Add the EU countries you ship to
  const worldCountries = ['AE', 'AR', 'AU', ...]; // Add worldwide countries you ship to
  let allowedCountries = [];

  // Payment methods based on currency
  let paymentMethods = [];

  // Determine shipping rates and allowed countries
  if (order.currency === 'EUR') {
    paymentMethods = ['card', 'sepa_debit', 'ideal', 'bancontact', 'p24', 'eps', 'giropay', 'sofort'];

    if (order.shippingOption === 'europe-eur') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_EU_${order.items}`];
    } else if (order.shippingOption === 'world-eur') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in EUR
      order.shippingRate = process.env[`SHIPPING_RATE_EUR_W_${order.items}`];
    }
  } else if (order.currency === 'USD') {
    paymentMethods = ['card'];

    if (order.shippingOption === 'europe-usd') {
      allowedCountries = euCountries;
      // Set shipping rate IDs for Europe in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_EU_${order.items}`];
    } else if (order.shippingOption === 'world-usd') {
      allowedCountries = worldCountries;
      // Set shipping rate IDs for World in USD
      order.shippingRate = process.env[`SHIPPING_RATE_USD_W_${order.items}`];
    }
  }

  // Create the Stripe Checkout session
  const session = await stripe.checkout.sessions.create({
    payment_method_types: paymentMethods,
    line_items: [
      {
        price: order.priceId, // The price ID of your product
        quantity: order.items,
      },
    ],
    mode: 'payment',
    billing_address_collection: 'auto',
    shipping_rates: [order.shippingRate],
    shipping_address_collection: {
      allowed_countries: allowedCountries,
    },
    success_url: `${process.env.URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.URL}/cancel`,
  });

  return {
    statusCode: 200,
    body: JSON.stringify({
      sessionId: session.id,
      publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    }),
  };
};

？安裝依賴項

執行以下命令安裝 Stripe SDK：

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

？測試功能

  1. 啟動 Netlify 開發伺服器 
exports.handler = async (event) => {
  const order = JSON.parse(event.body);
  // Rest of the code...
};
  1. 下訂單
  • 在瀏覽器中開啟您的index.html 檔案。
  • 選擇您的選項並點擊「預購」按鈕。
  • 確保 Stripe Checkout 中顯示正確的運費和付款方式。
  1. 測試不同的場景
  • 在歐元和美元貨幣之間切換。
  • 更改運送選項和商品數量。
  • 確認允許的國家/地區與您的配置相符。

？結論

瞧！您已設定自訂運費計算器功能，該功能可根據貨幣、數量和位置動態調整運費。

您可以隨意調整和擴展此設置，以適應您自己的產品和運輸政策。

？其他資源

  • Stripe Checkout 文件
  • Netlify 函數文件
  • 在 Stripe 中建立運費
  • Stripe.js 參考

注意：本文基於預訂/銷售最多三本一本書的真實場景，並演示了一種處理涉及貨幣、數量和位置變量的運輸計算的方法。根據您的具體需求，可能會有更有效的方法。

以上是使用 Stripe 和 Netlify 功能建立自訂運費計算器，以支援多貨幣 (€/$)、數量和位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json html Object switch for while select include Session Directory using Event JS number function default this location serverless ui
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：為什麼 React.js 中相鄰的 JSX 元素需要包含標籤？下一篇：為什麼 React.js 中相鄰的 JSX 元素需要包含標籤？

相關文章

看更多