Next.js، Express، اور Stripe Connect کا استعمال کرتے ہوئے ایک آن لائن مارکیٹ پلیس کیسے بنایا جائے۔

کیا آپ نے کبھی سوچا ہے کہ Etsy، Uber، یا Teachable جیسے پلیٹ فارم ہزاروں فروخت کنندگان کی ادائیگیوں کو کیسے سنبھالتے ہیں؟ جواب ہے ملٹی وینڈر مارکیٹ پلیس: یہ ایک ایسی ایپلی کیشن ہے جو بیچنے والوں کو سائن اپ کرنے، مصنوعات یا خدمات کی فہرست بنانے اور صارفین سے براہ راست ادائیگی وصول کرنے کی اجازت دیتی ہے۔

اس ہینڈ بک میں، آپ ٹائپ اسکرپٹ کا استعمال کرتے ہوئے شروع سے ایک مکمل بازار بنائیں گے۔ موجودہ ڈیٹا بیس کی ضرورت نہیں ہے۔ اس کے بجائے، آپ پٹی کو اپنے پروڈکٹ کیٹلاگ اور ادائیگی کے انجن کے طور پر استعمال کریں گے۔

یہ ہے کہ اصلی مارکیٹ کیسے کام کرتی ہے: پٹی پروڈکٹ، قیمتوں کا تعین، اور کسٹمر ڈیٹا اسٹور کرتی ہے، اور ایپلیکیشن صارف کے تجربے کو سنبھالتی ہے۔

یہاں کیا بنانا ہے:

1. بیچنے والے کا آن بورڈنگ فلو جہاں بیچنے والا ایک اکاؤنٹ بناتا ہے اور اسٹرائپ سے جڑتا ہے۔

2. پروڈکٹ مینجمنٹ سسٹم جو بیچنے والوں کو براہ راست پٹی کے ذریعے مصنوعات کو شامل کرنے اور فہرست کرنے کی اجازت دیتا ہے۔

3. ادائیگی کا بہاؤ ایک بار کی ادائیگیوں اور بار بار چلنے والی سبسکرپشنز دونوں کو سپورٹ کرتا ہے۔

4. ریئل ٹائم میں ادائیگی کے واقعات وصول کرنے کے لیے ویب ہُک

5. بلنگ پورٹل جہاں صارفین اپنی سبسکرپشنز کا نظم کر سکتے ہیں۔

6. ایک مکمل اسٹور جہاں گاہک مصنوعات کو براؤز اور خرید سکتے ہیں۔

آپ آخر میں منسلک GitHub ریپوزٹری سے مکمل سورس کوڈ بھی حاصل کر سکتے ہیں۔

انڈیکس

شرطیں

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس درج ذیل ہیں:

1. آپ کے کمپیوٹر پر Node.js (ورژن 18 یا اس سے اوپر) انسٹال ہے۔

2. React، TypeScript، اور REST API کی بنیادی تفہیم

3. اسٹرائپ اکاؤنٹ (stripe.com پر مفت سائن اپ کریں)

4. کوڈ ایڈیٹر جیسے VS کوڈ

تم ہو ~ نہیں اس پروجیکٹ کو ڈیٹا بیس کی ضرورت ہے۔ پٹی آپ کے پروڈکٹ، قیمتوں اور کسٹمر کی معلومات کو اسٹور کرتی ہے۔ یہ فن تعمیر کو سادہ رکھتا ہے اور پیداواری منڈیوں کی تعداد کی عکاسی کرتا ہے جن میں یہ اصل میں کام کرتی ہے۔

ایک دھاری دار کنکشن کیا ہے؟

اسٹرائپ کنیکٹ APIs کا ایک سیٹ ہے جسے پلیٹ فارمز اور بازاروں کے لیے ڈیزائن کیا گیا ہے۔ یہ آپ کو اپنے مرچنٹس کے لیے ایک اکاؤنٹ بنانے کی اجازت دیتا ہے (سٹرائپ اسے "لنکڈ اکاؤنٹ” کہتی ہے)، ادائیگیوں کے راستے، اور تمام لین دین کے لیے پلیٹ فارم فیس حاصل کر سکتے ہیں۔

اس ٹیوٹوریل میں، آپ Stripe’s کے بارے میں سیکھیں گے۔ V2 اکاؤنٹ APIلنک کردہ اکاؤنٹ بنانے کا یہ تازہ ترین تجویز کردہ طریقہ ہے۔ V2 API کا استعمال کرتے ہوئے، آپ کنفیگریشن آبجیکٹ کے ذریعے ہر اکاؤنٹ کیا کر سکتا ہے (کارڈ کی ادائیگی قبول کر سکتا ہے، ادائیگیاں وصول کر سکتا ہے) کو ترتیب دیتا ہے، اور اسٹرائپ میزبانی شدہ آن بورڈنگ فلو کے ذریعے تمام تعمیل اور شناخت کی تصدیق کو ہینڈل کرتا ہے۔

ادائیگی کا بہاؤ مندرجہ ذیل ہے:

1. صارف ایک پروڈکٹ کا انتخاب کرتا ہے اور بازار میں چیک آؤٹ پر کلک کرتا ہے۔

2. آپ کا سرور مرچنٹ کے لنک کردہ اکاؤنٹ سے منسلک اسٹرائپ چیک آؤٹ سیشن بناتا ہے۔

3. صارفین اسٹرائپ کے ہوسٹنگ چیک آؤٹ پیج پر ادائیگی کرتے ہیں۔

4. پٹی خود بخود آپ کی ادائیگیوں کو تقسیم کرتی ہے۔ بیچنے والوں کو ان کا حصہ ملتا ہے اور پلیٹ فارم درخواست کی فیس رکھتا ہے۔

5. اسٹرائپ ادائیگی کی تصدیق کرنے والے سرور کو ویب ہک ایونٹ بھیجتی ہے۔

6. بیچنے والے اپنی کمائی دیکھ سکتے ہیں اور اپنے سٹرائپ ڈیش بورڈ سے رقوم نکال سکتے ہیں۔

پروجیکٹ کیسے ترتیب دیا جائے۔

بیک اینڈ اور فرنٹ اینڈ کے لیے علیحدہ ڈائریکٹریز کے ساتھ پروجیکٹ فولڈر بنائیں۔

mkdir marketplace && cd marketplace
mkdir server client

بیک اینڈ کو کیسے ترتیب دیا جائے۔

اپنی سرور ڈائرکٹری پر جائیں اور ٹائپ اسکرپٹ پروجیکٹ شروع کریں۔

cd server
npm init -y
npm install express cors dotenv stripe
npm install -D typescript ts-node @types/express @types/cors @types/node
npx tsc --init
mkdir src

tsconfig.json کھولیں اور اسے درج ذیل ترتیبات کے ساتھ اپ ڈیٹ کریں:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"]
}

پھر اپنے سرور کے روٹ میں ایک .env فائل بنائیں۔

STRIPE_SECRET_KEY=sk_test_your_key_here
DOMAIN=http://localhost:3000

آپ ڈیولپر > API کیز کے تحت اپنے اسٹرائپ ڈیش بورڈ میں اپنی اسٹرائپ ٹیسٹ کی خفیہ کلید تلاش کر سکتے ہیں۔ DOMAIN متغیر سرور کو بتاتا ہے کہ ادائیگی کے بعد صارف کو کہاں ری ڈائریکٹ کرنا ہے۔

مندرجہ ذیل اسکرپٹ کو package.json میں شامل کریں۔

{
  "scripts": {
    "dev": "ts-node src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

ایکسپریس بیک اینڈ کیسے بنایا جائے۔

ایک src/index.ts فائل بنائیں۔ یہ پورا پس منظر ہوگا۔ آئیے سیٹ اپ اور امپورٹ کے ساتھ شروع کریں۔

import express, { Request, Response, Router } from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import Stripe from 'stripe';

dotenv.config();

const app = express();
const router = Router();
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string);

app.use(cors({ origin: process.env.DOMAIN }));
app.use(express.static('public'));

کوئی ڈیٹا بیس کلائنٹ درآمد نہیں کیا گیا ہے۔ پٹی ڈیٹا کی تہہ ہے۔ تمام پروڈکٹس، قیمتیں، صارفین اور لین دین اسٹرائپ پر رہتے ہیں۔ ایکسپریس سرور ایک پتلی آرکیسٹریشن پرت ہے جو فرنٹ اینڈ کی جانب سے اسٹرائپ API کے ساتھ بات چیت کرتی ہے۔

ہم بھی چڑھتے ہیں۔ express.static("public") اگر ضرورت ہو تو آپ بعد میں جامد فائلیں فراہم کر سکتے ہیں۔ ویب ہُک اینڈ پوائنٹ کو خام درخواست کا حصہ درکار ہے، لہذا ہم اسے JSON پارسر سے پہلے رجسٹر کریں گے۔ اب اسے شامل کرتے ہیں۔

بیچنے والے کی آن بورڈنگ کو کیسے ہینڈل کریں۔

بیچنے والے کو سب سے پہلے پلیٹ فارم پر ایک اکاؤنٹ بنانا اور اسے اسٹرائپ سے جوڑنا ہے۔ اس میں دو مراحل شامل ہیں: ایک منسلک اکاؤنٹ بنانا اور پھر بیچنے والے کو اسٹرائپ کے ہوسٹنگ آن بورڈنگ فارم پر بھیجنا۔

لنکڈ اکاؤنٹ کیسے بنایا جائے۔

src/index.ts میں درج ذیل راستہ شامل کریں:

// Type definitions for request bodies
interface CreateAccountBody {
  email: string;
}
interface AccountIdBody {
  accountId: string;
}

// Create a Connected Account using Stripe V2 API
router.post(
  '/create-connect-account',
  async (req: Request<{}, {}, CreateAccountBody>, res: Response) => {
    try {
      const account = await stripe.v2.core.accounts.create({
        display_name: req.body.email,
        contact_email: req.body.email,
        dashboard: 'full',
        defaults: {
          responsibilities: {
            fees_collector: 'stripe',
            losses_collector: 'stripe',
          },
        },
        identity: {
          country: 'GB',
          entity_type: 'company',
        },
        configuration: {
          customer: {},
          merchant: {
            capabilities: {
              card_payments: { requested: true },
            },
          },
        },
      });
      res.json({ accountId: account.id });
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Unknown error';
      res.status(500).json({ error: message });
    }
  },
);

آئیے تجزیہ کریں کہ یہ کوڈ کیا کرتا ہے۔ کہ stripe.v2.core.accounts.create() یہ طریقہ ایک نیا لنک شدہ اکاؤنٹ بنانے کے لیے Stripe’s V2 API کا استعمال کرتا ہے۔ اہم ترتیب کے اختیارات ہیں:

1. dashboard: "full" تاجروں کو اپنے اسٹرائپ ڈیش بورڈ تک رسائی حاصل ہے جہاں وہ ادائیگیاں دیکھ سکتے ہیں، ادائیگیوں کا نظم کر سکتے ہیں اور تنازعات کو نمٹ سکتے ہیں۔

2. responsibilities یہ اسٹرائپ کو بتاتا ہے کہ کون فیس جمع کرتا ہے اور کون کسی نقصان کا ذمہ دار ہے۔ دونوں کو "سٹرائپ” پر سیٹ کرنے کا مطلب ہے کہ پٹی اس کو سنبھالے گی، جو کہ سب سے آسان کنفیگریشن ہے۔

3. identity ملک اور ہستی کی قسم سیٹ کریں۔ "GB” کو اپنے ملک کے کوڈ سے تبدیل کریں (جیسے "US” ریاستہائے متحدہ کے لیے)۔

4. configuration.merchant.capabilities درخواست card_payments یہ خصوصیت بیچنے والوں کو کریڈٹ کارڈ کی ادائیگی قبول کرنے کی اجازت دیتی ہے۔

آن بورڈنگ لنک کیسے بنایا جائے۔

اکاؤنٹ بنانے کے بعد، آپ کو تاجروں کو اسٹرائپ کے ہوسٹنگ آن بورڈنگ فارم پر بھیجنا ہوگا۔ درج ذیل راستہ شامل کریں:

// Create Account Link for onboarding
router.post('/create-account-link', async (req: Request<{}, {}, AccountIdBody>, res: Response) => {
  const { accountId } = req.body;
  try {
    const accountLink = await stripe.v2.core.accountLinks.create({
      account: accountId,
      use_case: {
        type: 'account_onboarding',
        account_onboarding: {
          configurations: ['merchant', 'customer'],
          refresh_url: `${process.env.DOMAIN}`,
          return_url: `\({process.env.DOMAIN}?accountId=\){accountId}`,
        },
      },
    });
    res.json({ url: accountLink.url });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    res.status(500).json({ error: message });
  }
});

کہ accountLinks.create() یہ طریقہ ایک عارضی URL بناتا ہے جو بیچنے والے کو اسٹرائپ کے آن بورڈنگ فارم پر لے جاتا ہے۔ اس فارم پر، Stripe بیچنے والے کی شناختی دستاویزات، بینک اکاؤنٹ کی معلومات، اور ٹیکس کی معلومات جمع کرتی ہے۔ آپ کو خود اس میں سے کچھ بنانے کی ضرورت نہیں ہے۔

کہ return_url یہ وہ جگہ ہے جہاں Stripe آن بورڈنگ مکمل کرنے کے بعد بیچنے والے کو ری ڈائریکٹ کرتی ہے۔ درج ذیل شامل کریں: accountId ہم اسے استفسار کے پیرامیٹر کے طور پر استعمال کرتے ہیں تاکہ ہم اسے منتخب کر کے فرنٹ اینڈ پر محفوظ کر سکیں۔

اپنے اکاؤنٹ کا اسٹیٹس کیسے چیک کریں۔

آپ کو اس بات کی تصدیق کرنے کا طریقہ درکار ہے کہ تاجروں نے آن بورڈنگ مکمل کر لی ہے اور ادائیگیاں قبول کرنے کے لیے تیار ہیں۔ درج ذیل راستہ شامل کریں:

// Get Connected Account Status
router.get(
  '/account-status/:accountId',
  async (req: Request<{ accountId: string }>, res: Response) => {
    try {
      const account = await stripe.v2.core.accounts.retrieve(req.params.accountId, {
        include: ['requirements', 'configuration.merchant'],
      });
      const payoutsEnabled =
        account.configuration?.merchant?.capabilities?.stripe_balance?.payouts?.status === 'active';
      const chargesEnabled =
        account.configuration?.merchant?.capabilities?.card_payments?.status === 'active';
      const summaryStatus = account.requirements?.summary?.minimum_deadline?.status;
      const detailsSubmitted = !summaryStatus || summaryStatus === 'eventually_due';
      res.json({
        id: account.id,
        payoutsEnabled,
        chargesEnabled,
        detailsSubmitted,
        requirements: account.requirements?.entries,
      });
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Unknown error';
      res.status(500).json({ error: message });
    }
  },
);

یہ راستہ منسلک کھاتوں کی تلاش کرتا ہے اور تین اہم حالتوں کو چیک کرتا ہے:

• chargesEnabled یہ آپ کو بتائے گا کہ آیا بیچنے والا ادائیگی قبول کر سکتا ہے۔

• payoutsEnabled ہمیں بتائیں کہ کیا آپ اپنے بینک اکاؤنٹ میں ادائیگی حاصل کر سکتے ہیں۔

• detailsSubmitted اگر آپ نے آن بورڈنگ فارم مکمل کر لیا ہے تو آپ کو بتاتا ہے۔

فرنٹ اینڈ ان جھنڈوں کو خصوصیات دکھانے یا چھپانے کے لیے استعمال کرتا ہے۔

پٹی کے ساتھ پروڈکٹ کیسے بنائیں

اپنی مصنوعات کو ڈیٹا بیس میں ذخیرہ کرنے کے بجائے، آپ انہیں براہ راست اسٹرائپ میں بنائیں گے۔ ہر پروڈکٹ بیچنے والے کے منسلک اکاؤنٹ میں بنائی جاتی ہے۔ stripeAccount ہیڈر اس کا مطلب یہ ہے کہ ہر بیچنے والے کا اسٹرائپ کے اندر اپنا الگ الگ پروڈکٹ کیٹلاگ ہوتا ہے۔

// Type definition for product creation
interface CreateProductBody {
  productName: string;
  productDescription: string;
  productPrice: number;
  accountId: string;
}
// Create a product on the connected account
router.post('/create-product', async (req: Request<{}, {}, CreateProductBody>, res: Response) => {
  const { productName, productDescription, productPrice, accountId } = req.body;
  try {
    // Create the product on the connected account
    const product = await stripe.products.create(
      {
        name: productName,
        description: productDescription,
      },
      { stripeAccount: accountId },
    ); // Create a price for the product
    const price = await stripe.prices.create(
      {
        product: product.id,
        unit_amount: productPrice,
        currency: 'usd',
      },
      { stripeAccount: accountId },
    );
    res.json({
      productName,
      productDescription,
      productPrice,
      priceId: price.id,
    });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    res.status(500).json({ error: message });
  }
});

دو پٹی API کالیں یہاں ہوتی ہیں۔ سب سے پہلے stripe.products.create() ایک پروڈکٹ بنائیں (نام اور تفصیل)۔ پھر stripe.prices.create() اس پروڈکٹ کے لیے ایک قیمت (رقم اور کرنسی) بنائیں۔

چونکہ ایک پروڈکٹ کی متعدد قیمتیں ہوسکتی ہیں (جیسے ماہانہ منصوبہ، سالانہ منصوبہ)، پٹی مصنوعات اور قیمتوں میں فرق کرتی ہے۔

کہ { stripeAccount: accountId } دونوں کالوں کے اختیارات اسٹرائپ کو ہدایت دیتے ہیں کہ یہ وسائل آپ کے پلیٹ فارم اکاؤنٹ کے بجائے بیچنے والے کے لنک کردہ اکاؤنٹ میں بنائیں۔ یہ ایک بہت اہم تفصیل ہے۔ اس معلومات کے بغیر، آپ کے پلیٹ فارم اکاؤنٹ میں پروڈکٹس بنائے جائیں گے اور بیچنے والے انہیں نہیں دیکھ سکیں گے۔

اپنی مصنوعات کو کیسے حاصل کریں۔

ایک ایسا راستہ شامل کریں جس میں کسی مخصوص بیچنے والے کی تمام مصنوعات کی فہرست ہو۔

// Fetch products for a specific account
router.get('/products/:accountId', async (req: Request<{ accountId: string }>, res: Response) => {
  const { accountId } = req.params;
  try {
    const options: Stripe.RequestOptions = {};
    if (accountId !== 'platform') {
      options.stripeAccount = accountId;
    }
    const prices = await stripe.prices.list(
      {
        expand: ['data.product'],
        active: true,
        limit: 100,
      },
      options,
    );
    const products = prices.data.map((price) => {
      const product = price.product as Stripe.Product;
      return {
        id: product.id,
        name: product.name,
        description: product.description,
        price: price.unit_amount,
        priceId: price.id,
        period: price.recurring ? price.recurring.interval : null,
      };
    });
    res.json(products);
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    res.status(500).json({ error: message });
  }
});

یہ راستہ بیچنے والے کے اسٹرائپ اکاؤنٹ سے تمام فعال قیمتیں کھینچتا ہے اور پروڈکٹ ڈیٹا کو بڑھاتا ہے (استعمال کرتے ہوئے: expand: ["data.product"]اسی API کال سے پروڈکٹ کا نام اور تفصیل حاصل کرنے کے لیے۔ ایک بار کی مصنوعات کے لیے، دورانیہ کا فیلڈ خالی ہے۔ سبسکرپشنز کے لیے، یہ "مہینہ” یا "سال” ہے۔

ادائیگی کا بہاؤ کیسے بنایا جائے۔

آپ کے ادائیگی کے بہاؤ کو دو منظرناموں کو ہینڈل کرنا چاہیے: انفرادی پروڈکٹس کے لیے ایک بار کی ادائیگی اور بار بار چلنے والی سبسکرپشنز۔ اسٹرائپ کا ادائیگی سیشن دونوں کو ہینڈل کرتا ہے۔ قیمت کی قسم کے مطابق صرف موڈ سیٹ کریں۔

// Type definition for checkout
interface CheckoutBody {
  priceId: string;
  accountId: string;
}
// Create checkout session
router.post(
  '/create-checkout-session',
  async (req: Request<{}, {}, CheckoutBody>, res: Response) => {
    const { priceId, accountId } = req.body;
    try {
      // Retrieve the price to determine if it is
      // one-time or recurring
      const price = await stripe.prices.retrieve(priceId, { stripeAccount: accountId });
      const isSubscription = price.type === 'recurring';
      const mode = isSubscription ? 'subscription' : 'payment';
      const session = await stripe.checkout.sessions.create(
        {
          line_items: [
            {
              price: priceId,
              quantity: 1,
            },
          ],
          mode,
          success_url: `${process.env.DOMAIN}/done?session_id={CHECKOUT_SESSION_ID}`,
          cancel_url: `${process.env.DOMAIN}`,
          ...(isSubscription
            ? {
                subscription_data: {
                  application_fee_percent: 10,
                },
              }
            : {
                payment_intent_data: {
                  application_fee_amount: 123,
                },
              }),
        },
        { stripeAccount: accountId },
      );
      res.redirect(303, session.url as string);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Unknown error';
      res.status(500).json({ error: message });
    }
  },
);

یہاں یہ ہے کہ یہ راستہ قدم بہ قدم کیا کرتا ہے: سب سے پہلے، بیچنے والے کے لنک کردہ اکاؤنٹ میں قیمت دیکھیں تاکہ یہ تعین کیا جا سکے کہ یہ ایک بار کی قیمت ہے یا بار بار چلنے والی سبسکرپشن۔ پھر "ادائیگی” یا "سبسکرپشن” کو مناسب استعمال کرتے ہوئے ادائیگی کا سیشن بنائیں۔

کہ application_fee_amount پلیٹ فارم کی تجارتی کٹ، کرنسی کی سب سے چھوٹی اکائی (USD کے لیے سینٹ) میں بیان کی گئی ہے۔ اس مثال میں، ہم فی لین دین $1.23 یا 10% لیتے ہیں۔ ایک حقیقی مارکیٹ میں، اس کا شمار مصنوعات کی قیمت کے فیصد کے طور پر کیا جا سکتا ہے۔

توجہ فرمائیں application_fee_amount اندر جاؤ subscription_data سبسکرپشن کے لیے لیکن اندرونی payment_intent_data یک وقتی ادائیگیوں کے لیے۔ یہ ایک پٹی کی ضرورت ہے۔ دونوں موڈز مختلف کنفیگریشن آبجیکٹ استعمال کرتے ہیں۔

آخر میں، راستہ استعمال کرتا ہے: res.redirect(303, session.url) صارفین کو براہ راست اسٹرائپ کے میزبان ادائیگی کے صفحے پر بھیجیں۔

ویب ہکس کو کیسے ہینڈل کریں۔

ویب ہکس اسٹرائپ کا سرورز کو ان واقعات کے بارے میں مطلع کرنے کا طریقہ ہے جو غیر مطابقت پذیر طور پر پیش آتے ہیں، جیسے کامیاب ادائیگیاں، ناکام چارجز، یا سبسکرپشن کی منسوخی۔

پروڈکشن مارکیٹ میں، آپ کو: مطلقیت ادائیگی کی تصدیق کے لیے مکمل طور پر ری ڈائریکٹ URL پر انحصار کریں۔ ری ڈائریکشن مکمل ہونے سے پہلے صارفین اپنا براؤزر بند کر سکتے ہیں۔ ویب ہکس سچائی کا ذریعہ ہیں۔

ویب ہک اینڈ پوائنٹ شامل کریں۔ پہلے JSON باڈی پارسر۔ اسٹرائپ ویب ہک پے لوڈ کو خام بائٹس کے طور پر بھیجتی ہے اور دستخط کی تصدیق کے لیے خام باڈی کی ضرورت ہوتی ہے۔

// IMPORTANT: Register this BEFORE app.use(express.json())
app.post(
  '/api/webhook',
  express.raw({ type: 'application/json' }),
  (req: Request, res: Response) => {
    let event: Stripe.Event = JSON.parse(req.body.toString()); // If you have an endpoint secret, verify the
    // signature for security
    const endpointSecret = process.env.WEBHOOK_SECRET;
    if (endpointSecret) {
      const signature = req.headers['stripe-signature'] as string;
      try {
        event = stripe.webhooks.constructEvent(req.body, signature, endpointSecret) as Stripe.Event;
      } catch (err) {
        const message = err instanceof Error ? err.message : 'Unknown error';
        console.log('Webhook signature verification failed:', message);
        res.sendStatus(400);
        return;
      }
    } // Handle the event
    switch (event.type) {
      case 'checkout.session.completed': {
        const session = event.data.object as Stripe.Checkout.Session;
        console.log('Payment successful for session:', session.id); // Fulfill the order: send email, grant access,
        // update your records, and so on
        break;
      }
      case 'checkout.session.expired': {
        const session = event.data.object as Stripe.Checkout.Session;
        console.log('Session expired:', session.id); // Optionally notify the customer or clean up
        // any pending records
        break;
      }
      case 'checkout.session.async_payment_succeeded': {
        const session = event.data.object as Stripe.Checkout.Session;
        console.log('Delayed payment succeeded for session:', session.id); // Fulfill the order now that payment cleared
        break;
      }
      case 'checkout.session.async_payment_failed': {
        const session = event.data.object as Stripe.Checkout.Session;
        console.log('Payment failed for session:', session.id); // Notify the customer that payment failed
        break;
      }
      case 'customer.subscription.deleted': {
        const subscription = event.data.object as Stripe.Subscription;
        console.log('Subscription cancelled:', subscription.id); // Revoke access for the customer
        break;
      }
      default:
        console.log('Unhandled event type:', event.type);
    }
    res.send();
  },
);

ویب ہک ہینڈلر پانچ اہم واقعات کی جانچ کرتا ہے:

• checkout.session.completed ادائیگی کامیاب ہونے پر عمل میں لایا جاتا ہے۔ یہاں سے آپ اپنا آرڈر پورا کر سکتے ہیں، ہمیں ایک تصدیقی ای میل بھیج سکتے ہیں یا آپ کو رسائی فراہم کر سکتے ہیں۔

• checkout.session.expired گاہک کی ادائیگی مکمل کرنے سے پہلے سیشن ختم ہونے پر فائر ہو جاتا ہے۔

• checkout.session.async_payment_succeeded تاخیر سے ادائیگی کے طریقہ کار (جیسے بینک ٹرانسفر) پر عمل درآمد کے بعد عمل میں لایا جاتا ہے۔

• checkout.session.async_payment_failed موخر ادائیگی کا طریقہ ناکام ہونے پر نکال دیا گیا۔

• اور customer.subscription.deleted سبسکرپشن منسوخ ہونے پر فائر ہو جاتا ہے۔

اسٹرائپ ڈیش بورڈ میں ویب ہکس کو کیسے ترتیب دیا جائے۔

اس سے پہلے کہ آپ ویب ہُک ایونٹس وصول کر سکیں، آپ کو سٹرائپ کو بتانا ہوگا کہ ایونٹس کہاں بھیجنا ہے اور کن ایونٹس میں آپ کی دلچسپی ہے۔ براہ کرم ان اقدامات پر عمل کریں:

1. اسٹرائپ ڈیش بورڈ پر جائیں اور ڈویلپر > ویب ہکس پر جائیں۔

2. ‘منزل شامل کریں’ پر کلک کریں۔

3. ادائیگی آپ کے لنک کردہ مرچنٹ اکاؤنٹ کے ذریعے کی جائے گی، لہذا اکاؤنٹ کی قسم کے تحت ‘لنکڈ اور V2 اکاؤنٹ’ کو منتخب کریں۔

4. ‘ایونٹس ٹو موصول’ کے تحت، ‘تمام ایونٹس’ پر کلک کریں اور درج ذیل پانچ ایونٹس کو منتخب کریں:

   • checkout.session.async_payment_succeeded – اس وقت ہوتا ہے جب تاخیر سے ادائیگی کا طریقہ استعمال کرتے ہوئے ادائیگی کا ارادہ بالآخر کامیاب ہوتا ہے۔

   • checkout.session.completed – اس وقت ہوتا ہے جب ادائیگی کا سیشن کامیابی سے مکمل ہوتا ہے۔

   • checkout.session.expired – اس وقت ہوتا ہے جب ادائیگی کا سیشن مکمل ہونے سے پہلے ختم ہو جاتا ہے۔

   • checkout.session.async_payment_failed – اس وقت ہوتا ہے جب تاخیر سے ادائیگی کا طریقہ استعمال کرتے ہوئے ادائیگی کا ارادہ ناکام ہوجاتا ہے۔

   • customer.subscription.deleted – اس وقت ہوتا ہے جب کسی صارف کی رکنیت ختم ہوتی ہے۔

5. ویب ہک اینڈ پوائنٹ کا URL درج کریں۔ پروڈکشن کے لیے، یہ https://yourdomain.com/api/webhook ہوگا۔ مقامی ترقی کے لیے، اس کے بجائے اسٹرائپ CLI استعمال کریں (آگے بیان کیا گیا ہے)۔

6. محفوظ کرنے کے لیے "منزل شامل کریں” پر کلک کریں۔

مقامی طور پر ویب ہکس کی جانچ کیسے کریں۔

مقامی ترقی کے لیے، آپ کے سرور کو انٹرنیٹ پر بے نقاب کرنے کی ضرورت نہیں ہے۔ اسٹرائپ CLI انسٹال کریں اور چلائیں:

brew install stripe/stripe-cli/stripe
stripe login
stripe listen --forward-to localhost:4242/webhook

CLI اس سے شروع ہونے والے ویب ہک پر دستخط کرنے کے راز کو پرنٹ کرتا ہے: whsec_. اسے اپنی .env فائل میں اس طرح شامل کریں: WEBHOOK_SECRET. CLI اسٹرائپ سے تمام ویب ہک ایونٹس کو روکتا ہے اور انہیں آپ کے مقامی سرور پر بھیج دیتا ہے، جس سے آپ کچھ بھی تعینات کیے بغیر اپنے پورے ادائیگی کے بہاؤ کو جانچ سکتے ہیں۔

بلنگ پورٹل کیسے شامل کریں۔

بلنگ پورٹل آپ کے صارفین کو UI بنائے بغیر اپنی سبسکرپشنز کا نظم کرنے کی اجازت دیتا ہے۔ پٹی پورے تجربے کی میزبانی کرتی ہے۔ صارفین اپنا ادائیگی کا طریقہ اپ ڈیٹ کر سکتے ہیں، اپنا پلان تبدیل کر سکتے ہیں، یا اپنی سبسکرپشن منسوخ کر سکتے ہیں۔

// Create a billing portal session
router.post(
  "/create-portal-session",
  async (req: Request, res: Response) => {
    const { session_id } = req.body as {
      session_id: string;
    };
 
    try {
      const session =
        await stripe.checkout.sessions.retrieve(
          session_id
        );
 
      const portalSession =
        await stripe.billingPortal.sessions.create({
          customer_account: session.customer_account as string,
          return_url: `\({process.env.DOMAIN}?session_id=\){session_id}`,
        });
 
      res.redirect(303, portalSession.url);
    } catch (error) {
      const message =
        error instanceof Error
          ? error.message
          : "Unknown error";
      res.status(500).json({ error: message });
    }
  }
);

اس راستے پر session_id پچھلی ادائیگیوں سے متعلقہ صارفین کو بازیافت کرتا ہے اور بلنگ پورٹل سیشن بناتا ہے۔ کہ customer_account فیلڈ پورٹل کو صحیح لنک کردہ اکاؤنٹ سے جوڑتا ہے، لہذا صارفین صرف اس مخصوص بیچنے والے کی سبسکرپشنز دیکھتے ہیں۔

اب ایک JSON پارسر شامل کریں اور اپنا راؤٹر ماؤنٹ کریں۔ یہ آنا ضروری ہے۔ ~ بعد ویب ہُک کا راستہ:

// JSON and URL-encoded parsers (AFTER webhook route)
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Mount all routes under /api
app.use('/api', router);
const PORT: number = parseInt(process.env.PORT || '4242', 10);
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Next.js فرنٹ اینڈ کیسے بنایا جائے۔

اپنی کلائنٹ ڈائرکٹری پر جائیں اور TypeScript کا استعمال کرتے ہوئے ایک نیا Next.js پروجیکٹ بنائیں۔

cd ../client
npx create-next-app@latest . --typescript --app --tailwind --eslint
npm install axios

اکاؤنٹ کا سیاق و سباق کیسے بنایا جائے۔

ہمیں بیچنے والے کے اکاؤنٹ کی ID کو تمام اجزاء میں بانٹنے کا طریقہ درکار ہے۔ اس سے ایک سیاق و سباق فراہم کنندہ بنائیں: contexts/AccountContext.tsx:

'use client';
import { createContext, useContext, useState, ReactNode } from 'react';
import { useSearchParams } from 'next/navigation';

interface AccountContextType {
  accountId: string | null;
  setAccountId: (id: string | null) => void;
}

const AccountContext = createContext(undefined);

export function useAccount(): AccountContextType {
  const context = useContext(AccountContext);
  if (!context) {
    throw new Error('useAccount must be used within AccountProvider');
  }
  return context;
}

export function AccountProvider({ children }: { children: ReactNode }) {
  const searchParams = useSearchParams();
  const [accountId, setAccountId] = useState(searchParams.get('accountId'));

  return (
    
      {children}
    
  );
}

یہ سیاق و سباق موجودہ مرچنٹ کے اکاؤنٹ کی شناخت کو اسٹور کرتا ہے اور اسے پوری ایپ میں دستیاب کرتا ہے۔ ابتدائی لوڈ پر، URL کو اکاؤنٹ آئی ڈی استفسار پیرامیٹر کے لیے چیک کیا جاتا ہے۔ اس طرح اسٹرائپ کا آن بورڈنگ ری ڈائریکٹ آپ کے اکاؤنٹ کی ID کو ایپ پر واپس بھیج دیتا ہے۔

اکاؤنٹ اسٹیٹس ہک کیسے بنایا جائے۔

یہاں حسب ضرورت ہکس بنائیں: hooks/useAccountStatus.ts اکاؤنٹ کی حیثیت کے لیے پولنگ۔

'use client';
import { useState, useEffect } from 'react';
import { useAccount } from '@/contexts/AccountContext';
interface AccountStatus {
  id: string;
  payoutsEnabled: boolean;
  chargesEnabled: boolean;
  detailsSubmitted: boolean;
}
export default function useAccountStatus() {
  const [accountStatus, setAccountStatus] = useState(null);
  const { accountId, setAccountId } = useAccount();
  useEffect(() => {
    if (!accountId) return;
    const fetchStatus = async () => {
      try {
        const res = await fetch(`http://localhost:4242/api/account-status/${accountId}`);
        if (!res.ok) throw new Error('Failed to fetch');
        const data: AccountStatus = await res.json();
        setAccountStatus(data);
      } catch {
        setAccountId(null);
      }
    };
    fetchStatus();
    const interval = setInterval(fetchStatus, 5000);
    return () => clearInterval(interval);
  }, [accountId, setAccountId]);
  return {
    accountStatus,
    needsOnboarding: !accountStatus?.chargesEnabled && !accountStatus?.detailsSubmitted,
  };
}

یہ ہک اکاؤنٹ کی حیثیت کے لیے ہر 5 سیکنڈ میں پول کرتا ہے۔ یہ اہم ہے کیونکہ اسٹرائپ کی آن بورڈنگ غیر مطابقت پذیر ہے۔ بیچنے والے فارم کو پُر کر سکتے ہیں، لیکن اسٹرائپ کو اپنی تفصیلات کی تصدیق کرنے اور اپنے اکاؤنٹ کو فعال کرنے میں کچھ وقت لگ سکتا ہے۔ کہ needsOnboarding پرچم UI کو بتاتا ہے کہ آن بورڈنگ بٹن ڈسپلے کرنا ہے یا مرچنٹ ڈیش بورڈ۔

بیچنے والے کو آن بورڈنگ جزو کیسے بنایا جائے۔

بنانا components/ConnectOnboarding.tsx:

'use client';
import { useState } from 'react';
import { useAccount } from '@/contexts/AccountContext';
import useAccountStatus from '@/hooks/useAccountStatus';
const API_URL = 'http://localhost:4242/api';
export default function ConnectOnboarding() {
  const [email, setEmail] = useState('');
  const { accountId, setAccountId } = useAccount();
  const { accountStatus, needsOnboarding } = useAccountStatus();
  const handleCreateAccount = async () => {
    const res = await fetch(`${API_URL}/create-connect-account`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });
    const data = await res.json();
    setAccountId(data.accountId);
  };
  const handleStartOnboarding = async () => {
    const res = await fetch(`${API_URL}/create-account-link`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ accountId }),
    });
    const data = await res.json();
    window.location.href = data.url;
  };
  if (!accountId) {
    return (
      

        
Create Your Seller Account
         setEmail(e.target.value)}
          className="w-full border p-2 rounded mb-4"
        />
        
          Create Connect Account
        
      

    );
  }
  return (
    

      
Account: {accountId} 
      
Charges: {accountStatus?.chargesEnabled ? 'Active' : 'Pending'} 
      
Payouts: {accountStatus?.payoutsEnabled ? 'Active' : 'Pending'} 
      {needsOnboarding && (
        
          Complete Onboarding
        
      )}
    
  );
}

یہ جزو بیچنے والے کے تجربے کی دونوں حالتوں کو سنبھالتا ہے۔ اگر آپ کے پاس اکاؤنٹ نہیں ہے تو آپ کو ایک سادہ ای میل فارم نظر آئے گا۔ اپنا اکاؤنٹ بنانے کے بعد، اگر ضروری ہو تو آپ اپنے اکاؤنٹ کی حیثیت اور آن بورڈنگ بٹن دیکھیں گے۔

مصنوعات کی تخلیق، مصنوعات کی فہرست، اور ادائیگی کے طریقے

بنانا components/Products.tsx:

'use client';
import { useState, useEffect } from 'react';
import { useAccount } from '@/contexts/AccountContext';
import useAccountStatus from '@/hooks/useAccountStatus';
const API_URL = 'http://localhost:4242/api';
interface Product {
  id: string;
  name: string;
  description: string | null;
  price: number | null;
  priceId: string;
  period: string | null;
}
export default function Products() {
  const { accountId } = useAccount();
  const { needsOnboarding } = useAccountStatus();
  const [products, setProducts] = useState([]);
  useEffect(() => {
    if (!accountId || needsOnboarding) return;
    const fetchProducts = async () => {
      const res = await fetch(`\({API_URL}/products/\){accountId}`);
      const data: Product[] = await res.json();
      setProducts(data);
    };
    fetchProducts();
    const interval = setInterval(fetchProducts, 5000);
    return () => clearInterval(interval);
  }, [accountId, needsOnboarding]);
  return (
    

      {' '}
      {products.map((product) => (
        

          
  {product.name}

          
  {product.description}

          

            ${((product.price ?? 0) / 100).toFixed(2)}
            {product.period ? ` / ${product.period}` : ''}
          

          
        
      ))}
    
  );
}

پروڈکٹس کا جزو بیچنے والے کے اسٹرائپ اکاؤنٹ سے تمام پروڈکٹس کو کھینچتا ہے اور انہیں ایک ریسپانسیو گرڈ میں دکھاتا ہے۔ چیک آؤٹ بٹن صارفین کو براہ راست آپ کے بیک اینڈ پر ایک فارم جمع کر کے اسٹرائپ کے میزبان چیک آؤٹ صفحہ پر بھیجتا ہے۔ نوٹ کریں کہ بٹن کا متن کس طرح تبدیل ہوتا ہے اس پر منحصر ہے کہ آیا پروڈکٹ ایک بار کی خریداری ہے یا سبسکرپشن۔

پروڈکٹ فارم کیسے پُر کریں۔

فرنٹ اینڈ پر پروڈکٹس شامل کرنے کے لیے بیچنے والوں کو ایک طریقہ کی ضرورت ہوتی ہے۔ بنانا components/ProductForm.tsx:

'use client';
import { useState } from 'react';
import { useAccount } from '@/contexts/AccountContext';
import useAccountStatus from '@/hooks/useAccountStatus';
const API_URL = 'http://localhost:4242/api';
interface ProductFormData {
  productName: string;
  productDescription: string;
  productPrice: number;
}
export default function ProductForm() {
  const { accountId } = useAccount();
  const { needsOnboarding } = useAccountStatus();
  const [showForm, setShowForm] = useState(false);
  const [formData, setFormData] = useState({
    productName: '',
    productDescription: '',
    productPrice: 1000,
  });
  const handleSubmit = async (e: React.FormEvent): Promise => {
    e.preventDefault();
    if (!accountId || needsOnboarding) return;
    await fetch(`${API_URL}/create-product`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...formData,
        accountId,
      }),
    }); // Reset form and hide it
    setFormData({
      productName: '',
      productDescription: '',
      productPrice: 1000,
    });
    setShowForm(false);
  }; // Only show the form if the merchant has completed
  // onboarding and can accept charges
  if (!accountId || needsOnboarding) return null;
  return (
    

       setShowForm(!showForm)}
        className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
      >
        {showForm ? 'Cancel' : 'Add New Product'}
      

      {showForm && (
        
      )}
    
  );
}

یہ جزو صرف بیچنے والے کے آن بورڈنگ مکمل کرنے کے بعد پیش کیا جاتا ہے ( if (!accountId || needsOnboarding) return null اوپر دیکھیں)۔ ایک فارم کو ٹوگل کریں جہاں بیچنے والے پروڈکٹ کا نام، تفصیل اور قیمت سینٹ میں درج کریں۔ جمع کرانے کے بعد، آپ کو ایک کال موصول ہوگی۔ /api/create-product یہ اختتامی نقطہ ہے جو بیچنے والے کے منسلک اسٹرائپ اکاؤنٹ میں مصنوعات اور قیمتیں دونوں بناتا ہے۔

قیمت کا میدان وائن سینٹ کا استعمال کرتا ہے، جس کی اسٹرائپ کی توقع ہے۔ لہذا، اگر کوئی بیچنے والا کوئی پروڈکٹ \(25.00) میں فروخت کرنا چاہتا ہے، تو وہ 2500 درج کریں گے۔ آپ کی پروڈکشن ایپ میں، آپ ایک دوستانہ ان پٹ شامل کر سکتے ہیں جو تاجروں کو \)25.00 میں داخل ہونے کی اجازت دیتا ہے اور اسے خود بخود سینٹ میں تبدیل کر دیتا ہے۔

مرکزی صفحہ کیسے بنایا جائے۔

آخر میں، ہم سب کچھ ایک ساتھ باندھتے ہیں. app/page.tsx:

'use client';
import { AccountProvider } from '@/contexts/AccountContext';
import ConnectOnboarding from '@/components/ConnectOnboarding';
import Products from '@/components/Products';
import ProductForm from '@/components/ProductForm';
export default function Home() {
  return (
    
      {' '}
      

        
        
        
        
      
    
  );
}

پورے بہاؤ کی جانچ کیسے کریں۔

دونوں سرورز شروع کریں۔

# Terminal 1 - Backend
cd server
npm run dev
 
# Terminal 2 - Frontend
cd client
npm run dev
 
# Terminal 3 - Stripe webhook listener
stripe listen --forward-to localhost:4242/api/webhook

اب آئیے پورے بہاؤ کو جانچتے ہیں۔

1. http://localhost:3000 پر جائیں اور سیلر اکاؤنٹ بنانے کے لیے اپنا ای میل درج کریں۔

2. "مکمل آن بورڈنگ” پر کلک کریں اور اسٹرائپ کا ٹیسٹ آن بورڈنگ فارم مکمل کریں۔ ٹیسٹ ڈیٹا استعمال کریں جیسے فون نمبر کے لیے 000-000-0000 اور SSN کے آخری 4 ہندسوں کے لیے 0000۔

3. اپنے اکاؤنٹ کی صورتحال کو اپ ڈیٹ کرنے کے لیے چند سیکنڈ انتظار کریں۔ ایک بار جب آپ کی شرح چالو ہو جاتی ہے، تو آپ مصنوعات شامل کر سکتے ہیں۔

4. پروڈکٹ بنانے کے لیے پروڈکٹ فارم کا استعمال کریں (قیمت سینٹ میں سیٹ کریں – جیسے 2500 ڈالر 25.00 میں)۔

5. چیک آؤٹ کا عمل شروع کرنے کے لیے پروڈکٹ پر "ابھی خریدیں” پر کلک کریں۔

6. اسٹرائپ کے ادائیگی کے صفحہ پر، اپنی مستقبل کی میعاد ختم ہونے کی تاریخ اور CVC کے ساتھ ٹیسٹ کارڈ نمبر 4242 4242 4242 4242 استعمال کریں۔

7. اپنا ٹرمینل چیک کریں۔ آپ کو ادائیگی کی تصدیق کرنے والا ایک ویب ہک ایونٹ دیکھنا چاہیے۔

8. آپ اسٹرائپ ڈیش بورڈ پر اپنی ادائیگی کی تاریخ، درخواست کی فیس، اور اپنے منسلک اکاؤنٹ میں تفصیلات کی منتقلی کی جانچ کر سکتے ہیں۔

ادائیگی کی تقسیم کیسے کام کرتی ہے۔

یہاں بالکل وہی ہے جب کوئی صارف کسی پروڈکٹ کے لیے $25.00 ادا کرتا ہے:

1. کسٹمر سٹرائپ کے چیک آؤٹ پیج پر $25.00 ادا کرتا ہے۔

2. پٹی ایک پروسیسنگ فیس (تقریباً 2.9% + $0.30 امریکی کارڈز کے لیے) کاٹتی ہے۔

3. آپ کا پلیٹ فارم درخواست کی فیس لیتا ہے جسے آپ نے مقرر کیا ہے (اس مثال میں $1.23)۔

4. بقیہ رقم بیچنے والے کے منسلک اسٹرائپ اکاؤنٹ میں منتقل کر دی جائے گی۔

5. تاجر اسٹرائپ ڈیش بورڈ سے اپنے بینک اکاؤنٹ میں رقوم نکال سکتے ہیں۔

آپ اپنے ادائیگی کے راستے میں درخواست کی فیس کا انتظام کر سکتے ہیں۔ پیداواری منڈیوں میں، اس کا حساب لین دین کے فیصد کے طور پر کیا جاتا ہے۔ مثال کے طور پر، 10% کمیشن حاصل کرنے کے لیے:

onst applicationFee = Math.round(
  (price.unit_amount ?? 0) * 0.1
);

اگلے اقدامات

ہمارے پاس اب ایک فعال مارکیٹ ہے۔ پیداوار میں غور کرنے کی بہتری میں شامل ہیں:

• NextAuth.js کے ساتھ توثیق شامل کریں تاکہ تاجر اپنے سیشنز کے دوران محفوظ طریقے سے لاگ ان اور اپنے اکاؤنٹس کا نظم کر سکیں۔

• اسٹرائپ تک پہنچنے سے پہلے ہر درخواست کی باڈی کی توثیق کرنے کے لیے Zod کے ساتھ رن ٹائم توثیق شامل کریں۔

• Cloudinary یا AWS S3 کا استعمال کرتے ہوئے اپنے پروڈکٹ کے لیے ایک تصویر اپ لوڈ کریں، پھر تصویر کے URL کو Stripe کے پروڈکٹ میٹا ڈیٹا میں منتقل کریں۔

• الگ الگ بیچنے والے اور کسٹمر کے خیالات بنائیں۔ موجودہ ایپ ایک صفحے پر دونوں تجربات کو یکجا کرتی ہے۔

• اپنے پسدید کو ریلوے یا رینڈر اور اپنے فرنٹ اینڈ کو ورسل پر تعینات کریں۔ اپنے پروڈکشن سرور کی طرف اشارہ کرنے کے لیے اسٹرائپ ڈیش بورڈ میں ویب ہک URL کو اپ ڈیٹ کریں۔

آپ اس ٹیوٹوریل کا مکمل سورس کوڈ GitHub (https://github.com/michaelokolo/marketplace) پر حاصل کر سکتے ہیں۔

اعترافات

اس ٹیوٹوریل میں API کے استعمال کے کچھ نمونے آفیشل اسٹرائپ دستاویزات میں دی گئی مثالوں سے متاثر ہیں۔ یہ مثالیں یہ ظاہر کرنے کے لیے تیار کی گئی ہیں کہ ایک مکمل ملٹی وینڈر مارکیٹ پلیس آرکیٹیکچر کیسے بنایا جائے۔

نتیجہ

اس ہینڈ بک میں، ہم نے ایک مکمل آن لائن مارکیٹ پلیس بنایا ہے جہاں بیچنے والے اسٹرائپ کنیکٹ کے ذریعے آن بورڈ کر سکتے ہیں، براہ راست اسٹرائپ میں ذخیرہ شدہ مصنوعات بنا سکتے ہیں، اور صارفین سے ادائیگیاں وصول کر سکتے ہیں۔ یہ سب کسی موجودہ ڈیٹا بیس کے بغیر ممکن ہے۔

آپ نے مرچنٹ آن بورڈنگ کے لیے Stripe’s V2 Account API کا استعمال سیکھا، منسلک اکاؤنٹس میں پروڈکٹس اور قیمتیں تخلیق کرنا، یک وقتی ادائیگیوں اور سبسکرپشنز دونوں کو سنبھالنے کے لیے ادائیگی کا بہاؤ بنانا، ویب ہکس کے ذریعے ادائیگی کے واقعات سننا، اور صارفین کو ان کی سبسکرپشنز کا نظم کرنے کے لیے ایک بلنگ پورٹل فراہم کرنا سیکھا۔

اہم بصیرت یہ ہے کہ Stripe Connect مارکیٹ پلیس آپریشنز کے سب سے مشکل حصوں کو سنبھالتا ہے، بشمول ادائیگی کی تقسیم، ٹیکس کی تعمیل، شناخت کی تصدیق، اور فنڈ کی منتقلی۔ آپ کا کام اس کے اوپر ایک بہترین صارف کا تجربہ بنانا ہے۔

اگر آپ کو یہ ٹیوٹوریل کارآمد لگا تو براہ کرم اسے کسی ایسے شخص کے ساتھ شیئر کریں جو مکمل اسٹیک ایپلی کیشنز بنانا سیکھ رہا ہو۔ مبارک کوڈنگ!