Cách thêm Stripe Checkout vào ứng dụng Next.js
Stripe là nền tảng xử lý thanh toán cho phép bạn thêm trang thanh toán dựng sẵn vào trang web, đồng thời chấp nhận và quản lý thanh toán trực tuyến. Nó phổ biến rộng rãi do tính dễ sử dụng, tài liệu phong phú, hỗ trợ thanh toán địa phương, các tùy chọn tùy chỉnh và thương hiệu, đăng ký, lập hóa đơn và ngăn chặn gian lận.
Sử dụng Stripe, bạn có thể chấp nhận thanh toán từ nhiều nguồn khác nhau, bao gồm thẻ tín dụng và thẻ ghi nợ, Apple Pay và Google Pay.
Mục Lục
Thêm Stripe Checkout vào ứng dụng Next.js
Bạn có thể tích hợp thanh toán Stripe với các ứng dụng được tạo bằng các công nghệ khác nhau bao gồm Next.js.
Hướng dẫn này giả định rằng bạn đã thiết lập trang web thương mại điện tử Next.js và chỉ cung cấp hướng dẫn về cách thêm thanh toán Stripe vào trang web.
Thiết lập tài khoản Stripe và truy xuất khóa API
Để sử dụng thanh toán Stripe, bạn cần tạo tài khoản Stripe và nhận khóa API. Các khóa API bao gồm một khóa có thể xuất bản và một khóa bí mật mà bạn sẽ sử dụng để xác thực các yêu cầu từ ứng dụng của mình tới Stripe API.
Thực hiện theo các bước sau để thiết lập tài khoản Stripe:
- Truy cập trang web Stripe và nhấp vào nút “Đăng ký”.
- Nhập email, tên đầy đủ, quốc gia và mật khẩu của bạn và nhấp vào nút “Tạo tài khoản”.
- Xác minh email của bạn bằng cách làm theo hướng dẫn trong email mà Stripe sẽ gửi cho bạn.
- Trên bảng điều khiển sọc, hãy nhấp vào “Kích hoạt thanh toán” và trả lời các câu hỏi nhanh để hoàn tất quy trình thiết lập tài khoản. Những câu hỏi này có thể là về tên doanh nghiệp, địa chỉ và thông tin ngân hàng. Đối với mục đích phát triển, hãy sử dụng chế độ thử nghiệm.
- Sao chép các khóa API từ tab “Nhà phát triển” vào tệp .env trong thư mục ứng dụng của bạn.
Giờ đây, bạn có thể truy cập tài khoản Stripe bằng các khóa API.
Cài đặt gói Stripe npm
Chạy lệnh này để cài đặt gói Stripe npm.
npm install stripe
Nhập thư viện Stripe vào trang thành phần thanh toán của bạn.
import Stripe from 'stripe';
Trong thư mục API, tạo một tệp mới có tên tệp checkout-session.js. Khởi tạo đối tượng Stripe bằng các khóa API mà bạn đã truy xuất từ bảng điều khiển Stripe của mình.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
Trong hàm xử lý, lấy các mục cần kiểm tra từ các tham số cơ thể.
export default async function handler(req, res) {
const { item } = req.body;
};
Tạo một đối tượng phiên thanh toán cho chức năng xử lý và chuyển các mục.
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`,
});
Đây là ý nghĩa của các nút bạn đang chuyển đến đối tượng phiên:
- thanh toán_method_types: Loại phương thức thanh toán mà phiên thanh toán chấp nhận. Duyệt qua danh sách các phương thức thanh toán có sẵn trong tài liệu của Stripe.
- mục hàng: Danh sách các mặt hàng người dùng đang mua.
- chế độ: Chế độ của Phiên thanh toán. Nếu các mặt hàng thanh toán bao gồm ít nhất một mặt hàng định kỳ vượt qua “đăng ký”.
- thành công_url: URL Stripe sẽ chuyển hướng người dùng nếu thanh toán thành công
- hủy_url: URL Stripe sẽ chuyển hướng người dùng nếu họ hủy thanh toán.
Nhìn chung, tệp checkout-session.js sẽ trông như thế này:
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');
}
}
Chức năng này hiện sử dụng thử/bắt để chuyển hướng người dùng khi xảy ra lỗi trong quá trình thanh toán. Bây giờ bạn đã tạo lộ trình API sẽ xử lý thanh toán, bước tiếp theo là tạo thành phần thanh toán để xử lý quy trình thanh toán.
Hãy xem bài đăng này về cách tạo các tuyến API trong Next.js để được giải thích sâu hơn về các tuyến API Next.js.
Tạo Thành phần Thanh toán
Để xử lý thanh toán, bạn cần cài đặt thư viện @stripe/stripe-js bằng NPM.
npm install @stripe/stripe-js
Thư viện @stripe/stripe-js là một tiện ích tải sẽ giúp bạn tải phiên bản Stripe.js.
Khi quá trình cài đặt hoàn tất, hãy tạo một tệp mới trong thư mục /components của bạn có tên /components/checkout.js. Sau đó, gọi hàm loadtripe từ thư viện @stripe/stripe-js, chuyển khóa có thể xuất bản làm đối số.
import { loadStripe } from '@stripe/stripe-js';const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadtripe() trả về một lời hứa sẽ giải quyết bằng một đối tượng Stripe mới được tạo sau khi Stripe.js được tải.
Tiếp theo, thêm chức năng tạo phiên thanh toán trong thành phần.
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>
);
}
Hàm này sử dụng Axios để gọi API mà bạn đã tạo trong thư mục /api để truy xuất phiên thanh toán.
Thêm nút thanh toán trong câu lệnh trả về sẽ kích hoạt chức năng handleCheckout khi được nhấp.
<button onClick={handleCheckout}>
Checkout
</button>
Bạn có thể gọi thành phần thanh toán trên trang giỏ hàng.
Xử lý chuyển hướng từ Stripe
Trong lộ trình API thanh toán, bạn đã xác định một URL thành công và một URL hủy mà sọc đó sẽ chuyển hướng người dùng khi quá trình này thành công hoặc không thành công. URL hủy ánh xạ tới tuyến đường /cancel, trong khi URL thành công ánh xạ tới tuyến đường /success. Thêm hai thành phần trong thư mục /pages có tên là thành công và hủy để xử lý các URL này.
Trong pages/success.js, hãy thêm thành phần thành công.
export default function Success() {
return <div>Checkout out successfully</div>;
}
Trong pages/cancel.js, hãy thêm thành phần hủy.
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
Bây giờ, Stripe sẽ chuyển hướng đến một trong hai trang này tùy thuộc vào trạng thái thanh toán.
Nếu bạn đang sử dụng Next.js 13, hãy xem hướng dẫn này về cách hoạt động của thư mục ứng dụng trong Next.js 13 để chuyển từ thư mục /pages.
Tùy chọn Tùy chỉnh Bổ sung cho Trang Thanh toán
Từ bảng điều khiển Stripe, bạn có thể tùy chỉnh trang thanh toán để phù hợp với giao diện thương hiệu của mình. Bạn có thể thêm logo, biểu tượng, màu thương hiệu, màu nhấn và thậm chí sử dụng miền tùy chỉnh của riêng mình. Ngoài ra, khi tạo phiên thanh toán, bạn có thể thêm các phương thức thanh toán mà mình thích, đồng thời chỉ định ngôn ngữ mà Stripe sẽ hiển thị trên trang thanh toán. Tất cả các tùy chọn này cho phép bạn tùy chỉnh quy trình thanh toán cho phù hợp với ứng dụng của mình.
Tại sao nên sử dụng sọc cho trang thanh toán?
Mặc dù bạn có thể xây dựng dịch vụ xử lý thanh toán của riêng mình nhưng sử dụng nền tảng thanh toán như Stripe thường là một lựa chọn tốt hơn. Thanh toán sọc giúp bạn giảm thời gian phát triển, cho phép bạn bắt đầu chấp nhận thanh toán trong thời gian ngắn.
Hơn nữa, bạn nhận được các tính năng bổ sung như tuân thủ PCI, khôi phục giỏ hàng, khả năng giảm giá và khả năng thu thập thông tin vận chuyển và gửi hóa đơn thanh toán sau.