Créer une place de marché avec Stripe Connect : le processus d'intégration

Introduction

Créer une place de marché serait probablement trop difficile, voire impossible étant donné que peu de processeurs de paiement le proposent, s'ils ne le proposent pas, vous seriez probablement expulsé de la plateforme dès qu'ils en auraient vent, et même sans cela. il est risqué de créer un marché sur lequel vous ne disposez pas d'une base solide pour gérer les paiements, les remboursements et les paiements aux vendeurs utilisant la plateforme.

Stripe Connect résout ces problèmes, il nous permettra de créer un marché de base sur lequel vous pourrez vous inscrire pour devenir vendeur, et les clients pourront facilement acheter des articles auprès de ces vendeurs. En tant que propriétaire de plate-forme, vous pouvez également définir vos frais de service. Ainsi, lorsque l'utilisateur X achète dans le magasin Y, nous obtiendrons une réduction de X % sur cette transaction, mais nous en reparlerons plus tard.

Mise en place du projet

Pour gérer la connexion à la base de données, nous utilisons Prisma, l'authentification est gérée par remix-auth, pour cette partie, nous nous occupons uniquement du côté vendeur du marché.

// 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
}

Voici à quoi ressemble notre fichier schema.prisma, nous avons un modèle Seller et un modèle Store qui lui sont liés, le champ "id" servira de sous-domaine donc quand nous arriverons du côté de l'acheteur je pourrai visitez store.localhost.com et achetez les produits auprès du vendeur là-bas.
Et nous ajouterons également un modèle Stripe, qui stockera des données sur le compte Connect du vendeur.

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?
}

Nous pouvons maintenant nous occuper de l'intégration de l'utilisateur, définissons donc une autre variable dans notre fichier .env.

STRIPE_SK=your stripe secret key here

Vous pouvez obtenir la clé secrète Stripe en la générant dans la page de développement de Stripe, c'est une bonne idée de créer une clé restreinte qui permettra pour l'instant uniquement l'utilisation de Stripe Connect.

Ensuite vous devrez créer un nouveau fichier qui exportera le client Stripe afin qu'il puisse être utilisé par nos routes

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

Nous allons créer un nouvel itinéraire qui sera à "/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>
}

Nous ajouterons une fonction de chargement qui transmettra les données concernant le statut d'intégration du vendeur

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
    }
}

Maintenant, si vous allez dans /onboarding, cela indiquera que vous n'êtes pas connecté, et vous pourrez appuyer sur un bouton pour vous inscrire, c'est là qu'intervient notre fonction d'action

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)
}

Lorsque le vendeur appuie sur le bouton, nous créerons un compte avec l'e-mail avec lequel il s'est inscrit, puis nous créerons un lien de compte qui le redirigera vers une page d'intégration, si le vendeur a déjà un compte Stripe attaché mais n'est pas intégré, nous les redirigeons également vers le lien d'intégration.

À partir de là, le vendeur entrera son e-mail/numéro de téléphone et le processus d'intégration commencera. Stripe demandera généralement au vendeur l'emplacement de l'entreprise, les détails de l'entreprise, les comptes bancaires, etc...

Nous pouvons désormais écouter les webhooks pour les événements Stripe Connect. Ainsi, lorsqu'un vendeur s'est intégré avec succès, nous ajouterons ces attributs à l'enregistrement du vendeur dans la base de données.

Pour les tests, vous pouvez simplement télécharger Stripe CLI et à partir de là, vous pouvez transférer tous les événements vers notre nouvelle route /api/notifications que nous allons créer maintenant

// 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
}

Lorsque vous exécutez cette commande, vous recevrez une signature de webhook, afin que nous puissions vérifier l'intégrité de chaque webhook qui nous est envoyé par Stripe. De même, si vous créez un webhook sur le portail des développeurs sur Stripe, vous aurez un secret. .

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?
}

Nous ajouterons également une nouvelle variable dans le fichier .env

STRIPE_SK=your stripe secret key here

Nous pouvons maintenant écrire le code pour gérer ces événements qui nous sont envoyés par Stripe

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

Nous vérifions que c'est Stripe qui envoie la demande, si c'est le cas alors nous passons à autre chose, maintenant l'événement que nous voulons rechercher est account.updated, cet événement est lié au compte que nous avons créé avant de rediriger le vendeur.

Lorsqu'un vendeur démarre le processus d'intégration, ajoute son numéro de téléphone, saisit l'e-mail ou termine enfin le processus d'intégration, nous recevrons l'événement 'account.updated' et ce tableau sera envoyé avec lui

account.requirements.currently_due

Lorsque la longueur du tableau 'currently_due' est à zéro, nous savons que l'utilisateur est entièrement intégré, capable d'accepter des paiements et donc de notre côté, nous pouvons mettre à jour la base de données et permettre à l'utilisateur de créer des produits, mais avant de faire cela, ajoutons cette logique dans l'action '/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>
}

Une fois que cela sera en place, nous pourrons essayer l'intégration et voir si cela fonctionne. Dès que vous saisissez l'adresse par exemple, vous verrez un message dans la console du projet tel que

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
    }
}

Cela signifie donc que le corps est validé et que nous recevons avec succès les événements de Stripe, mais voyons si l'intégration fonctionnera.

Une fois arrivé à la dernière étape, il dira probablement que les détails de votre compte sont incomplets, la dernière étape est la vérification de l'identité, puisqu'il s'agit d'un mode test, nous pouvons simuler cela

D'accord, une fois que nous aurons fait cela, nous reviendrons à la page précédente et nous pourrons appuyer sur Soumettre, appuyer sur Soumettre et nous entrerons dans la console

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)
}

Cela fonctionne, Stripe nous renverra désormais à la page d'intégration et nous montrera notre identifiant de compte, ce qui signifie que nous avons réussi l'intégration et que nous pouvons commencer à créer des produits.

Très bien, rendons simplement ce bouton du tableau de bord du vendeur fonctionnel avant de passer aux produits, créons un nouvel itinéraire qui sera sur /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
}

Fonction très basique, donc maintenant, lorsque vous accédez à /portal si vous êtes intégré, vous serez redirigé vers le lien à usage unique que nous générons pour le compte Stripe.

Au cours du parcours d'intégration, nous allons envelopper le div du tableau de bord du vendeur avec un lien.

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?
}

Lorsque nous visitons /portal ou appuyons sur le bouton, nous serons redirigés vers le portail Stripe pour les comptes Connect, où l'utilisateur peut voir ses analyses, ses paiements, etc...

Cela marque la fin de la première partie de notre création d'un marché avec Stripe Connect, la deuxième partie traitera des produits, des paiements et des paiements, la troisième partie sera la finale et là, nous traiterons du côté client du projet. .

Vous pouvez voir le code source du projet sur https://github.com/ddm50/stripe-connect-howto-seller

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!