Erstellen eines benutzerdefinierten Versandrechners mit Stripe- und Netlify-Funktionen für die Unterstützung mehrerer Währungen (€/$), Mengen und Standorte

3c90066 festschreiben

Bevor Sie weiterlesen: Nur zu Ihrer Information: Ich lerne und programmiere selbst, um das aufzubauen, was wir für den Betrieb unseres Unternehmens benötigen. Bitte nehmen Sie daher die folgenden Informationen unverändert zur Kenntnis. Ist es ein Beispiel aus der Praxis, das wir für uns selbst verwendet haben? Gelbes Buch über Coworking. Da wir damals keine bessere Lösung finden konnten, habe ich Folgendes für unsere E-Commerce-Website erstellt.

Der Online-Verkauf eines einzelnen Produkts, beispielsweise eines Buches, kann unkompliziert sein, bis Sie auf die Komplexität internationaler Versandtarife, mehrerer Währungen und unterschiedlicher Mengen stoßen – insbesondere, da Stripe Checkout standardmäßig nur einen Versandtarif zulässt. In diesem Artikel erfahren Sie, wie wir mithilfe von Netlify Functions und Stripe einen benutzerdefinierten Versandrechner erstellt haben, um diese Herausforderungen zu bewältigen. Am Ende verfügen Sie über eine funktionierende Lösung, die auf den Verkauf von bis zu drei Exemplaren eines Buchs zugeschnitten ist, mit dynamischen Versandkosten basierend auf der Währung des Kunden (EUR/USD) und der Menge , und Standort.

Obwohl dieses Beispiel sehr speziell auf unsere Bedürfnisse zugeschnitten ist, können Sie es an Ihre eigenen Anforderungen anpassen. Teilen Sie uns gerne Ihre Lösungen, Upgrades oder Verbesserungen mit.

? Voraussetzungen

Bevor wir eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein Netlify-Konto mit einer bereitgestellten Site.
• Ein Stripe-Konto mit Test- und Live-API-Schlüsseln.
• Grundlegendes Verständnis von HTML, JavaScript und serverlosen Funktionen.
• Vertrautheit mit Umgebungsvariablen.

? Überblick

Lassen Sie uns ein nahtloses Checkout-Erlebnis schaffen, das:

• Bestimmt die Versandkosten basierend auf der Währung, der Anzahl der Artikel und dem Standort des Kunden.
• Unterstützt sowohl EUR- als auch USD-Währungen.
• Verwaltet unterschiedliche Versandkosten für europäische und weltweite Ziele.
• Nahtlose Integration mit Stripe Checkout.

Im Folgenden werde ich sowohl die Frontend- (HTML und JavaScript) als auch die Backend-Komponenten (Netlify-Funktion) behandeln.

? Projektstruktur

Das Projekt sollte die folgenden Ordner und Dateien enthalten:

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

• /functions: Verzeichnis für Netlify-Funktionen.
• create-checkout-session.js: Die benutzerdefinierte serverlose Funktion.
• index.html: Die Frontend-HTML-Datei.
• .env: Datei zum Speichern von Umgebungsvariablen
• netlify.toml: Die Konfigurationsdatei für Netlify.
• package.json: Listet Abhängigkeiten wie Stripe auf.

?️ Einrichten des Backends (Netlify-Funktion)

Erstellen Sie eine neue Datei in Ihrem /functions-Verzeichnis mit dem Namen create-checkout-session.js.

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

? Code-Aufschlüsselung

Stripe importieren

// 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,
    }),
  };
};

Initialisiert das Stripe SDK mit Ihrem geheimen Schlüssel.

Abwicklung der Veranstaltung

Parst die eingehenden Bestelldaten vom Frontend.

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

Ländergruppen definieren

exports.handler = async (event) => {
  const order = JSON.parse(event.body);
  // Rest of the code...
};

• Listen der Länder für EU- und weltweiten Versand.
• Zulässige Länder werden basierend auf der Versandoption festgelegt.

Zahlungsmethoden festlegen

Bestimmen Sie die verfügbaren Zahlungsmethoden basierend auf der Währung.

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

Bestimmen der Versandkosten

let paymentMethods = [];

• Verwendet Umgebungsvariablen, um die korrekte Versandtarif-ID basierend auf Währung, Region und Menge festzulegen.
• Beispiel-Umgebungsvariable: SHIPPING_RATE_EUR_EU_1 für 1 Artikel in Europa mit EUR-Währung.

Erstellen der Checkout-Sitzung

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
}

• Erstellt eine neue Stripe Checkout-Sitzung mit dynamischen Konfigurationen.

?️ Einrichten des Frontends

Unten finden Sie ein verkürztes Beispiel des HTML- und JavaScript-Codes, der mit unserer Netlify-Funktion interagiert.

? HTML-Struktur (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-Aufschlüsselung

• Währungsregisterkarten: Ermöglicht Benutzern die Auswahl zwischen EUR- und USD-Preisen.
• Anzahl der Bücher: Benutzer können bis zu drei Bücher auswählen.
• Versandziel: Dropdown-Menüs mit Ländern, gruppiert nach Versandtarifen.
• Checkout-Schaltflächen: Leitet den Checkout-Vorgang ein, wenn darauf geklickt wird.

? JavaScript-Logik (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-Aufschlüsselung

• Ereignis-Listener: Hängen Sie Klickereignisse an die Checkout-Schaltflächen an.
• Bestelldetails ermitteln: Extrahieren Sie basierend auf der angeklickten Schaltfläche die Währung, die Versandoption, die Anzahl der Bücher und die Preis-ID.
• Bestelldaten vorbereiten: Erstellen Sie ein Objekt mit allen erforderlichen Bestellinformationen.
• Abrufen der Checkout-Sitzung: Senden Sie eine POST-Anfrage mit den Bestelldaten an die Netlify-Funktion.
• Umleitung zu Stripe Checkout: Verwenden Sie die vom Backend zurückgegebene Sitzungs-ID, um den Benutzer zu Stripe Checkout umzuleiten.

? Umgebungsvariablen festlegen

Stellen Sie sicher, dass Sie Ihre Produkt- und Versandpreise im Stirpe Dashboard hinzufügen.

Auf Streifen:

Auf Netlify:

Erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts und fügen Sie Ihre Umgebungsvariablen hinzu (oder führen Sie dies auf der Netlify-Benutzeroberfläche aus, wie oben gezeigt: Site-Konfiguration > Umgebungsvariablen):

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

• Ersetzen Sie die Werte durch Ihre tatsächlichen Stripe-Schlüssel und Versandtarif-IDs.
• Stellen Sie sicher, dass Sie diese Versandtarife in Ihrem Stripe-Dashboard erstellen.

? Netlify.toml wird aktualisiert

Konfigurieren Sie Netlify für die Verwendung von Umgebungsvariablen in Ihren Funktionen:

// 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,
    }),
  };
};

? Abhängigkeiten installieren

Führen Sie den folgenden Befehl aus, um das Stripe SDK zu installieren:

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

? Testen der Funktion

1. Netlify Dev Server starten

exports.handler = async (event) => {
  const order = JSON.parse(event.body);
  // Rest of the code...
};

1. Bestellung aufgeben

• Öffnen Sie Ihre index.html-Datei im Browser.
• Wählen Sie Ihre Optionen aus und klicken Sie auf die Schaltfläche „VORBESTELLEN“.
• Stellen Sie sicher, dass im Stripe Checkout die korrekten Versandtarife und Zahlungsmethoden angezeigt werden.

1. Testen Sie verschiedene Szenarien

• Wechseln Sie zwischen den Währungen EUR und USD.
• Ändern Sie die Versandoptionen und Artikelmengen.
• Bestätigen Sie, dass die zulässigen Länder mit Ihren Konfigurationen übereinstimmen.

? Abschluss

Et voilà! Sie haben eine benutzerdefinierte Versandkostenrechnerfunktion eingerichtet, die die Versandkosten basierend auf Währung, Menge und Standort dynamisch anpasst.

Sie können dieses Setup jederzeit anpassen und erweitern, um es an Ihre eigenen Produkte und Versandrichtlinien anzupassen.

? Zusätzliche Ressourcen

• Stripe Checkout-Dokumentation
• Netlify-Funktionsdokumentation
• Versandtarife in Stripe erstellen
• Stripe.js-Referenz

---

Hinweis: Dieser Artikel basiert auf einem realen Szenario für die Vorbestellung/den Verkauf eines einzelnen Buchs mit bis zu drei Exemplaren und zeigt eine Möglichkeit, Versandberechnungen unter Berücksichtigung von Währungs-, Mengen- und Standortvariablen durchzuführen. Abhängig von Ihren spezifischen Anforderungen gibt es möglicherweise effizientere Methoden.

Das obige ist der detaillierte Inhalt vonErstellen eines benutzerdefinierten Versandrechners mit Stripe- und Netlify-Funktionen für die Unterstützung mehrerer Währungen (€/$), Mengen und Standorte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!