Agora, vá para Configurações do Stripe Connect , role até o final e obtenha seu OAuth Client ID .

Certifique-se de adicionar https://localhost: 3001 como um URL de redirecionamento (você não precisa torná-lo padrão) ou, se você estiver usando alguma outra URL para desenvolvimento e teste, adicione-a. O repositório que forneci a você usa a porta 3001 de desenvolvimento.

Nota : Certifique-se de que todas essas chaves sejam todas do modo de teste ou todas do modo ao vivo; não os confunda!

Agora, clone ou baixe este repositório e, em seguida, duplique e renomeie o .env.sample para .env.development e preencha as credenciais como tal (substitua as chaves).

 NEXT_PUBLIC_BASE_URL=http://localhost: 3001
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test _ ***
STRIPE_SECRET_KEY=sk_test _ ***
NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID=ca _ ***

Em seguida, execute npm install e, em seguida, npm run dev . Pronto, agora está funcionando! Certifique-se de experimentar com sua conta Stripe.

Criação e verificação de IDs de conta Stripe

Em seguida, precisamos criar, conectar e verificar o ID da conta.

Ao clicar no botão “Conectar ao Stripe”, você é redirecionado para este link:

 https://dashboard.stripe.com/oauth/authorize?response_type=code&client_id= & scope=read_write & redirect_uri=http://localhost: 3001 

Você mesmo pode visitar o link, basta substituir por seu ID de cliente OAuth.

Dica : se quiser especificar outro URL de redirecionamento (daquele que você colocou nas configurações do Stripe Connect), você também pode fazer isso.

Observe que quando um usuário faz login com sua conta Stripe naquele link específico, isso significa que ele deu seu consentimento para conectar o Stripe à sua plataforma.

Agora, você precisará verificar esse consentimento no lado do servidor.

Quando o usuário faz login com Stripe por meio do link Stripe OAuth, ele retorna ao redirect_uri especificado com algumas propriedades no URL, como este:

 https://localhost: 3001/? scope=read_write & code=ac _ *** 

Assim, quando um usuário consente em conectar sua conta do Stripe ao seu link OAuth, o Stripe o envia para o URL de redirecionamento com o código que agora você precisará usar no back-end para verificar o consentimento e conectar a conta com sucesso.

Verificar isso é fácil. Você só precisa fazer esta pequena solicitação- stripe.oauth.token -no backend. Se a solicitação fornecer um ID de conta, a conexão foi bem-sucedida.

Agora que você tem a ID da conta, pode armazená-la em qualquer lugar para acessar informações sobre ela mais tarde e realizar todos os tipos de operações Stripe nessa conta. Agora, vamos estabelecer as bases.

Criação de um botão estilizado

Em seguida, crie o botão clássico”Stripe Connect”no estilo Stripe.

Estamos usando componentes estilizados . Aqui está o estilo do botão .

Agora, redirecione as pessoas para o URL do Stripe OAuth no evento onClick desse botão, assim:

  { if (janela) { const url=`https://dashboard.stripe.com/oauth/authorize?response_type=code&client_id=$ { process.env.NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID } & scope=read_write & redirect_uri=$ { process.env.NEXT_PUBLIC_BASE_URL } `; window.document.location.href=url; } }}
>  Conecte com Stripe 

Para que isso funcione, certifique-se de verificar seu arquivo .env.development novamente, certifique-se de que todas as credenciais estejam corretas e execute novamente o npm run dev se você enfrentar problemas.

A cláusula scope=read_write dá a você o consentimento para realizar as operações de gravação e leitura na conta do Stripe de seu usuário.

Criação do endpoint da API de back-end

Agora, vamos fazer uma API no back-end que valide o código enviado por Stripe na barra de URL depois que o usuário retorna de sua página OAuth. Você pode consultar este arquivo versão final no repositório, que é responsável por validar o código que recebe no corpo da solicitação.

Nota : Existem algumas outras funções utilitárias que a lógica principal usa, então faça com que você verifique tudo isso no repositório.

Vamos começar com este código em /pages/api/verifyStripe.ts .

 importar {NextApiHandler} de'próximo';
importar handleErrors de'@/api/middlewares/handleErrors';
import createError de'@/api/utils/createError'; const stripe=require ('stripe') (process.env.STRIPE_SECRET_KEY); manipulador const: NextApiHandler=async (req, res)=> { const body=req.body; switch (req.method) { case'POST': const result=await stripe.oauth .símbolo({ grant_type:'authorisation_code', código: corpo?. código, }) .catch ((err: desconhecido)=> { lance createError (400, `$ {(err como qualquer um) ?. message}`); }); res .status (200) .json ({oauth: resultado}); pausa; padrão: lançar createError (405,'Método não permitido'); }
}; export const config={ api: { bodyParser: { sizeLimit:'1mb', }, },
}; exportar handleErrors padrão (manipulador);

Aqui, se o código correto for fornecido na solicitação…

 const result=await stripe.oauth .símbolo({ grant_type:'authorisation_code', código: corpo?. código, }) .catch ((err: desconhecido)=> { lance createError (400, `$ {(err como qualquer um) ?. message}`); }); 

… você obtém este resultado do Stripe.

 { "token_type":"portador", "stripe_publishable_key":"{PUBLISHABLE_KEY}", "escopo":"read_write", "livemode": falso, "stripe_user_id":"{ACCOUNT_ID}", "refresh_token":"{REFRESH_TOKEN}", "access_token":"{ACCESS_TOKEN}"
} 

Ele também retorna erros se um código incorreto ou expirado for fornecido para a API.

Lembre-se, código expira em questão de segundos, portanto, quando o cliente receber esse código, verifique-o instantaneamente no carregamento.

Agora que você tem um endpoint de API básico, está pronto para ser executado pelo ping do cliente Next.js!

Usando React e Next.js para verificar uma conta conectada no lado do servidor

Vamos criar uma solicitação do lado do servidor na página inicial do Next.js se receber o parâmetro code no URL.

Deve ficar assim em /pages/index.ts .

 import React from'react';
import fetch from'isomorphic-unfetch'; importar HomeView de'@/views/Home'; const Home=(adereços)=> { retornar ;
}; export const getServerSideProps=async ({ req,
})=> { const body=req?.__ NEXT_INIT_QUERY; if (! body?.code) { retornar {props: {data: null, req: body}}; } deixe a resposta; tentar { resposta=aguarda busca ( process.env.NEXT_PUBLIC_BASE_URL +'/api/verifyStripe', { método:'POST', corpo: JSON.stringify (corpo), cabeçalhos: { 'Content-Type':'application/json', }, }, ).então ((res)=> res.json ()); } catch (erro) { retornar {props: {data: {error}, req: body}}; } return {props: {data: response, req: body}};
}; exportar Página inicial padrão;

Quando você exporta uma função getServerSideProps do arquivo de página Next.js, Next.js executa essa função no servidor. Você pode retornar os dados buscados na função getServerSideProps para que o componente React receba os dados buscados na forma de adereços.

Você pode saber mais sobre como o Next.js SSR funciona aqui .

Observação : você também pode fazer solicitações em useEffect () e atualizar o estado do cliente assim que os dados forem buscados.

Se seu URL tiver ? code=ac _ *** , você deseja obter esse parâmetro do URL. Next.js fornece os parâmetros do corpo no objeto req?.__ NEXT_INIT_QUERY .

 { código:"ac _ ***", escopo:"read_write"
}

Usando isomorphic-unfetch , extraímos os dados de nossa API fornecendo o código na solicitação:

 aguarda busca ( process.env.NEXT_PUBLIC_BASE_URL +'/api/verifyStripe',//nosso endpoint de API { método:'POST', body: JSON.stringify (body),//'{"code":"ac _ ***","scope":"read_write"}' cabeçalhos: { 'Content-Type':'application/json', }, },
).então ((res)=> res.json ()); 

Se você marcar /pages/api/verifyStripe.ts , verá que a API retorna {oauth: result} .

Esse resultado contém o Stripe Account ID, que agora podemos usar nos props do componente React, retornando esta resposta em getServerSideProps em /pages/index.ts .

 return {props: {data: response, req: body}};

Na linha de código acima, estamos despejando todos os dados buscados da API na propriedade data . O prop req fornece os dados de parâmetro de URL, que agora você pode acessar no componente React.

Agora, vamos usar os dados buscados usando data prop passado pelo componente React.

 const Home=(adereços)=> { retornar ;
}; const HomeView=({dados})=> { Retorna ( <>  { if (janela) { const url=`https://dashboard.stripe.com/oauth/authorize?response_type=code&client_id=$ { process.env.NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID } & scope=read_write & redirect_uri=$ { process.env.NEXT_PUBLIC_BASE_URL } `; window.document.location.href=url; } }} >  Conecte com Stripe   {data?.req?.code?.startsWith ('ac_') && ( <> 
 
 Dados coletados 
 
 {JSON.stringify (data, null, 2)} 

  )}  );

};
 Observe que o frontend mostrará os dados buscados no backend em um elemento 

  se a barra de URL tiver a string de parâmetro  code  começando com  ac_ . 

 Agora, tente clicar no botão  Stripe  e se inscrever. Quando você for redirecionado de volta para a página inicial a partir da página Stripe OAuth, deverá ver uma mensagem de sucesso impressa, mais ou menos assim: 
 { "dados": { "oauth": { "access_token":"sk ***** 4m", "livemode": falso, "refresh_token":"r ***** Oib6W", "token_type":"portador", "stripe_publishable_key":"pk_test_51 *** tfPe", "stripe_user_id":"acct_1 ****** YHsmb", "escopo":"read_write" } }, "req": { "escopo":"read_write", "estado":"13.036056350529645", "código":"ac_JP8TFZTmFg1GUnPnJmTII2PTOJYaeBCD" }
}

 Legal! Agora você tem os dados no front-end sendo buscados no endpoint /api/verifyStripe . 
 Buscando as informações da conta Stripe 
 Você deve ter percebido que está faltando algo. Você tem o ID da conta, mas não as informações da conta. 
 Vamos buscar isso também em /pages/api/verifyStripe.ts . 
 importar {NextApiHandler} de'próximo';
importar handleErrors de'@/api/middlewares/handleErrors';
import createError de'@/api/utils/createError'; const stripe=require ('stripe') (process.env.STRIPE_SECRET_KEY); manipulador const: NextApiHandler=async (req, res)=> { const body=req.body; switch (req.method) { case'POST': const result=await stripe.oauth .símbolo({ grant_type:'authorisation_code', código: corpo?. código, }) .catch ((err)=> { lance createError (400, `$ {err?.message}`); }); //Pegamos o ID da conta de `result.stripe_user_id`, //vamos buscar mais detalhes da conta usando o ID. const account=await stripe.accounts ?.retrieve (resultado?.stripe_user_id) ?.catch ((err)=> { lance createError (400, `$ {err?.message}`); }); //Aqui temos os detalhes importantes da conta. const accountAnalysis={ hasConnectedAccount: !! account?.id,//Verifique se o ID da conta recebido está realmente conectado ou existe. accountId: account?.id, hasCompletedProcess: account?.details_submitted, isValid: account?.charges_enabled && account?.payouts_enabled, Nome em Exibição: conta?.settings?.dashboard?.display_name || conta?.display_name || nulo, país: conta?.country, moeda: conta?.default_currency, }; //boolean-Assim que a conta for conectada, devemos permitir que ela seja desvinculada? const shouldAllowUnlink= accountAnalysis?.hasConnectedAccount && (! accountAnalysis?.isValid || ! accountAnalysis?.hasCompletedProcess || ! accountAnalysis?.displayName); res .status (200) .json ({account, oauth: result, accountAnalysis, shouldAllowUnlink}); pausa; padrão: lançar createError (405,'Método não permitido'); }
}; export const config={ api: { bodyParser: { sizeLimit:'1mb', }, },
}; exportar handleErrors padrão (manipulador);

 Agora, atualize a página inicial, faça login no Stripe novamente e você verá que agora tem muito mais informações importantes do que antes. 
  
 Vamos usar os dados buscados no front-end e atualizar o botão Stripe Connect com texto dinâmico. 
  { if (janela) { const url=`https://dashboard.stripe.com/oauth/authorize?response_type=code&client_id=$ { process.env.NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID } & scope=read_write & state=$ {Math.random () * 100} & redirect_uri=$ { process.env.NEXT_PUBLIC_BASE_URL } `; window.document.location.href=url; } }}
> {data?.data?.account?.id? (  Conectado: {data?.data?.account?.display_name}  ): (  Conecte com Stripe  )}


 Isso verifica se você tem o ID da conta na propriedade  data . Se você fizer isso, será exibido  Connected: Display Name , caso contrário,  Connect with Stripe . 
 Aqui, também adicionamos a propriedade  disabled={! data?.data?.shouldAllowUnlink}  ao botão. Você aprenderá sobre o que é  shouldAllowUnlink  na próxima seção deste artigo. 
 Também podemos exibir as informações da conta como esta: 
 const SIM=<> ✅ & nbsp; & nbsp; Sim. ;
const NO=<> ❌ & nbsp; & nbsp; Não. ; const HomeView: React.FC <{ dados?;
}>=({dados})=> { Retorna ( <> 
 Demonstração do Stripe Connect 
 ... {data?.data?.account?.id && ( <> 
 
 
 Pagamentos ativados? 
 
 {data?.data?.account?.payouts_enabled? SIM: NÃO} 
 
 
 
 Cobranças ativadas? 
 
 {data?.data?.account?.charges_enabled? SIM: NÃO} 
 
 
 
 Detalhes enviados? 
 
 {data?.data?.account?.details_submitted? SIM: NÃO} 
 
 
 
 
 Permitir desvinculação? 
 
 Quando os usuários conectam sua conta do Stripe e se ela está incompleta ou inválido, você pode permitir que eles se desvinculem. 
 
 {data?.data?.shouldAllowUnlink? SIM: NÃO} 
 
  )} ....  );
}

 Aqui está o resultado. 
  
 Pronto, você implementou o Stripe OAuth básico com sucesso! 
 Fatores para determinar e otimizar a validade da conta Stripe 
 Esses fatores são extremamente importantes para garantir um melhor processo de KYC. 
 1. Devemos permitir a desvinculação da conta do Stripe? 
 Vamos entender o que significa “desvincular a conta do Stripe”. 
 Quando um usuário conecta sua conta do Stripe, você obtém o ID da conta, que pode ser armazenado no banco de dados para acesso futuro. 
 Agora, imagine que, com uma conta conectada, você tenha toneladas de produtos, clientes e assinaturas. 
 Você não gostaria que seu usuário pudesse desconectar o Stripe por meio da sua conta (da interface do usuário da plataforma) se a conta estivesse funcionando perfeitamente. Você também não gostaria que eles mudassem a conta do Stripe, caso contrário, as coisas quebrariam. 
 No entanto, você  deseja  que eles possam desconectar e reconectar a conta se a conta for inválida, se os pagamentos forem desativados, se as cobranças forem desativadas ou se a conta for de um país ou uma moeda que você não suporta. 

  Lembre-se : O usuário sempre pode desconectar sua plataforma do painel do Stripe de qualquer maneira. Mas você ainda deve decidir se deseja fornecer aos usuários essa opção em sua própria plataforma. 

 Em nosso exemplo de demonstração, verificamos se uma conta deve ser capaz de desvincular-se, desta forma (verifique  verifyStripe.ts )  
 const accountAnalysis={ hasConnectedAccount: !! account?.id, accountId: account?.id, hasCompletedProcess: account?.details_submitted, isValid: account?.charges_enabled && account?.payouts_enabled, Nome em Exibição: conta?.settings?.dashboard?.display_name || conta?.display_name || nulo, país: conta?.country, moeda: conta?.default_currency,
}; //@type boolean
const shouldAllowUnlink= accountAnalysis?.hasConnectedAccount && (! accountAnalysis?.isValid || ! accountAnalysis?.hasCompletedProcess || ! accountAnalysis?.displayName);

 Em nosso exemplo, devemos permitir a desvinculação da conta se a conta estiver conectada e se algum dos itens abaixo for  false  ou  null : 

account.charges_enabled 
account.payouts_enabled 
account.details_submitted 
 Nome de exibição da conta 


  Observação : se você permite a desvinculação ou não, depende das necessidades de sua plataforma. Certifique-se de ajustar a lógica de acordo. 

 2. Os pagamentos estão ativados? 
 O usuário de sua conta Stripe Connected poderá sacar fundos de seu saldo Stripe para suas contas bancárias? 
 Se você obtiver  account?.payouts_enabled  como  false , significa que a conta não possui uma conta bancária válida conectada à conta Stripe. 
 Às vezes, isso não deve afetar sua plataforma, porque você pode fornecer seus serviços mesmo que a conta conectada de seu usuário não tenha pagamentos ativados. 
 Depende do seu caso de uso. Mas, idealmente, você deve exigir que os usuários o habilitem. 
 3. As cobranças estão ativadas? 
 Isso está perguntando: o usuário da sua conta conectada será capaz de criar cobranças? 
 Se você obtiver  account?.charges_enabled  como  false , a conta não poderá gerar cobranças. 
 Se o usuário não tiver as cobranças ativadas, você não poderá criar cobranças nas contas dele. Se sua plataforma depende da criação de cobranças por meio das contas Stripe de seus usuários, você precisa que as cobranças de usuário sejam ativadas. 
 Coisas como assinatura, planos e checkouts podem depender da API de cobrança. Portanto, é uma necessidade absoluta em quase todos os casos de uso. 
 Todos os detalhes foram enviados? 
 Este deve ser óbvio. 
 Quando você cria uma conta Stripe, ela pede muitas informações: nome, e-mail, endereço, informações fiscais, código EIN, informações da conta bancária, etc. 
 Para que uma conta Stripe seja totalmente funcional, com todos os recursos necessários, você gostaria que as contas Stripe de seus usuários fossem totalmente verificadas pelo Stripe com todos os seus detalhes enviados corretamente. 
 Se você obtiver  account?.details_submitted  como  false , significa que o processo de verificação da conta ainda não foi concluído ou alguns detalhes ainda não são conhecidos pelo Stripe. 
 Sempre evite fazer transações com essas contas. 
 4. Verifique os requisitos adicionais 
 Ao verificar uma conta Stripe Connected, verifique imediatamente a  conta?.requirements [current_due] . Se for  null , significa que a conta conectada está em ótima forma. 
 Se houver requisitos devidos, e se o usuário não cumprir os requisitos em tempo hábil, as operações críticas da conta podem ser bloqueadas mais tarde. 
 Portanto, quando você detectar um requisito listado na  account?.requirements [current_due] , sempre notifique o usuário e faça com que ele execute uma ação. 

  Dica : continue verificando suas contas conectadas a cada quatro semanas e continue otimizando e coletando dados sobre a validade das contas Stripe conectadas. 

 Execução de operações em contas Stripe Connected 
 Você pode realizar operações facilmente usando Node.js e o pacote de nós  stripe . 
 const stripe=require ('stripe') (process.env.STRIPE_SECRET_KEY); aguardar pagamento.produtos .Criar( { nome:"Novo produto", descrição:"Produto criado em uma conta conectada", metadados: { userId:"" } }, //Basta adicionar o seguinte objeto como um segundo parâmetro em qualquer operação Stripe. {stripeAccount: account?.id} ) .catch (assíncrono e=> { lançar novo erro (e.message) })

In the above example, you can create a Stripe product on the Connected Account. To do so, you only need to provide a stripeAccount ID in the object in the optional second parameter of the Stripe Node API. Note that if you don’t provide a Stripe account ID, it will create the product on your Stripe account instead of the desired Connected Account.

Remember: If a Connected Account disconnected from your platform via Stripe dashboard, or if the account isn’t valid enough, some operations might fail. So, you are advised to carry out operations only on the Connected Accounts that are fully valid.

You can carry out most of the other operations on Connected Stripe Accounts using a similar method.
Using Stripe Connect webhooks
What is a webhook? It is an endpoint that is solely made to receive events when they happen live, from (and via) other services.
What do Stripe webhooks do?
Every time an event takes place on a Stripe account, e.g., when an invoice is created, or when a subscription, charge, or payment method is created or updated, Stripe is able to ping your API endpoint with appropriate information so that you can fulfill the event from your side.
Here’s an example use case.
Your user is on your Stripe checkout page and pays you to buy your software’s license. After the user comes submits from the Stripe checkout page and returns to the homepage, the user will see a “payment successful” message.
But, how would you know if the user paid you? By using Stripe webhooks. When the user pays you via your checkout page, Stripe pings your webhook API endpoint, telling you that the user has paid you the fee for a particular product at a particular moment. Now, you can email them the license, and fulfill the order.
What are Stripe Connect webhooks?
Basically, they are Stripe webhooks that ping your given endpoint whenever chosen events take place on one of the Connected Accounts.
If you have a subscription or any other events running on Connected Accounts, you will use Stripe Connect webhooks.
Creating a simple Stripe Connect webhook
First of all, install Stripe CLI. Then run stripe listen--forward-connect-to localhost:3001/api/connectWebhook in terminal.
If you are doing it the first time, it’ll ask you to log in. Log in and run the command again.
Running the command will give you an endpoint secret starting with whsec_. It is now listening for all the events that may happen in all your Stripe Connected Accounts.
Every time it gets an event, it will ping your webhook at localhost:3001/api/connectWebhook.
In the .env.development and the .env.production files, save your STRIPE_SECRET_KEY that you received after running the CLI command and restart the server.
To create the webhook, create a file at /pages/api/connectWebhook.ts.
import { NextApiHandler } from'next';
import handleErrors from'@/api/middlewares/handleErrors';
import createError from'@/api/utils/createError'; const stripe=require('stripe')(process.env.STRIPE_SECRET_KEY); const handler: NextApiHandler=async (req, res)=> { const body=req.body; switch (req.method) { case'POST': //Refers to STRIPE_ENDPOINT_SECRET variable in.env.development file const endpointSecret: string=process.env.STRIPE_ENDPOINT_SECRET //This is to verify if the request is coming from Stripe indeed. const sig=req.headers["stripe-signature"] let event try { event=stripe.webhooks.constructEvent(req?.body, sig, endpointSecret) } catch (err) { console.log(err.message) return res.status(401).send(`Webhook Error: ${err.message}`) } //Handle the checkout.session.completed event if (event.type==="checkout.session.completed") { const session=event?.data?.object //Fulfill the purchase if payment_status is"paid". if (session.payment_status==="paid") { try { //Do whatever here to fulful the purchase. //await fulfilThePurchase() //Or just observe the Session object console.log(session) } catch (err) { return res.status(400).send({ received: true, error: `${err}`, event }) } } } //Return a response to acknowledge receipt of the event res .status(200) .json({ received: true, event }); pausa; default: throw createError(405,'Method Not Allowed'); }
}; export const config={ api: { bodyParser: { sizeLimit:'1mb', }, },
}; export default handleErrors(handler);

In the above example, you were listening for checkout.session.completed event. You can choose to listen to many more events that occur on your Stripe Accounts or the Stripe Connected Accounts. See the list of all the events here.
You can trigger these webhooks from your dashboard by creating/editing products, or by updating subscriptions, depending on what events you are listening to.
For testing purposes on development mode, use Stripe Test Triggers.
$ stripe trigger checkout.session.completed

You now understood how Stripe Connect Webhooks works, and how you can test it on development mode.
To use this webhook in production for Stripe, go to Developers > Webhooks section in the Stripe dashboard.
Beside Endpoints receiving events from Connect applications, click on Add Endpoint.

Fill in the events you want to listen to and use the endpoint URL that you have hosted online.
For deploying, I would recommend Vercel because it’s free and easy to use — you can just run the vercel command in your terminal and have your Next.js project deployed.
When you deploy, make sure the .env.production variables are all correct regarding your Stripe account. You should also add them from your Vercel project dashboard.
Thanks for reading!
The post Getting started with Stripe Connect using Next.js appeared first on LogRocket Blog.