خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه Stripe Checkout را به برنامه Next.js اضافه کنیم

ارشیا یوسفی ادیب ۸ بهمن, ۱۴۰۲ 4 min read

با این ارائه دهنده مورد اعتماد، پشتیبانی تجارت الکترونیک درجه یک را دریافت کنید.

Stripe یک پلت فرم پردازش پرداخت است که به شما امکان می دهد یک صفحه پرداخت از پیش ساخته شده را به یک وب سایت اضافه کنید و پرداخت های آنلاین را بپذیرید و مدیریت کنید. به دلیل سهولت استفاده، اسناد گسترده، پشتیبانی از پرداخت‌های محلی، گزینه‌های سفارشی‌سازی و برندسازی، اشتراک‌ها، صورت‌حساب، و جلوگیری از تقلب، بسیار محبوب است.

با استفاده از Stripe، می‌توانید از منابع مختلفی از جمله کارت‌های اعتباری و نقدی، Apple Pay و Google Pay پرداخت‌ها را بپذیرید.

افزودن Stripe Checkout به برنامه Next.js

می‌توانید Stripe Checkout را با برنامه‌های ایجاد شده با فناوری‌های مختلف از جمله Next.js ادغام کنید.

این آموزش فرض می‌کند که شما یک سایت تجارت الکترونیک Next.js راه‌اندازی کرده‌اید و فقط راهنمایی در مورد نحوه افزودن پرداخت Stripe به سایت ارائه می‌دهد.

راه اندازی یک حساب Stripe و بازیابی کلیدهای API

برای استفاده از Stripe Checkout، باید یک حساب Stripe ایجاد کنید و کلیدهای API را دریافت کنید. کلیدهای API از یک کلید قابل انتشار و یک کلید مخفی تشکیل شده‌اند که از آن‌ها برای احراز هویت درخواست‌های برنامه خود به Stripe API استفاده می‌کنید.

برای راه اندازی حساب Stripe این مراحل را دنبال کنید:

  1. به وب سایت Stripe بروید و روی دکمه “ثبت نام” کلیک کنید.
  2. ایمیل، نام کامل، کشور و رمز عبور خود را وارد کنید و روی دکمه «ایجاد حساب کاربری» کلیک کنید.
  3. ایمیل خود را با پیروی از دستورالعمل های ایمیلی که Stripe برای شما ارسال می کند تأیید کنید.
  4. در داشبورد نواری، روی «فعال کردن پرداخت‌ها» کلیک کنید و برای تکمیل فرآیند راه‌اندازی حساب، به سؤالات فوری پاسخ دهید. این سوالات ممکن است در مورد نام کسب و کار، آدرس و اطلاعات بانک باشد. برای اهداف توسعه، از حالت تست استفاده کنید.
  5. کلیدهای API را از برگه “توسعه دهندگان” در فایل .env در پوشه برنامه خود کپی کنید.
مطلب مرتبط:   8 دوره برتر Angular برای کاربران مبتدی و پیشرفته

اکنون می توانید با استفاده از کلیدهای API به حساب Stripe دسترسی پیدا کنید.

نصب بسته 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);

در تابع handler، موارد را از پارامترهای بدنه بررسی کنید.

export default async function handler(req, res) {
  const { item } = req.body;
};

یک شیء جلسه پرداخت در تابع handler ایجاد کنید و موارد را ارسال کنید.

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: لیستی از اقلامی که کاربر در حال خرید است.
  • حالت: حالت جلسه پرداخت. اگر موارد تسویه‌حساب شامل حداقل یک مورد تکراری «اشتراک» باشد.
  • success_url: در صورت موفقیت آمیز بودن پرداخت، URL Stripe کاربران را هدایت می کند
  • cancel_url: URL Stripe در صورت لغو پرداخت، کاربران را هدایت می کند.

در مجموع، فایل 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 را ایجاد کرده‌اید که پرداخت را پردازش می‌کند، گام بعدی ایجاد یک جزء پرداخت برای رسیدگی به فرآیند پرداخت است.

مطلب مرتبط:   نحوه ساخت دستورالعمل های سفارشی در Angular

این پست در مورد ایجاد مسیرهای API در Next.js را برای توضیح بیشتر در مورد مسیرهای API Next.js بررسی کنید.

ایجاد کامپوننت پرداخت

برای پردازش پرداخت، باید کتابخانه @stripe/stripe-js را با استفاده از NPM نصب کنید.

npm install @stripe/stripe-js

کتابخانه @stripe/stripe-js یک ابزار بارگیری است که به شما کمک می کند نمونه Stripe.js را بارگیری کنید.

پس از اتمام نصب، یک فایل جدید در پوشه /components خود با نام /components/checkout.js ایجاد کنید. سپس تابع loadstripe را از کتابخانه @stripe/stripe-js فراخوانی کنید و کلید قابل انتشار را به عنوان آرگومان ارسال کنید.

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 را فعال می کند.

<button onClick={handleCheckout}>
    Checkout
</button>

می توانید جزء پرداخت را در صفحه سبد خرید تماس بگیرید.

مدیریت تغییر مسیرها از Stripe

در مسیر پرداخت API، شما یک URL موفقیت و یک URL لغو تعریف کردید که در صورت موفقیت یا عدم موفقیت فرآیند، نوار باید کاربر را هدایت کند. URL لغو به مسیر /cancel نگاشت، در حالی که URL موفقیت به مسیر /success نگاشت می شود. دو مؤلفه در پوشه /pages با نام success اضافه کنید و برای مدیریت این 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 برای صفحه پرداخت استفاده کنیم؟

در حالی که می توانید خدمات پردازش پرداخت خود را بسازید، استفاده از یک پلت فرم پرداخت مانند Stripe معمولاً گزینه بهتری است. پرداخت خطی به شما کمک می‌کند زمان توسعه را کاهش دهید و به شما امکان می‌دهد در مدت کوتاهی پرداخت‌ها را بپذیرید.

علاوه بر این، ویژگی‌های اضافی مانند سازگاری با PCI، بازیابی سبد خرید، قابلیت‌های تخفیف، و توانایی جمع‌آوری اطلاعات حمل و نقل و ارسال فاکتورهای پس از پرداخت را دریافت می‌کنید.

Tags: