다중 통화(€/$), 수량 및 위치 지원을 위한 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);
? 기능 테스트
- Netlify Dev Server 시작
exports.handler = async (event) => { const order = JSON.parse(event.body); // Rest of the code... };
- 주문하기
- 브라우저에서 index.html 파일을 엽니다.
- 옵션을 선택하고 "사전 주문" 버튼을 클릭하세요.
- Stripe Checkout에 올바른 배송비와 결제 방법이 표시되는지 확인하세요.
- 다양한 시나리오 테스트
- EUR과 USD 통화를 전환하세요.
- 배송 옵션 및 품목 수량을 변경하세요.
- 허용된 국가가 구성과 일치하는지 확인하세요.
? 결론
자 짜잔! 통화, 수량 및 위치
를 기준으로 배송료를 동적으로 조정하는 맞춤형 배송 계산기 기능을 설정했습니다.귀하의 제품 및 배송 정책에 맞게 이 설정을 자유롭게 조정하고 확장하세요.
? 추가 리소스
- Stripe Checkout 문서
- Netlify 함수 문서
- Stripe에서 배송료 생성
- Stripe.js 참조
참고: 이 문서는 단일 도서를 최대 3권까지 선주문/판매하는 실제 시나리오를 기반으로 하며 통화, 수량 및 위치 변수와 관련된 배송 계산을 처리하는 한 가지 방법을 보여줍니다. 특정 요구사항에 따라 더 효율적인 방법이 있을 수 있습니다.
위 내용은 다중 통화(€/$), 수량 및 위치 지원을 위한 Stripe 및 Netlify 기능을 갖춘 맞춤형 배송 계산기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 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
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 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는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
