Stripe Connect: onboarding embarcado
Componentes embarcados do Connect permitem onboarding de sellers dentro do produto, reduzindo abandono por redirect e mantendo a marca no funil.
O que é onboarding embarcado
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «O que é onboarding embarcado». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Neste vídeo, vamos aprender como usar componentes embedidos para ajudar a streamladar sua experiência de onboarding do Connect. Tomar pagamentos online, bookings, administrar pagamentos com coisas como refunds e gestão de disputas, e então ver seus pagamentos, ver seu balanço e pagamentos próximos. E então, Forever, este lugar foi conhecido como um link de contato para redirecionar usuários a um fluxo de onboarding hostado de Stripe.
Stripe, basicamente, coleta toda a informação do KYC neste fluxo e, uma vez que isso é feito, redireciona para Forever. O que vamos fazer hoje é otimizar este fluxo e ir de onboarding hostado a onboarding embeddado, basicamente, removendo esse passo de redireção. Então isso me lembra de outro produto que temos chamado Stripe Checkout, mas a diferença com Stripe Checkout é que você usa isso quando está comprando um produto ou, você sabe, recebendo uma inscrição e então o que fazemos é redirecionar os usuários da aplicação web para uma página hostada de Stripe e aí eles podem entrar em toda a informação de pagamento, eles podem ver seus produtos e você sabe, e assim por diante, eles podem clicar em pagar e quando isso estiver completo, eles são redirecionados para a aplicação de onde eles vêm.
Fluxo Connect na prática
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «Fluxo Connect na prática». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, vamos para a base de código Forever para primeiro mostrar como o fluxo de onboarding de host existe. Site do Next.js, então eu também vou usar o React hoje. Então eu entro na minha informação de usuário, eu sou pedido por um tipo de negócio, nome de negócio e país, então eu entro nessa informação também.
O que está acontecendo no fundo aqui é que o Forever está criando um account Stripe, eles estão marcando o account como um account que será disponível para pagamentos, eles estão passando a informação que já foi coletada. E os traços do account que eles estão especificando é que o account não terá acesso a um dashboard Stripe, então tudo acontecerá dentro do site do Forever. E depois mostra um link para o host de onboarding para coletar a informação do KYC.
Na prática
Componentes embarcados para onboarding Connect sem sair do produto.
UX e compliance
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «UX e compliance». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Quando eu clico neste link como usuário, eu preciso, primeiro, se autenticar, então estou em modo de teste, então eu posso entrar em zeros para bypassar este passo. O que Forever teve que fazer para que isso funcionasse é criar o que é conhecido como um link de contato. Um link de contato é uma API bem simples, basicamente, que sempre chama o accountantslinks.create, passa o ID do acidente conectado e a URL do rediretor, e então, essencialmente, rende esse link para a página do usuário clicar.
Vou passar rapidamente pelo fluxo de coletão de informações para que possamos ver o que acontece no final do onboarding. Agora que entrei em todas as informações, vou clicar no final, Submit, o que acontece agora é que o rediretor do flow host está voltando para o forever e agora o contato está disponível para pagamentos, isso foi bem fácil e funcionou bem no entanto, queremos otimizar isso usando o onboarding embeddado, então novamente, vamos de um flow host para um flow embeddado, então vamos realmente fazer esses mudanças de código para o forever para fazer isso acontecer O primeiro passo é criar uma sessão de contato. Uma sessão de contato é onde eu especifico quais componentes embedidas são disponíveis e os parâmetros necessários são o ID de contato conectado, E também a lista de componentes que eu vou enablar.
Quando NÃO embarcar
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «Quando NÃO embarcar». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Isso me dá uma instância Stripe Connect que eu posso usar para render o componente de onboarding do Connect Account para a página. Então, com essas duas peças em lugar, vamos substituir a implementação do link de acount, que está aqui, com esse componente de embeddado e voltar para Forever e criar um novo acount para ver isso em ação. Então eu posso fazer isso especificando uma funcionalidade para o componente de onboarding embeddado chamado Disable Stripe User Authentication.
Então novamente, um contato foi criado, uma sessão de contato foi criada, desta vez com a funcionalidade e agora eu vejo o fluxo de coletão do KYC. Há outra otimização aqui, que é que as cores não se encaixam totalmente com o cheque de vista do meu site, então esta caixa de controle está azul, este botão está azul, mas realmente sempre verde, então o que eu posso fazer é usar a API de aparência dos componentes conectados para passar os parâmetros para o componente embedido para que ele se encaixe com o cheque de vista do meu site. Então eu fiz o trabalho antes do tempo e descobri quais os parâmetros são os que se encaixam com o look and feel do Forever.
Sinais de que está funcionando
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Eu adoro como você conseguiu usar esses componentes em Stripe para, um, ainda permitir as pessoas a fazer o onboarding, mas, ao mesmo tempo, você conseguiu customizar para dar. Então, você ainda está coletando a mesma informação, ainda está enviando seus clientes, mas você não tem que redirectá-los para outro site e então rebotá-los de volta. Então, os clientes podem fazer tudo no mesmo espaço, em um espaço familiar, e você oferece uma experiência mais unificada, que eu tenho certeza que eles realmente apreciam.
Isso mesmo, é realmente o mesmo modelo de dados, o Flows, o Stripe, ainda é responsável por coletar a informação, você ainda tem o benefício de não ter que implementar o todo o fluxo de coleta de informações sozinho. E, como com o host de onboarding, o que eu escolhi fazer, neste caso, para o embedding de onboarding, é simplesmente redirecionar o usuário de volta ao home. Isso é muito facilmente customizável, pois o componente de onboarding embeddável apoia um callback on exit, onde você, como desenvolvedor, pode decidir o que fazer.
O que evitar na primeira semana
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Neste caso, eu decidi redirecionar para o dashboard, mas você poderia mudar de estado para render uma UI diferente ou redirecionar para fora aqui. Seria muito trabalho para mim fazer isso como desenvolvedor e muitas APIs para lidar com. Primeiro, preciso criar uma sessão de contato, que eu já tenho a API para, então o que preciso fazer é, essencialmente, adicionar o componente de pagamentos aqui, em adição ao componente de onboarding do Embedder.
Once I've done that, the other piece that is missing is in the front end, I need to initialize embedded components just like I did before. So, really, it's the same code as before, except I've replaced Connect Account Onboarding with Connect Payments. O teste de pagamento foi criado e você pode ver que está renderizando, há capacidades de filtro, posso ver a timeline de pagamento e até fazer uma retomada no pagamento.
Como explicar isso para o time
Nesta parte do material sobre stripe connect embedded onboarding, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E se eu pensar no quanto de tempo, e testes e mantenimento que um desenvolvedor teria que fazer para adicionar essa funcionalidade para sua página, versus apenas adicionar um componente, vai nos salvar um monte de tempo e nos fazer muito mais produtivos. Então é muito bom poder adicionar esse tipo de funcionalidade sem ter que escrever todo esse código nós mesmos. E pagamentos, porém, se você for ao nosso site, você verá que nós apoiamos 17 componentes no GA e 7 em preview, de pagamentos, pagamentos, envios, ofertas de capital, gestão de contas, estes componentes são um ótimo jeito de construir qualidade, qualidade alta, customizáveis e integradas as suas UI para o site da sua plataforma.
Então, pessoal, eu recomendo que vocês sejam atentos à nossa documentação e vejam alguns desses diferentes componentes que temos e os diferentes cenários que eles apoiam e vejam se eles podem se encaixar dentro de sua aplicação. Mas, com isso dito, nós apenas aprendemos como usar componentes embedidos para ajudar a streamladar sua experiência de onboarding. Então, se você quiser aprender mais, definitivamente, por favor, veja alguns dos outros vídeos que temos aqui no canal do YouTube dos desenvolvedores do Stripe.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.