複数通貨 (€/$)、数量、および場所をサポートするための 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);
?機能のテスト
- Netlify 開発サーバーを開始します
exports.handler = async (event) => { const order = JSON.parse(event.body); // Rest of the code... };
- 注文する
- ブラウザでindex.htmlファイルを開きます。
- オプションを選択し、「事前注文」ボタンをクリックしてください。
- Stripe Checkout に正しい配送料と支払い方法が表示されていることを確認してください。
- さまざまなシナリオをテストする
- ユーロと米ドルの通貨を切り替えます。
- 配送オプションと商品数量を変更します。
- 許可されている国が設定と一致していることを確認します。
?結論
さあ、出来上がりです! 通貨、数量、および場所に基づいて配送料を動的に調整するカスタム送料計算関数を設定しました。
独自の商品や配送ポリシーに合わせて、この設定を自由に調整および拡張してください。
?追加リソース
- Stripe チェックアウトのドキュメント
- Netlify 関数のドキュメント
- Stripe での配送料の作成
- Stripe.js リファレンス
注: この記事は、1 冊の書籍を最大 3 部まで予約注文/販売する実際のシナリオに基づいており、通貨、数量、場所の変数を含む配送計算を処理する 1 つの方法を示しています。特定のニーズに応じて、より効率的な方法がある可能性があります。
以上が複数通貨 (€/$)、数量、および場所をサポートするための Stripe および Netlify 関数を使用したカスタム送料計算ツールの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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