複数通貨 (€/$)、数量、および場所をサポートするための Stripe および Netlify 関数を使用したカスタム送料計算ツールの構築

コミット 3c90066

これ以上読む前に、参考までに、私はビジネスを運営するために必要なものを構築するために独学で学習し、コーディングしています。したがって、以下の情報をそのまま受け取ってください。これは私たちが自分自身で使用した実際の例です。コワーキングに関する黄色い本。当時はこれより良い解決策が見つからなかったので、e コマース Web サイト用に次のようなものを構築しました。

本のような 1 つの商品をオンラインで販売することは、国際配送料、複数の通貨、さまざまな数量の複雑さに直面するまでは簡単かもしれません。特に、Stripe Checkout ではデフォルトで 1 つの配送料しか許可されていないためです。この記事では、Netlify Functions と Stripe を使用してこれらの課題に対処するカスタム送料計算ツールを構築する方法を説明します。最終的には、顧客の通貨 (EUR/USD)、数量に基づいて動的送料を設定して、書籍を 3 部まで販売できるように調整された実用的なソリューションが完成します。 、および場所。

この例は私たちのニーズに非常に特化していますが、独自の要件に合わせて調整できます。ソリューション、アップグレード、改善点などをお気軽に共有してください。

?前提条件

本題に入る前に、以下のものがあることを確認してください:

• サイトが展開された Netlify アカウント。
• テスト API キーとライブ 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: ストライプなどの依存関係をリストします。

⁉️バックエンドの設定（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...
};

• EU および全世界への配送が可能な国のリスト。
• allowedCountries は配送オプションに基づいて設定されます。

支払い方法の設定

通貨に基づいて利用可能な支払い方法を決定します。

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

配送料の決定

let paymentMethods = [];

• 環境変数を使用して、通貨、地域、数量に基づいて正しい配送料 ID を設定します。
• 環境変数の例: SHIPPING_RATE_EUR_EU_1 (EUR 通貨を使用するヨーロッパの 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 の内訳

• 通貨タブ: ユーザーはユーロと米ドルの価格設定を選択できます。
• 本の数: ユーザーは最大 3 冊の本を選択できます。
• 配送先: 配送料別にグループ化された国が入力されたドロップダウン。
• チェックアウト ボタン: クリックすると、チェックアウト プロセスが開始されます。

? 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 を抽出します。
• 注文データの準備: 必要なすべての注文情報を含むオブジェクトを作成します。
• チェックアウト セッションの取得: 注文データを含む POST リクエストを Netlify 関数に送信します。
• Stripe Checkout へのリダイレクト: バックエンドから返されたセッション ID を使用して、ユーザーを Stripe Checkout にリダイレクトします。

?環境変数の設定

Stirpe ダッシュボードに商品と配送料を必ず追加してください。

ストライプ上:

Netlify の場合:

プロジェクトのルートに .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 チェックアウトのドキュメント
• Netlify 関数のドキュメント
• Stripe での配送料の作成
• Stripe.js リファレンス

---

注: この記事は、1 冊の書籍を最大 3 部まで予約注文/販売する実際のシナリオに基づいており、通貨、数量、場所の変数を含む配送計算を処理する 1 つの方法を示しています。特定のニーズに応じて、より効率的な方法がある可能性があります。

以上が複数通貨 (€/$)、数量、および場所をサポートするための Stripe および Netlify 関数を使用したカスタム送料計算ツールの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。