ホームページ ウェブフロントエンド jsチュートリアル 複数通貨 (€/$)、数量、および場所をサポートするための Stripe および Netlify 関数を使用したカスタム送料計算ツールの構築

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

Nov 01, 2024 pm 05:11 PM

コミット 3c90066

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

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

本のような 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 ダッシュボードに商品と配送料を必ず追加してください。

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:コミュニティ、ライブラリ、リソース Python vs. JavaScript:コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles