Création d'un calculateur d'expédition personnalisé avec les fonctions Stripe et Netlify pour la prise en charge de plusieurs devises (€/$), de la quantité et de l'emplacement

Commettre 3c90066

Avant de poursuivre votre lecture, à titre informatif, j'apprends et code par moi-même pour créer ce dont nous avons besoin pour gérer notre entreprise. Veuillez donc prendre les informations suivantes telles quelles. C'est un exemple réel que nous avons utilisé pour le nôtre ? livre jaune sur le coworking. À l'époque, nous ne pouvions pas trouver de meilleure solution, j'ai donc créé ce qui suit pour notre site de commerce électronique.

Vendre un seul produit en ligne, comme un livre, peut être simple jusqu'à ce que vous soyez confronté aux complexités des tarifs d'expédition internationaux, des devises multiples et des quantités variables, d'autant plus que Stripe Checkout n'autorise qu'un seul tarif d'expédition par défaut. Dans cet article, expliquons comment nous avons créé un calculateur d'expédition personnalisé à l'aide de Netlify Functions et Stripe pour relever ces défis. À la fin, vous disposerez d'une solution fonctionnelle adaptée pour vendre jusqu'à trois exemplaires d'un livre, avec des frais d'expédition dynamiques basés sur la devise (EUR/USD) du client, la quantité , et emplacement.

Bien que cet exemple soit très spécifique à nos besoins, vous pouvez le modifier en fonction de vos propres besoins. N'hésitez pas à partager vos solutions, mises à niveau ou toute amélioration que vous apportez.

? Conditions préalables

Avant de plonger, assurez-vous d'avoir les éléments suivants :

• Un compte Netlify avec un site déployé.
• Un compte Stripe avec des clés API de test et en direct.
• Compréhension de base des fonctions HTML, JavaScript et sans serveur.
• Familiarité avec les variables d'environnement.

? Aperçu

Créons une expérience de paiement transparente qui :

• Détermine les frais d'expédition en fonction de la devise du client, du nombre d'articles et de l'emplacement.
• Prend en charge les devises EUR et USD.
• Gère différents tarifs d'expédition pour les destinations européennes et mondiales.
• S'intègre parfaitement à Stripe Checkout.

Ci-dessous, je couvrirai à la fois les composants frontend (HTML et JavaScript) et backend (Netlify Function).

? Structure du projet

Le projet doit inclure les dossiers et fichiers suivants :

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

• /functions : répertoire des fonctions Netlify.
• create-checkout-session.js : La fonction sans serveur personnalisée.
• index.html : Le fichier HTML du frontend.
• .env : Fichier pour stocker les variables d'environnement
• netlify.toml : Le fichier de configuration pour Netlify.
• package.json : répertorie les dépendances comme stripe.

?️ Configuration du backend (fonction Netlify)

Créez un nouveau fichier dans votre répertoire /functions nommé create-checkout-session.js.

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

? Répartition du code

Importer une bande

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

Initialise le SDK Stripe avec votre clé secrète.

Gestion de l'événement

Analyse les données des commandes entrantes depuis le frontend.

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

Définir des groupes de pays

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

• Listes des pays pour l'expédition dans l'UE et dans le monde entier.
• Les pays autorisés seront définis en fonction de l'option d'expédition.

Définition des méthodes de paiement

Déterminez les modes de paiement disponibles en fonction de la devise.

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

Détermination des tarifs d'expédition

let paymentMethods = [];

• Utilise des variables d'environnement pour définir l'ID de tarif d'expédition correct en fonction de la devise, de la région et de la quantité.
• Exemple de variable d'environnement : SHIPPING_RATE_EUR_EU_1 pour 1 article en Europe avec la devise EUR.

Création de la session de paiement

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
}

• Crée une nouvelle session Stripe Checkout avec des configurations dynamiques.

?️ Configuration du frontend

Vous trouverez ci-dessous un exemple abrégé du code HTML et JavaScript qui interagit avec notre fonction Netlify.

? Structure 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`,
});

? Répartition HTML

• Onglets Devises : permet aux utilisateurs de choisir entre les tarifs en EUR et en USD.
• Nombre de livres : les utilisateurs peuvent sélectionner jusqu'à trois livres.
• Destination d'expédition : listes déroulantes remplies de pays, regroupés par tarifs d'expédition.
• Boutons de paiement : lance le processus de paiement lorsque vous cliquez dessus.

? Logique 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>

? Répartition JavaScript

• Écouteurs d'événements : associez des événements de clic aux boutons de paiement.
• Détermination des détails de la commande : en fonction du bouton cliqué, extrayez la devise, l'option d'expédition, le nombre de livres et l'identifiant du prix.
• Préparation des données de commande : Créez un objet contenant toutes les informations de commande nécessaires.
• Récupération de la session de paiement : Envoyez une requête POST à ​​la fonction Netlify avec les données de commande.
• Redirection vers Stripe Checkout : utilisez l'ID de session renvoyé par le backend pour rediriger l'utilisateur vers Stripe Checkout.

? Définition des variables d'environnement

Assurez-vous d'ajouter vos produits et vos prix d'expédition sur le tableau de bord Stirpe.

Sur Stripe :

Sur Netlify :

Créez un fichier .env à la racine de votre projet et ajoutez vos variables d'environnement (ou faites-le sur l'interface utilisateur de Netlify comme indiqué ci-dessus Configuration du site > Variables d'environnement) :

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

• Remplacez les valeurs par vos clés Stripe et vos identifiants de tarifs d'expédition réels.
• Assurez-vous de créer ces tarifs d'expédition dans votre tableau de bord Stripe.

? Mise à jour de netlify.toml

Configurez Netlify pour utiliser des variables d'environnement dans vos fonctions :

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

? Installation des dépendances

Exécutez la commande suivante pour installer le SDK Stripe :

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

? Test de la fonction

1. Démarrer le serveur de développement Netlify

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

1. Passer une commande

• Ouvrez votre fichier index.html dans le navigateur.
• Sélectionnez vos options et cliquez sur le bouton "PRÉCOMMANDE".
• Assurez-vous que les tarifs d'expédition et les modes de paiement corrects apparaissent dans Stripe Checkout.

1. Tester différents scénarios

• Basculez entre les devises EUR et USD.
• Modifiez les options d'expédition et les quantités d'articles.
• Confirmez que les pays autorisés correspondent à vos configurations.

? Conclusion

Et voilà ! Vous avez configuré une fonction de calcul d'expédition personnalisée qui ajuste dynamiquement les tarifs d'expédition en fonction de la devise, de la quantité et de l'emplacement.

N'hésitez pas à adapter et à développer cette configuration en fonction de vos propres produits et politiques d'expédition.

? Ressources supplémentaires

• Documentation de paiement Stripe
• Documentation des fonctions Netlify
• Création de tarifs d'expédition dans Stripe
• Référence Stripe.js

---

Remarque : Cet article est basé sur un scénario réel de précommande/vente d'un seul livre comportant jusqu'à trois exemplaires et montre une façon de gérer les calculs d'expédition impliquant des variables de devise, de quantité et d'emplacement. Il peut y avoir des méthodes plus efficaces en fonction de vos besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!