Membina Kalkulator Penghantaran Tersuai dengan Fungsi Stripe dan Netlify untuk Pelbagai Mata Wang (€/$), Kuantiti dan Sokongan Lokasi

Komit 3c90066

Sebelum anda membaca lebih lanjut, hanya sebagai FYI, saya belajar dan kod sendiri untuk membina perkara yang kita perlukan untuk menjalankan perniagaan kita. Jadi, sila ambil maklumat berikut sebagaimana adanya. Ini contoh dunia sebenar yang kami gunakan untuk kami sendiri? buku kuning tentang kerja bersama. Pada masa itu kami tidak dapat mencari penyelesaian yang lebih baik, jadi saya membina perkara berikut untuk tapak web eCommerce kami.

Menjual satu produk dalam talian, seperti buku, boleh menjadi mudah sehingga anda menghadapi kerumitan kadar penghantaran antarabangsa, berbilang mata wang dan kuantiti yang berbeza-beza—terutamanya kerana Stripe Checkout membenarkan hanya satu kadar penghantaran secara lalai. Dalam artikel ini, mari kita lihat cara kami membina kalkulator penghantaran tersuai menggunakan Netlify Functions dan Stripe untuk menangani cabaran ini. Pada akhirnya, anda akan mempunyai penyelesaian yang berkesan yang disesuaikan untuk menjual sehingga tiga salinan buku, dengan kos penghantaran dinamik berdasarkan mata wang (EUR/USD), kuantiti pelanggan. , dan lokasi.

Walaupun contoh ini sangat khusus untuk keperluan kami, anda boleh mengubah suainya mengikut keperluan anda sendiri. Sila berasa bebas untuk berkongsi penyelesaian anda, peningkatan atau sebarang peningkatan yang anda lakukan.

? Prasyarat

Sebelum kami menyelam, pastikan anda mempunyai perkara berikut:

• Akaun Netlify dengan tapak yang digunakan.
• Akaun Stripe dengan kunci API ujian dan langsung.
• Pemahaman asas tentang HTML, JavaScript dan fungsi tanpa pelayan.
• Kebiasaan dengan pembolehubah persekitaran.

? Gambaran keseluruhan

Mari cipta pengalaman daftar keluar yang lancar yang:

• Menentukan kos penghantaran berdasarkan mata wang, bilangan item dan lokasi pelanggan.
• Menyokong kedua-dua mata wang EUR dan USD.
• Mengendalikan kadar penghantaran yang berbeza untuk destinasi Eropah dan seluruh dunia.
• Bersepadu dengan lancar dengan Stripe Checkout.

Di bawah saya akan merangkumi kedua-dua bahagian hadapan (HTML dan JavaScript) dan bahagian belakang (Fungsi Netlify).

? Struktur Projek

Projek hendaklah mengandungi folder dan fail berikut:

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

• /functions: Direktori untuk Fungsi Netlify.
• create-checkout-session.js: Fungsi tanpa pelayan tersuai.
• index.html: Fail HTML bahagian hadapan.
• .env: Fail untuk menyimpan pembolehubah persekitaran
• netlify.toml: Fail konfigurasi untuk Netlify.
• package.json: Menyenaraikan kebergantungan seperti stripe.

?️ Sediakan Bahagian Belakang (Fungsi Netlify)

Buat fail baharu dalam direktori /functions anda bernama create-checkout-session.js.

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

? Pecahan Kod

Mengimport Stripe

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

Memulakan Stripe SDK dengan kunci rahsia anda.

Mengendalikan Acara

Menghuraikan data pesanan masuk dari bahagian hadapan.

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

Menentukan Kumpulan Negara

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

• Senarai negara untuk penghantaran EU dan seluruh dunia.
• dibenarkanNegara akan ditetapkan berdasarkan pilihan penghantaran.

Menetapkan Kaedah Pembayaran

Tentukan kaedah pembayaran yang tersedia berdasarkan mata wang.

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

Menentukan Kadar Penghantaran

let paymentMethods = [];

• Menggunakan pembolehubah persekitaran untuk menetapkan ID kadar penghantaran yang betul berdasarkan mata wang, wilayah dan kuantiti.
• Contoh pembolehubah persekitaran: SHIPPING_RATE_EUR_EU_1 untuk 1 item di Eropah dengan mata wang EUR.

Mencipta Sesi Checkout

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
}

• Mencipta sesi Stripe Checkout baharu dengan konfigurasi dinamik.

?️ Sediakan Bahagian Hadapan

Di bawah ialah contoh ringkas kod HTML dan JavaScript yang berinteraksi dengan Fungsi Netlify kami.

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

? Pecahan HTML

• Tab Mata Wang: Membenarkan pengguna memilih antara harga EUR dan USD.
• Bilangan Buku: Pengguna boleh memilih sehingga tiga buku.
• Destinasi Penghantaran: Dropdown diisi dengan negara, dikumpulkan mengikut kadar penghantaran.
• Butang Daftar Keluar: Memulakan proses pembayaran apabila diklik.

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

? Pecahan JavaScript

• Pendengar Acara: Lampirkan acara klik pada butang daftar keluar.
• Menentukan Butiran Pesanan: Berdasarkan butang yang diklik, ekstrak mata wang, pilihan penghantaran, bilangan buku dan ID harga.
• Menyediakan Data Pesanan: Cipta objek yang mengandungi semua maklumat pesanan yang diperlukan.
• Mengambil Sesi Daftar Keluar: Hantar permintaan POST ke Fungsi Netlify dengan data pesanan.
• Mengubah hala ke Stripe Checkout: Gunakan ID sesi yang dikembalikan dari bahagian belakang untuk mengubah hala pengguna ke Stripe Checkout.

? Menetapkan Pembolehubah Persekitaran

Pastikan anda menambah produk dan harga penghantaran anda pada Papan Pemuka Stirpe.

Pada Jalur:

Di Netlify:

Buat fail .env dalam akar projek anda dan tambahkan pembolehubah persekitaran anda (atau lakukan pada UI Netlify seperti yang ditunjukkan di atas Konfigurasi tapak > Pembolehubah persekitaran):

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

• Ganti nilai dengan kunci Stripe sebenar anda dan ID kadar penghantaran.
• Pastikan anda membuat kadar penghantaran ini dalam papan pemuka Stripe anda.

? Mengemas kini netlify.toml

Konfigurasikan Netlify untuk menggunakan pembolehubah persekitaran dalam fungsi anda:

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

? Memasang Ketergantungan

Jalankan arahan berikut untuk memasang Stripe SDK:

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

? Menguji Fungsi

1. Mulakan Pelayan Pembangun Netlify

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

1. Buat Pesanan

• Buka fail index.html anda dalam penyemak imbas.
• Pilih pilihan anda dan klik butang "PRE-ORDER".
• Pastikan bahawa kadar penghantaran dan kaedah pembayaran yang betul dipaparkan dalam Stripe Checkout.

1. Uji Senario Berbeza

• Bertukar antara mata wang EUR dan USD.
• Tukar pilihan penghantaran dan kuantiti item.
• Sahkan bahawa negara yang dibenarkan sepadan dengan konfigurasi anda.

? Kesimpulan

Et voilà! Anda telah menyediakan fungsi kalkulator penghantaran tersuai yang melaraskan kadar penghantaran secara dinamik berdasarkan mata wang, kuantiti dan lokasi.

Jangan ragu untuk menyesuaikan dan mengembangkan persediaan ini agar sesuai dengan produk dan dasar penghantaran anda sendiri.

? Sumber Tambahan

• Dokumentasi Stripe Checkout
• Dokumentasi Netlify Functions
• Mencipta Kadar Penghantaran dalam Stripe
• Rujukan Stripe.js

---

Nota: Artikel ini berdasarkan senario dunia sebenar untuk prapesanan/penjualan satu buku dengan sehingga tiga salinan dan menunjukkan satu cara untuk mengendalikan pengiraan penghantaran yang melibatkan pembolehubah mata wang, kuantiti dan lokasi. Mungkin terdapat kaedah yang lebih cekap bergantung pada keperluan khusus anda.

Atas ialah kandungan terperinci Membina Kalkulator Penghantaran Tersuai dengan Fungsi Stripe dan Netlify untuk Pelbagai Mata Wang (€/$), Kuantiti dan Sokongan Lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!