다중 통화(€/$), 수량 및 위치 지원을 위한 Stripe 및 Netlify 기능을 갖춘 맞춤형 배송 계산기 구축

3c90066 커밋

더 읽기 전에 참고로 저는 비즈니스를 운영하는 데 필요한 것을 스스로 배우고 코딩합니다. 따라서 다음 정보를 있는 그대로 받아들이시기 바랍니다. 우리가 직접 사용한 실제 사례인가요? 코워킹에 관한 노란 책. 당시에는 더 나은 솔루션을 찾을 수 없었기 때문에 전자상거래 웹사이트를 위해 다음을 구축했습니다.

책과 같이 단일 제품을 온라인으로 판매하는 것은 국제 배송비, 여러 통화 및 다양한 수량의 복잡성에 직면하기 전까지는 간단할 수 있습니다. 특히 Stripe Checkout에서는 기본적으로 하나의 배송비만 허용하므로 더욱 그렇습니다. 이 기사에서는 이러한 문제를 해결하기 위해 Netlify Functions 및 Stripe를 사용하여 맞춤형 배송 계산기를 구축한 방법을 살펴보겠습니다. 결국 고객의 통화(EUR/USD), 수량에 따라 배송비가 동적으로 변하는 최대 3권의 책을 판매할 수 있는 맞춤형 솔루션을 갖게 됩니다. , 위치.

이 예는 우리 요구 사항에 매우 구체적이지만 요구 사항에 맞게 조정할 수 있습니다. 솔루션, 업그레이드 또는 개선 사항을 자유롭게 공유해 주세요.

? 전제 조건

자세히 알아보기 전에 다음 사항을 확인하세요.

• 배포된 사이트가 있는 Netlify 계정
• 테스트 및 라이브 API 키가 있는 Stripe 계정.
• HTML, JavaScript, 서버리스 기능에 대한 기본 이해
• 환경 변수에 대한 지식

? 개요

다음과 같은 원활한 결제 환경을 만들어 보세요.

• 고객의 통화, 상품 개수, 위치
를 기준으로 배송비가 결정됩니다.
• EUR 및 USD 통화를 모두 지원합니다.
• 유럽 및 전 세계 목적지에 대해 다양한 배송료를 처리합니다.
• 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를 설정합니다.
• 환경 변수 예시: EUR 통화를 사용하는 유럽 품목 1개에 대한 SHIPPING_RATE_EUR_EU_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 분석

• 통화 탭: 사용자가 EUR 및 USD 가격 중에서 선택할 수 있습니다.
• 도서수: 최대 3권까지 선택할 수 있습니다.
• 배송지: 배송비별로 그룹화된 국가로 채워진 드롭다운
• 결제 버튼: 클릭하면 결제 프로세스가 시작됩니다.

? 자바스크립트 로직(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>

? 자바스크립트 분석

• 이벤트 리스너: 결제 버튼에 클릭 이벤트를 첨부합니다.
• 주문 내역 확인: 클릭한 버튼을 기준으로 통화, 배송 옵션, 도서 수, 가격 ID를 추출합니다.
• 주문 데이터 준비: 필요한 모든 주문 정보가 포함된 개체를 만듭니다.
• 결제 세션 가져오기: 주문 데이터와 함께 Netlify 기능에 POST 요청을 보냅니다.
• 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);

? 기능 테스트

1. Netlify Dev Server 시작

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

1. 주문하기

• 브라우저에서 index.html 파일을 엽니다.
• 옵션을 선택하고 "사전 주문" 버튼을 클릭하세요.
• Stripe Checkout에 올바른 배송비와 결제 방법이 표시되는지 확인하세요.

1. 다양한 시나리오 테스트

• EUR과 USD 통화를 전환하세요.
• 배송 옵션 및 품목 수량을 변경하세요.
• 허용된 국가가 구성과 일치하는지 확인하세요.

? 결론

자 짜잔! 통화, 수량 및 위치

를 기준으로 배송료를 동적으로 조정하는 맞춤형 배송 계산기 기능을 설정했습니다.

귀하의 제품 및 배송 정책에 맞게 이 설정을 자유롭게 조정하고 확장하세요.

? 추가 리소스

• Stripe Checkout 문서
• Netlify 함수 문서
• Stripe에서 배송료 생성
• Stripe.js 참조

---

참고: 이 문서는 단일 도서를 최대 3권까지 선주문/판매하는 실제 시나리오를 기반으로 하며 통화, 수량 및 위치 변수와 관련된 배송 계산을 처리하는 한 가지 방법을 보여줍니다. 특정 요구사항에 따라 더 효율적인 방법이 있을 수 있습니다.

위 내용은 다중 통화(€/$), 수량 및 위치 지원을 위한 Stripe 및 Netlify 기능을 갖춘 맞춤형 배송 계산기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!