Next.js 애플리케이션에 Stripe Checkout을 추가하는 방법
Stripe는 사전 구축된 체크아웃 페이지를 웹사이트에 추가하고 온라인 결제를 수락 및 관리할 수 있는 결제 처리 플랫폼입니다. 사용 편의성, 광범위한 문서, 현지 결제 지원, 사용자 지정 및 브랜딩 옵션, 구독, 송장 발행 및 사기 방지로 인해 널리 사용됩니다.
Stripe를 사용하면 신용 카드 및 직불 카드, Apple Pay 및 Google Pay를 비롯한 다양한 출처의 결제를 수락할 수 있습니다.
Next.js 애플리케이션에 Stripe Checkout 추가
Next.js를 비롯한 다양한 기술로 만든 애플리케이션과 Stripe 체크아웃을 통합할 수 있습니다.
이 자습서에서는 Next.js 전자 상거래 사이트가 설정되어 있다고 가정하고 사이트에 Stripe 체크아웃을 추가하는 방법에 대한 가이드만 제공합니다.
Stripe 계정 설정 및 API 키 검색
Stripe 체크아웃을 사용하려면 Stripe 계정을 생성하고 API 키를 받아야 합니다. API 키는 애플리케이션에서 Stripe API로의 요청을 인증하는 데 사용할 게시 가능한 키와 비밀 키로 구성됩니다.
Stripe 계정을 설정하려면 다음 단계를 따르십시오.
- Stripe 웹사이트 로 이동 하여 “Sign up” 버튼을 클릭합니다.
- 이메일, 전체 이름, 국가 및 비밀번호를 입력하고 “계정 만들기” 버튼을 클릭합니다.
- Stripe에서 보내는 이메일의 지침에 따라 이메일을 확인하십시오.
- 스트라이프 대시보드에서 “결제 활성화”를 클릭하고 프롬프트 질문에 답하여 계정 설정 프로세스를 완료하십시오. 이러한 질문은 회사 이름, 주소 및 은행 정보에 관한 것일 수 있습니다. 개발 목적으로 테스트 모드를 사용하십시오.
- “개발자” 탭에서 API 키를 복사합니다. 앱 폴더에 env 파일이 있습니다.
이제 API 키를 사용하여 Stripe 계정에 액세스할 수 있습니다.
스트라이프 npm 패키지 설치
이 명령을 실행하여 Stripe npm 패키지를 설치합니다.
npm install stripe
Stripe 라이브러리를 결제 구성 요소 페이지로 가져옵니다.
import Stripe from 'stripe';
API 폴더에서 checkout-session.js 파일이라는 새 파일을 만듭니다. Stripe 대시보드에서 검색한 API 키로 Stripe 개체를 초기화합니다.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
핸들러 함수에서 본문 매개변수에서 체크아웃할 항목을 가져옵니다.
export default async function handler(req, res) {
const { item } = req.body;
};
처리기 함수에 체크아웃 세션 개체를 만들고 항목을 전달합니다.
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
item,
],
mode: 'payment',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
다음은 세션 개체에 전달하는 노드의 의미입니다.
- payment_method_types : 체크아웃 세션에서 수락하는 결제 방법 유형입니다. Stripe 설명서 에서 사용 가능한 결제 방법 목록을 찾아 보십시오 .
- line_items : 사용자가 구매하는 항목의 목록입니다.
- mode : 체크아웃 세션의 모드입니다. 체크 아웃 항목에 반복 항목이 하나 이상 포함되어 있으면 “구독”이 통과됩니다.
- success_url : 결제가 성공하면 URL 스트라이프가 사용자를 리디렉션합니다.
- cancel_url : URL 스트라이프는 결제를 취소하면 사용자를 리디렉션합니다.
전체적으로 checkout-session.js 파일은 다음과 같아야 합니다.
export default async function handler(req, res) {
if (req.method === 'POST') {
const { cart } = req.body;
try {
const session = await stripe.checkout.sessions.create({
line_items: [
cart
],
mode: 'payment',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
이제 이 함수는 체크아웃 중에 오류가 발생하면 try/catch를 사용하여 사용자를 리디렉션합니다. 이제 결제를 처리할 API 경로를 생성했으므로 다음 단계는 체크아웃 프로세스를 처리할 체크아웃 구성 요소를 생성하는 것입니다.
Next.js API 경로에 대한 자세한 설명은 Next.js에서 API 경로 생성에 대한 이 게시물을 확인하세요.
결제 구성요소 생성
결제를 처리하려면 NPM을 사용하여 @stripe/stripe-js 라이브러리를 설치해야 합니다.
npm install @stripe/stripe-js
@stripe/stripe-js 라이브러리는 Stripe.js 인스턴스를 로드하는 데 도움이 되는 로드 유틸리티입니다.
설치가 완료되면 /components 디렉토리에 /components/checkout.js라는 새 파일을 만듭니다. 그런 다음 게시 가능한 키를 인수로 전달하여 @stripe/stripe-js 라이브러리에서 loadstripe 함수를 호출합니다.
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe()는 Stripe.js가 로드되면 새로 생성된 Stripe 객체로 해결되는 약속을 반환합니다.
다음으로 구성 요소에서 결제 세션을 생성하는 기능을 추가합니다.
export default function Checkout({cart}) {
const handleCheckout = async () => {
try {
const stripe = await stripePromise;
const checkoutSession = await axios.post("/api/checkout-session", {
cart,
});
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
} catch (error) {
console.log(error);
}
};
return (
<div>
</div>
);
}
이 함수는 Axios를 사용하여 /api 폴더에 생성한 API를 호출하여 체크아웃 세션을 검색합니다.
클릭 시 handleCheckout 함수를 트리거하는 체크아웃 버튼을 return 문에 추가합니다.
<button onClick={handleCheckout}>
Checkout
</button>
장바구니 페이지에서 결제 구성요소를 호출할 수 있습니다.
Stripe에서 리디렉션 처리
결제 API 경로에서 프로세스가 성공하거나 실패할 때 스트라이프가 사용자를 리디렉션해야 하는 성공 URL 및 취소 URL을 정의했습니다. 취소 URL은 /cancel 경로에 매핑되고 성공 URL은 /success 경로에 매핑됩니다. /pages 폴더에 성공 및 취소라는 두 구성 요소를 추가하여 이러한 URL을 처리합니다.
pages/success.js에서 성공 구성 요소를 추가합니다.
export default function Success() {
return <div>Checkout out successfully</div>;
}
pages/cancel.js에서 취소 구성 요소를 추가합니다.
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
이제 Stripe는 결제 상태에 따라 이러한 페이지 중 하나로 리디렉션됩니다.
Next.js 13을 사용하는 경우 앱 폴더가 Next.js 13에서 작동하여 /pages 폴더에서 전환하는 방법에 대한 이 자습서를 참조하세요.
결제 페이지에 대한 추가 사용자 지정 옵션
Stripe 대시보드에서 체크아웃 페이지를 브랜드 모양에 맞게 사용자 정의할 수 있습니다. 로고, 아이콘, 브랜드 색상, 강조 색상을 추가하고 사용자 지정 도메인을 사용할 수도 있습니다. 또한 체크아웃 세션을 생성할 때 선호하는 결제 방법을 추가하고 스트라이프가 체크아웃 페이지에 표시할 언어를 지정할 수도 있습니다. 이러한 모든 옵션을 사용하면 애플리케이션에 맞게 체크아웃 프로세스를 사용자 정의할 수 있습니다.
체크아웃 페이지에 스트라이프를 사용하는 이유는 무엇입니까?
자체 결제 처리 서비스를 구축할 수 있지만 일반적으로 Stripe와 같은 결제 플랫폼을 사용하는 것이 더 나은 옵션입니다. Stripe 체크아웃을 사용하면 개발 시간을 단축하여 짧은 시간 내에 결제 수락을 시작할 수 있습니다.
또한 PCI 규정 준수, 카트 복구, 할인 기능, 배송 정보 수집 및 후불 송장 전송 기능과 같은 추가 기능을 사용할 수 있습니다.
답글 남기기