Stripe Connect로 마켓플레이스 만들기: 온보드 프로세스

소개

이를 제공하는 결제 처리업체가 많지 않다는 점을 고려하면 마켓플레이스를 만드는 것은 아마도 너무 어렵거나 불가능할 것입니다. 그들이 제공하지 않으면 그들이 정보를 얻는 순간 플랫폼에서 쫓겨날 가능성이 높습니다. 플랫폼을 사용하는 판매자에 대한 결제, 환불, 지급을 처리할 탄탄한 기반이 없는 마켓플레이스를 만드는 것은 위험합니다.

Stripe Connect는 이러한 문제를 해결합니다. 이를 통해 귀하가 판매자로 등록할 수 있는 기본 마켓플레이스를 생성할 수 있으며 고객은 이러한 판매자로부터 상품을 쉽게 구매할 수 있습니다. 플랫폼 소유자로서 서비스 수수료를 설정할 수도 있으므로 사용자 X가 매장 Y에서 구매할 때 해당 거래의 X%를 삭감하고 나중에 더 많은 금액을 받게 됩니다.

프로젝트 설정

우리가 Prisma를 사용하고 있는 데이터베이스 연결을 처리하기 위해 인증은 remix-auth로 처리되고 있으며, 이 부분에 대해 우리는 마켓플레이스의 판매자 측만 처리하고 있습니다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Store {
  id         String   @id // This will be the store's subdomain
  name       String
  updated_at DateTime @default(now()) @updatedAt
  seller     Seller?
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
}

이것은 Schema.prisma 파일의 모습입니다. Seller 모델과 이와 관련된 Store 모델이 있습니다. "id" 필드는 하위 도메인 역할을 하므로 구매자 측에 도달하면 다음 작업을 수행할 수 있습니다. store.localhost.com을 방문하여 해당 판매자로부터 제품을 구매하세요.
또한 판매자의 Connect 계정에 대한 데이터를 저장하는 Stripe 모델도 추가할 예정입니다.

model Stripe {
  account_id String @id
  is_onboarded Boolean @default(false)
  user Users @relation(fields: [user_id], references: [discord_id])
  user_id String @unique
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
  stripe       Stripe?
}

이제 사용자 온보딩을 처리할 수 있으므로 .env 파일에 다른 변수를 정의해 보겠습니다.

STRIPE_SK=your stripe secret key here

Stripe 개발 페이지에서 Stripe 비밀 키를 생성하여 얻을 수 있습니다. 지금은 Stripe Connect 사용만 허용하는 제한된 키를 만드는 것이 좋습니다.

그런 다음 우리 경로에서 사용할 수 있도록 Stripe 클라이언트를 내보낼 새 파일을 만들어야 합니다

// app/libs/stripe.server.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SK)

"/onboarding"에 새로운 경로를 생성하겠습니다

// app/routes/onboarding.tsx

export default function Onboarding() {
    const {stripe} = useLoaderData();

    return <div className={'text-center pt-[6%]'}>
    <h1 className={'text-xl'}>Account onboarded: {stripe?.is_onboarded ? stripe?.account_id : '? Not connected'}</h1>
        <div className={'flex items-center  text-white text-sm  mt-5 justify-center gap-3'}>
            {!stripe ? <>
                <Form method={'post'}>
                    <button type={'submit'} className={'bg-blue-600 hover:cursor-pointer  rounded-[6px] px-4 py-1.5'}>Setup your seller
                        account
                    </button>

                </Form>
            </> : <>
                <div className={'bg-blue-600 rounded-[6px] px-4 py-1.5'}>Seller dashboard</div>

            </>}
        </div>
    </div>
}

판매자의 온보딩 상태에 관한 데이터를 전달하는 로더 기능을 추가할 예정입니다

export async function loader({request}: LoaderFunctionArgs) {
    const user = await authenticator.isAuthenticated(request, {
        failureRedirect: '/login'
    })

    const seller = await prisma.seller.findFirst({
        where: {
            id: user.id
        }, include: {
            stripe: true
        }
    })

    return {
        stripe: seller?.stripe
    }
}

이제 /onboarding으로 이동하면 연결되지 않았다는 메시지가 표시되고 버튼을 눌러 가입할 수 있습니다. 여기서 작업 기능이 제공됩니다.

export async function action({request}: ActionFunctionArgs) {
    const authenticated = await authenticator.isAuthenticated(request, {
        failureRedirect: '/login'
    })
    const seller = await prisma.seller.findFirst({
        where: {
            id: authenticated.id
        }, include: {
            stripe: true
        }
    })
    if (seller && seller.stripe?.is_onboarded) {
        return json({
            message: 'User is onboarded already',
            error: true
        }, {
            status: 400
        })
    }
    const account = seller?.stripe?.account_id ? {
        id: seller.stripe?.account_id
    } : await stripe.accounts.create({
        email: seller?.email,
        controller: {
            fees: {
                payer: 'application',
            },
            losses: {
                payments: 'application',
            },
            stripe_dashboard: {
                type: 'express',
            },
        },
    });
    if (!seller?.stripe?.account_id) {
        await prisma.seller.update({
            where: {
                id: authenticated.id
            },
            data: {
                stripe: {
                    create: {
                        account_id: account.id
                    }
                }
            }, include: {
                stripe: true
            }
        })
    }
    const accountLink = await stripe.accountLinks.create({
        account: account.id,
        refresh_url: 'http://localhost:5173/onboarding',
        return_url: 'http://localhost:5173/onboarding',
        type: 'account_onboarding',
        collection_options: {
            fields: 'eventually_due',
        },
    });
    console.debug(`[ACCOUNT ID = ${account.id}] CREATED ACCOUNT ONBOARDING LINK, REDIRECTING...`)

    return redirect(accountLink.url)
}

판매자가 버튼을 누르면 등록한 이메일로 계정이 생성됩니다. 그런 다음 판매자가 이미 Stripe 계정을 연결했지만 온보딩 페이지로 리디렉션되는 계정 링크를 생성합니다. 온보딩되지 않은 경우 온보딩 링크로 리디렉션됩니다.

여기서 판매자는 자신의 이메일/전화번호를 입력하고 온보딩 프로세스가 시작됩니다. Stripe는 일반적으로 판매자에게 회사 위치, 회사 세부 정보, 은행 계좌 등을 묻습니다.

이제 Stripe Connect 이벤트에 대한 웹후크를 들을 수 있으므로 판매자가 성공적으로 온보딩하면 해당 속성을 데이터베이스의 판매자 기록에 추가합니다.

테스트를 위해 Stripe CLI를 다운로드하면 모든 이벤트를 지금 생성할 새 경로 /api/notifications로 전달할 수 있습니다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Store {
  id         String   @id // This will be the store's subdomain
  name       String
  updated_at DateTime @default(now()) @updatedAt
  seller     Seller?
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
}

해당 명령을 실행하면 웹훅 서명이 제공되므로 Stripe에서 전송한 각 웹훅의 무결성을 확인할 수 있습니다. 마찬가지로 Stripe의 개발자 포털에서 웹훅을 생성하는 경우에도 비밀을 갖게 됩니다. .

model Stripe {
  account_id String @id
  is_onboarded Boolean @default(false)
  user Users @relation(fields: [user_id], references: [discord_id])
  user_id String @unique
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
  stripe       Stripe?
}

또한 .env 파일에 새 변수를 추가합니다

STRIPE_SK=your stripe secret key here

이제 Stripe에서 전송되는 이러한 이벤트를 처리하는 코드를 작성할 수 있습니다

// app/libs/stripe.server.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SK)

Stripe가 요청을 보내는지 확인합니다. 그렇다면 계속해서 살펴보고 싶은 이벤트는 account.updated입니다. 해당 이벤트는 판매자를 리디렉션하기 전에 생성한 계정과 관련이 있습니다.

판매자가 온보딩 프로세스를 시작하거나, 전화번호를 추가하거나, 이메일을 입력하거나, 온보딩 프로세스를 최종적으로 완료하면 'account.updated' 이벤트가 발생하고 이 배열이 함께 전송됩니다.

account.requirements.currently_due

'currently_due' 배열의 길이가 0이면 사용자가 완전히 온보딩되어 결제를 수락할 수 있다는 것을 알게 됩니다. 따라서 우리 측에서는 데이터베이스를 업데이트하고 사용자가 제품을 만들 수 있도록 허용할 수 있습니다. 하지만 그 전에 추가해 보겠습니다. '/api/notifications' 작업의 이 논리

// app/routes/onboarding.tsx

export default function Onboarding() {
    const {stripe} = useLoaderData();

    return <div className={'text-center pt-[6%]'}>
    <h1 className={'text-xl'}>Account onboarded: {stripe?.is_onboarded ? stripe?.account_id : '? Not connected'}</h1>
        <div className={'flex items-center  text-white text-sm  mt-5 justify-center gap-3'}>
            {!stripe ? <>
                <Form method={'post'}>
                    <button type={'submit'} className={'bg-blue-600 hover:cursor-pointer  rounded-[6px] px-4 py-1.5'}>Setup your seller
                        account
                    </button>

                </Form>
            </> : <>
                <div className={'bg-blue-600 rounded-[6px] px-4 py-1.5'}>Seller dashboard</div>

            </>}
        </div>
    </div>
}

이 작업이 완료되면 온보딩을 시도하여 작동하는지 확인할 수 있습니다. 예를 들어 주소를 입력하자마자 프로젝트 콘솔에
과 같은 메시지가 표시됩니다.

export async function loader({request}: LoaderFunctionArgs) {
    const user = await authenticator.isAuthenticated(request, {
        failureRedirect: '/login'
    })

    const seller = await prisma.seller.findFirst({
        where: {
            id: user.id
        }, include: {
            stripe: true
        }
    })

    return {
        stripe: seller?.stripe
    }
}

즉, 본문이 검증되었으며 Stripe에서 이벤트를 성공적으로 수신하고 있다는 의미입니다. 하지만 온보딩이 작동하는지 살펴보겠습니다.

마지막 단계에 이르면 계정 세부정보가 불완전하다는 메시지가 표시될 것입니다. 마지막 단계는 ID 확인입니다. 이는 테스트 모드이므로 이를 시뮬레이션할 수 있습니다.

알겠습니다. 작업을 마치면 이전 페이지로 돌아가서 제출을 누르고 제출을 누르면 콘솔로 이동합니다

export async function action({request}: ActionFunctionArgs) {
    const authenticated = await authenticator.isAuthenticated(request, {
        failureRedirect: '/login'
    })
    const seller = await prisma.seller.findFirst({
        where: {
            id: authenticated.id
        }, include: {
            stripe: true
        }
    })
    if (seller && seller.stripe?.is_onboarded) {
        return json({
            message: 'User is onboarded already',
            error: true
        }, {
            status: 400
        })
    }
    const account = seller?.stripe?.account_id ? {
        id: seller.stripe?.account_id
    } : await stripe.accounts.create({
        email: seller?.email,
        controller: {
            fees: {
                payer: 'application',
            },
            losses: {
                payments: 'application',
            },
            stripe_dashboard: {
                type: 'express',
            },
        },
    });
    if (!seller?.stripe?.account_id) {
        await prisma.seller.update({
            where: {
                id: authenticated.id
            },
            data: {
                stripe: {
                    create: {
                        account_id: account.id
                    }
                }
            }, include: {
                stripe: true
            }
        })
    }
    const accountLink = await stripe.accountLinks.create({
        account: account.id,
        refresh_url: 'http://localhost:5173/onboarding',
        return_url: 'http://localhost:5173/onboarding',
        type: 'account_onboarding',
        collection_options: {
            fields: 'eventually_due',
        },
    });
    console.debug(`[ACCOUNT ID = ${account.id}] CREATED ACCOUNT ONBOARDING LINK, REDIRECTING...`)

    return redirect(accountLink.url)
}

이제 작동합니다. 이제 Stripe가 온보딩 페이지로 돌아가 계정 ID를 표시합니다. 이는 우리가 성공적으로 온보딩했으며 제품 생성을 시작할 수 있음을 의미합니다.

좋아요. 제품으로 넘어가기 전에 판매자 대시보드 버튼이 작동하도록 만들고 /portal에 있는 새 경로를 만들어 보겠습니다

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Store {
  id         String   @id // This will be the store's subdomain
  name       String
  updated_at DateTime @default(now()) @updatedAt
  seller     Seller?
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
}

매우 기본적인 기능이므로 이제 온보딩된 경우 /portal로 이동하면 Stripe 계정에 대해 생성된 일회용 링크로 리디렉션됩니다.

온보딩 경로에서는 판매자 대시보드 div를 링크로 래핑합니다.

model Stripe {
  account_id String @id
  is_onboarded Boolean @default(false)
  user Users @relation(fields: [user_id], references: [discord_id])
  user_id String @unique
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
}

model Seller {
  id           Int      @id @default(autoincrement())
  email        String
  password     String
  store        Store    @relation(fields: [store_id], references: [id])
  date_created DateTime @default(now())
  date_updated DateTime @updatedAt
  store_id     String   @unique
  stripe       Stripe?
}

/portal을 방문하거나 버튼을 누르면 Stripe의 Connect 계정용 포털로 리디렉션되며 사용자는 분석, 지급 등을 볼 수 있습니다...

이것은 Stripe Connect를 사용하여 마켓플레이스를 만드는 첫 번째 부분이 끝났음을 의미하며, 두 번째 부분은 제품, 결제 및 지불금을 다루고, 세 번째 부분은 마지막 부분이며 여기서는 프로젝트에서 고객이 직면하는 측면을 다룰 것입니다. .

프로젝트의 소스코드는 https://github.com/ddm50/stripe-connect-howto-seller에서 보실 수 있습니다

위 내용은 Stripe Connect로 마켓플레이스 만들기: 온보드 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!