# Criar um marketplace Crie contas conectadas usando a Accounts v1, recolha pagamentos de clientes e pague a vendedores ou prestadores de serviços no marketplace. > #### Integrações da API Accounts v2 > > Este guia se aplica apenas às plataformas Connect existentes que utilizam a API Accounts v1. Se você é um novo usuário do Connect ou utiliza a API Accounts v2, consulte o [Guia do Marketplace v2](https://docs.stripe.com/connect/marketplace.md). # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=web. Este guia explica como aceitar pagamentos e mover fundos para as contas bancárias dos seus provedores de serviços ou vendedores. Para fins de demonstração, criamos um marketplace de aluguel de casas que conecta proprietários a possíveis inquilinos. Também mostramos como aceitar pagamentos de inquilinos (clientes) e fazer repasses aos proprietários (os usuários da sua plataforma). ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. [Verifique e adicione os dados da empresa no Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Conclua seu perfil da plataforma](https://dashboard.stripe.com/connect/settings/profile). 1. [Personalize as configurações da sua marca](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Adicione um nome de empresa, ícone e cor da marca. ## Configurar a Stripe [Lado do servidor] Instale as bibliotecas oficiais da Stripe para acessar a API Stripe no seu aplicativo: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Criar uma conta conectada #### Accounts v2 Quando um vendedor ou provedor de serviços se cadastra na sua plataforma, crie uma [conta conectada](https://docs.stripe.com/api/v2/core/accounts.md) que o represente. A conta conectada permite que você recolha suas informações de identificação, aceite pagamentos para eles e transfira fundos para a conta bancária deles. Em nosso exemplo de aluguel de casas, a conta conectada representa o proprietário da casa. #### Accounts v1 Quando um vendedor ou provedor de serviços se cadastra na sua plataforma, crie uma [conta conectada](https://docs.stripe.com/api/accounts.md) que o represente. A conta conectada permite que você recolha suas informações de identificação, aceite pagamentos para eles e transfira fundos para a conta bancária deles. Em nosso exemplo de aluguel de casas, a conta conectada representa o proprietário da casa. ### Crie uma conta conectada com informações pré-preenchidas #### Accounts v2 Use a API `/v2/core/accounts` para [criar](https://docs.stripe.com/api/v2/core/accounts/create.md) uma conta conectada, especificando o [dashboard da conta conectada e as responsabilidades](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Se você já coletou dados de suas contas conectadas, pode usá-los para preencher o objeto `Account`. Você pode preencher quaisquer dados de conta, inclusive dados pessoais e comerciais, dados de contas externas e muito mais. Após criar uma `Conta`, crie uma [Pessoa](https://docs.stripe.com/api/v2/core/persons/create.md) para representar a pessoa responsável por abrir a conta, definindo como verdadeiro `relationship.representative` e todas as informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` O Connect Onboarding não solicita as informações pré-preenchidas. No entanto, ele solicita que o titular da conta confirme as informações pré-preenchidas antes de aceitar o [contrato de serviços do Connect](https://docs.stripe.com/connect/service-agreement-types.md). Ao testar sua integração, preencha antecipadamente os dados da conta usando [dados de teste](https://docs.stripe.com/connect/testing.md). ### Criar um link da conta Você pode criar um link de conta chamando a API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` e `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Redirecionar o usuário ao URL do link da conta A resposta de criação do link da conta inclui um valor de `url`. Após autenticar o usuário no seu aplicativo, redirecione-o para essa URL para inseri-lo no fluxo. As URLs de link da conta são temporárias e de uso único, pois concedem acesso às informações pessoais do usuário da conta conectada. Se desejar preencher previamente as informações, deverá preencher antes de gerar o link da conta. Depois de criar o link da conta, não será possível ler nem gravar informações na conta conectada. > Não envie URLs de links de conta por e-mail, SMS ou outra maneira para fora do aplicativo da sua plataforma. Em vez disso, forneça-os ao titular da conta autenticado dentro do seu aplicativo. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml ``` No servidor, faça a chamada a seguir para a API da Stripe. Depois de criar uma Sessão do Checkout, redirecione o cliente para o [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) retornado na resposta. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items` - este argumento representa os itens que o cliente está comprando e que serão exibidos na interface do usuário hospedada pela Stripe. - `success_url` - este argumento redireciona um usuário após a conclusão de um pagamento. - `payment_intent_data[application_fee_amount]` - este argumento especifica o valor planejado pela sua plataforma para retirar da transação. O valor total da cobrança é imediatamente transferido da plataforma para a conta conectada que é especificada por `transfer_data[destination]` após a captura da cobrança. O `application_fee_amount` é transferido de volta para a plataforma, e a tarifa da Stripe é deduzida do valor da plataforma. - `payment_intent_data[transfer_data][destination]` - este argumento indica que é uma [cobrança de destino](https://docs.stripe.com/connect/destination-charges.md). Uma cobrança de destino significa que a cobrança é processada na plataforma e, em seguida, os fundos são imediatamente e automaticamente transferidos para o saldo pendente da conta conectada. Para o nosso exemplo de aluguel residencial, queremos construir uma experiência na qual o cliente pague por meio da plataforma, e o proprietário receba o pagamento pela plataforma. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) O Checkout usa as configurações de marca da sua conta de plataforma para cobranças de destino. Para obter mais informações, consulte [Personalizar a marca](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Esta Sessão cria uma cobrança de destino. Se você precisar controlar o cronograma de transferências ou precisar transferir fundos de um único pagamento para várias partes, use [cobranças e transferências separadas](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gerencie eventos pós-pagamento (Server-side) A Stripe envia um evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) quando o pagamento é concluído. [Use um webhook para receber esses eventos](https://docs.stripe.com/webhooks/quickstart.md) e executar ações, como enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega. Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor poderia fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada. Algumas formas de pagamento também demoram de 2 a 14 dias para a confirmação do pagamento. Configurar sua integração para escutar eventos assíncronos é o que permite a você aceitar diferentes tipos de [formas de pagamento](https://stripe.com/payments/payment-methods-guide) com uma única integração. Além de gerenciar o evento `checkout.session.completed`, recomendamos gerenciar dois outros eventos ao coletar pagamentos com o Checkout: | Evento | Descrição | Próximas etapas | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | O cliente autorizou o pagamento enviando o formulário do Checkout. | Aguarde a confirmação ou falha do pagamento. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | O pagamento do cliente foi confirmado. | Execute o pedido de mercadorias ou serviços. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | O pagamento foi recusado ou houve outro erro. | Entre em contato com o cliente por e-mail e solicite que seja feito um novo pedido. | Todos esses eventos incluem o objeto [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Após o êxito do pagamento, o status subjacente do *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) passa de `processing` para `succeeded`. #### Formulário integrado ### Crie uma Sessão do Checkout (Server-side) A Sessão do Checkout controla o que seu cliente vê no formulário de pagamento integrado, como itens de linha, valor, moeda e formas de pagamento aceitas. No seu servidor, faça a seguinte chamada para a API da Stripe. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items` - os itens que o cliente está comprando. Exibido na interface do usuário hospedada pela Stripe. - `return_url` - este argumento redireciona um usuário após a conclusão de uma tentativa de pagamento. - `payment_intent_data[application_fee_amount]` - este argumento especifica o valor planejado pela sua plataforma para retirar da transação. O valor total da cobrança é imediatamente transferido da plataforma para a conta conectada que é especificada por `transfer_data[destination]` após a captura da cobrança. O `application_fee_amount` é transferido de volta para a plataforma, e a tarifa da Stripe é deduzida do valor da plataforma. - `payment_intent_data[transfer_data][destination]` - indica que é uma [cobrança de destino](https://docs.stripe.com/connect/destination-charges.md), ou seja, que a cobrança é processada na plataforma. Em seguida, os fundos são imediatamente e automaticamente transferidos para o saldo pendente da conta conectada. No exemplo de aluguel residencial, se o cliente pagar por meio da plataforma, o proprietário recebe o pagamento pela plataforma. ### Montar checkout (Client-side) #### HTML + JS O Checkout está disponível no [Stripe.js](https://docs.stripe.com/js.md). Inclua o script Stripe.js na página, adicionando-o ao cabeçalho do arquivo HTML. Crie um nó DOM vazio (contêiner) para usar na montagem. ```html
``` Inicialize o Stripe.js com sua chave de API publicável. Crie uma função assíncrona `fetchClientSecret` que faz uma solicitação ao seu servidor para criar a sessão do Checkout e recuperar o segredo do cliente. Passe essa função para `options` quando criar a instância do Checkout: ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Instale as bibliotecas Connect.js e React Connect.js a partir do [registro público do npm](https://www.npmjs.com/package/@stripe/react-connect-js). ```bash npm install --save @stripe/connect-js @stripe/react-connect-js ``` Para usar o componente Embedded Checkout, crie um `EmbeddedCheckoutProvider`. Chame `loadStripe` com sua chave de API publicável e passe a `Promise` retornada para o provedor. Crie uma função assíncrona `fetchClientSecret` que faz uma solicitação ao seu servidor para criar a sessão do Checkout e recuperar o segredo do cliente. Passe essa função para a propriedade `options` aceita pelo provedor. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; return ( ) } ``` O Checkout é renderizado em um iframe que envia dados de pagamento com segurança à Stripe por uma conexão HTTPS. Evite colocar o Checkout dentro de outro iframe porque algumas formas de pagamento exigem o redirecionamento para outra página para confirmação do pagamento. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) O Checkout usa as configurações de marca da sua conta de plataforma para cobranças de destino. Para obter mais informações, consulte [Personalizar a marca](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Esta Sessão cria uma cobrança de destino. Se você precisar controlar o cronograma de transferências ou precisar transferir fundos de um único pagamento para várias partes, use [cobranças e transferências separadas](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gerencie eventos pós-pagamento (Server-side) A Stripe envia um evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) quando o pagamento é concluído. [Use um webhook para receber esses eventos](https://docs.stripe.com/webhooks/quickstart.md) e executar ações, como enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega. Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor poderia fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada. Algumas formas de pagamento também demoram de 2 a 14 dias para a confirmação do pagamento. Configurar sua integração para escutar eventos assíncronos é o que permite a você aceitar diferentes tipos de [formas de pagamento](https://stripe.com/payments/payment-methods-guide) com uma única integração. Além de gerenciar o evento `checkout.session.completed`, recomendamos gerenciar dois outros eventos ao coletar pagamentos com o Checkout: | Evento | Descrição | Próximas etapas | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | O cliente autorizou o pagamento enviando o formulário do Checkout. | Aguarde a confirmação ou falha do pagamento. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | O pagamento do cliente foi confirmado. | Execute o pedido de mercadorias ou serviços. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | O pagamento foi recusado ou houve outro erro. | Entre em contato com o cliente por e-mail e solicite que seja feito um novo pedido. | Todos esses eventos incluem o objeto [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Após o êxito do pagamento, o status subjacente do *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) passa de `processing` para `succeeded`. #### Fluxo personalizado ### Crie um PaymentIntent (Server-side) A Stripe usa um objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para representar sua intenção de coletar o pagamento de um cliente, acompanhando suas tentativas de cobrança e alterações no estado do pagamento durante todo o processo. > Se quiser renderizar o Payment Element antes de criar um PaymentIntent, consulte [Coletar detalhes do pagamento antes de criar um Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). ![Um diagrama de visão geral de todo o fluxo de pagamento](https://b.stripecdn.com/docs-statics-srv/assets/accept-a-payment-payment-element.5cf6795a02f864923f9953611493d735.svg) As formas de pagamento mostradas aos clientes durante o processo de checkout também estão incluídas no PaymentIntent. Você pode deixar que a Stripe obtenha automaticamente as formas de pagamento das configurações do Dashboard ou listá-las manualmente. Se sua integração não exige uma opção baseada em código para oferecer formas de pagamento, a Stripe recomenda a opção automática. A Stripe avalia a moeda, as restrições e outros parâmetros dessas formas de pagamento para criar a lista das que são aceitas. Priorizamos as que aumentam a conversão e são mais relevantes para a moeda e a localização do cliente. As formas de pagamento de menor prioridade são ocultas em um menu de navegação. #### Gerenciar formas de pagamento no Dashboard Crie um PaymentIntent no seu servidor com um valor e uma moeda habilitados. Na versão mais recente da API, especificar o parâmetro `automatic_payment_methods` é opcional porque a Stripe habilita sua funcionalidade por padrão. Você pode gerenciar formas de pagamento no [Dashboard](https://dashboard.stripe.com/settings/payment_methods). A Stripe processa a devolução de formas de pagamento qualificadas com base em fatores como valor, moeda e fluxo de pagamento da transação. O PaymentIntent é criado para aceitar as formas de pagamento que você configura no Dashboard, quando aplicável. Sempre decida o valor a ser cobrado no lado do servidor (um ambiente confiável), e não no lado do cliente. Isso impede que clientes maliciosos possam definir os próprios preços. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 \ -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}" ``` #### Listar manualmente as formas de pagamento Crie um PaymentIntent no seu servidor com valor, moeda e uma lista de tipos de formas de pagamento. Sempre decida quanto deseja cobrar no lado do servidor, um ambiente seguro, e não no lado do cliente, para evitar que clientes mal-intencionados escolham os próprios preços. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=eps" \ -d "payment_method_types[]=ideal" \ -d "payment_method_types[]=p24" \ -d "payment_method_types[]=sepa_debit" \ -d "payment_method_types[]=sofort" \ -d application_fee_amount=123 ``` Escolha a moeda de acordo com as formas de pagamento que você pretende aceitar. Algumas formas de pagamento aceitam várias moedas e países. Este guia usa Bancontact, cartões de crédito, EPS, iDEAL, Przelewy24 e débito automático SEPA e Sofort. > A forma de pagamento precisa aceitar a moeda passada no PaymentIntent. Além disso, sua empresa precisa estar estabelecida em um dos países aceitos pela forma de pagamento. Consulte [Opções de integração de formas de pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obter mais detalhes sobre o que é aceito. ### Recuperar o segredo do cliente O PaymentIntent inclui um *segredo do cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que o lado do cliente usa para concluir com segurança o processo de pagamento. Você pode usar abordagens diferentes para enviar a senha do cliente ao lado do cliente. #### Aplicativo de página única Recupere o segredo do cliente de um endpoint do servidor usando a função `fetch` do navegador. Essa abordagem é melhor quando o lado do cliente é um aplicativo com uma única página, principalmente se criado com uma estrutura de front-end moderna como o React. Crie o endpoint do servidor que envia o segredo do cliente: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Em seguida, obtenha o segredo do cliente com JavaScript no lado do cliente: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Renderização do lado do servidor Passe o segredo do cliente do servidor ao cliente. Essa abordagem funciona melhor quando o aplicativo gera conteúdo estático no servidor antes de enviá-lo ao navegador. Adicione o [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) ao formulário de checkout. No código do lado do servidor, recupere o segredo do cliente do PaymentIntent: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ### Colete os dados de pagamento (Client-side) Colete dados de pagamento no cliente com o [Payment Element](https://docs.stripe.com/payments/payment-element.md). O Payment Element é um componente de IU que simplifica a coleta de dados de pagamento para diversas formas de pagamento. O Payment Element contém um iframe que envia dados de pagamento com segurança à Stripe por uma conexão HTTPS. Evite colocar o Payment Element dentro de outro iframe porque algumas formas de pagamento exigem o redirecionamento para outra página para confirmação do pagamento. Se você optar por usar um iframe e quiser aceitar Apple Pay ou Google Pay, o iframe deve ter o atributo [permitir](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) definido como igual a `"pagamento *"`. O endereço da página de Checkout deve começar com `https://` rather em vez de `http://` for para que sua integração funcione corretamente. Você pode testar sua integração sem usar HTTPS, mas lembre-se de [habilitá-lo](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos em tempo real. #### HTML + JS ### Configurar o Stripe.js O Payment Element está automaticamente disponível como um recurso do Stripe.js. Inclua o script Stripe.js em sua página de checkout adicionando-o ao `head` do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não inclua o script em um pacote nem hospede pessoalmente uma cópia dele. ```html Checkout ``` Crie uma instância de Stripe com o seguinte JavaScript em sua página de checkout: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Adicione o Element Pagamento à sua página de pagamentos O Payment Element precisa de um lugar para residir na sua página de pagamentos. Crie um node DOM vazio (contêiner) com um ID único no seu formulário de pagamento: ```html
``` Quando o formulário anterior for carregado, crie uma instância do Payment Element e monte-a no nó DOM do contêiner. Passe o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior em `options` quando criar a instância do [Elements](https://docs.stripe.com/js/elements_object/create): Administre cuidadosamente o segredo do cliente, pois ele pode finalizar a cobrança. Não registre em log, incorpore em URLs nem exponha esse segredo a ninguém, exceto para o próprio cliente. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurar o Stripe.js Instale o [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e o [carregador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) do registro público npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Adicione e configure o provedor do Elements à sua página de pagamento Para usar o componente Payment Element, encapsule o componente da página de checkout em um [provedor do Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Chame `loadStripe` com sua chave publicável e passe a `Promise` retornada para o provedor `Elements`. Além disso, passe o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior como `options` ao fornecedor do `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Adicione o componente do Element Pagamento Use o componente `PaymentElement` para criar seu formulário: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` O Stripe Elements é uma coleção de componentes drop-in de IU. Para personalizar ainda mais o formulário ou coletar outros dados do cliente, consulte a [documentação do Elements](https://docs.stripe.com/payments/elements.md). O Payment Element renderiza um formulário dinâmico que permite ao cliente escolher uma forma de pagamento. Para cada forma de pagamento, o formulário solicita automaticamente que o cliente preencha todos os dados de pagamento necessários. ### Personalizar a aparência Personalize o Payment Element para corresponder ao design do seu site, passando o [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) para `options` ao criar o provedor do `Elements`. ### Solicitar endereços Por padrão, o Payment Element só recolhe os detalhes necessários do endereço de faturamento. Alguns comportamentos, como [calcular impostos](https://docs.stripe.com/api/tax/calculations/create.md) ou inserir detalhes de entrega, exigem o endereço completo do cliente. Você pode: - Use o [Address Element](https://docs.stripe.com/elements/address-element.md) para aproveitar os recursos de autocompletar e traduzir para recolher o endereço completo do cliente. Isso ajuda a garantir um cálculo tributário mais preciso. - Obtenha os detalhes do endereço usando seu próprio formulário personalizado. ### Solicitar token de comerciante do Apple Pay Se você configurou sua integração para [aceitar pagamentos com o Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), recomendamos configurar a interface do Apple Pay para retornar um token do comerciante, a fim de habilitar transações iniciadas pelo comerciante (MIT). [Solicite o tipo de token do comerciante pertinente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) no Payment Element. ### Envie os pagamentos para Stripe (Client-side) Use [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para concluir o pagamento utilizando os detalhes do Payment Element. Forneça um [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a essa função para indicar para onde a Stripe deve redirecionar o usuário após a conclusão do pagamento. Seu usuário pode ser redirecionado primeiro para um site intermediário, como uma página de autorização bancária, antes de ser redirecionado para o `return_url`. Os pagamentos com cartão são redirecionados imediatamente para o `return_url` quando um pagamento é finalizado. Se não quiser redirecionar pagamentos com cartão após a conclusão do pagamento, defina [redirecionar](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) como `if_required`. Isso somente redireciona os clientes que fazem checkout com formas de pagamento baseadas em redirecionamento. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Para chamar [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) do seu componente de formulário de pagamento, use os hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) e [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Se preferir componentes de classe tradicionais em vez de hooks, use um [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Verifique se o `return_url` corresponde a uma página no seu site que fornece o status do pagamento. Quando a Stripe redireciona o cliente para o `return_url`, nós fornecemos os seguintes parâmetros de consulta de URL: | Parâmetro | Descrição | | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | O identificador único do `PaymentIntent`. | | `payment_intent_client_secret` | O [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) do objeto `PaymentIntent`. | > Se você tiver ferramentas que rastreiam a sessão do cliente no navegador, pode ser necessário adicionar o domínio `stripe.com` à lista de exclusão de referenciadores. Os redirecionamentos fazem com que algumas ferramentas criem novas sessões, o que impede que você rastreie a sessão completa. Use um dos parâmetros de consulta para recuperar o PaymentIntent. Inspecione o [status do PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) para decidir o que mostrar aos clientes. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o `return_url`, que persiste durante o processo de redirecionamento. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ### Gerencie eventos pós-pagamento (Server-side) Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) quando o pagamento é concluído. Use a [ferramenta Dashboard webhook](https://dashboard.stripe.com/webhooks) ou siga o [guia de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para receber esses eventos e executar ações, como enviar um e-mail de confirmação do pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de trabalho de envio. Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada, o que permite que clientes mal-intencionados manipulem a resposta. Configurar sua integração para escutar eventos assíncronos é o que permite a você aceitar [diferentes tipos de formas de pagamento](https://stripe.com/payments/payment-methods-guide) com uma única integração. Além de gerenciar o evento `payment_intent.succeeded`, recomendamos gerenciar esses outros eventos ao coletar pagamentos com o Element Pagamento: | Evento | Descrição | Ação | | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Enviado quando um cliente conclui um pagamento com êxito. | Envie ao cliente uma confirmação de pedido e *processe* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) o pedido. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Enviado quando um cliente inicia um pagamento, mas o pagamento ainda precisa ser concluído. Esse evento costuma ser enviado quando um cliente inicia um débito bancário. Ele é seguido por um evento `payment_intent.succeeded` ou `payment_intent.payment_failed` no futuro. | Envie ao cliente uma confirmação do pedido que indica que o pagamento está pendente. Para produtos digitais, pode ser necessário executar o pedido antes de aguardar a conclusão do pagamento. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado quando um cliente tenta fazer um pagamento, mas o pagamento falha. | Se um pagamento passa de `processing` para `payment_failed`, ofereça ao cliente outra tentativa para pagar. | ## Testes Teste seu fluxo de criação de conta [criando contas](https://docs.stripe.com/connect/testing.md#creating-accounts) e [usando OAuth](https://docs.stripe.com/connect/testing.md#using-oauth). #### Cartões | Número do cartão | Cenário | Como testar | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | O pagamento com cartão é bem-sucedido e não precisa de autenticação. | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. | | 4000002500003155 | O pagamento com cartão precisa de *autenticação* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. | | 4000000000009995 | O cartão é recusado com um código de recusa como `insufficient_funds`. | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. | | 6205500000000000004 | O cartão UnionPay tem um comprimento variável de 13 a 19 dígitos. | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. | #### Carteiras | Forma de pagamento | Cenário | Como testar | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | O cliente paga com uma forma de pagamento baseada em redirecionamento e [notificação imediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Escolha qualquer forma de pagamento baseada em redirecionamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Concluir o pagamento de teste** na página de redirecionamento. | #### Débito bancário autenticado | Forma de pagamento | Cenário | Como testar | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito automático BECS | O cliente paga com débito automático BECS. | Preencha o formulário usando o número de conta `900123456` e BSB `000000`. Inicialmente, o status do PaymentIntent muda para `processing` e, 3 minutos depois, para `succeeded`. | | Débito automático BECS | O pagamento do cliente falha com um código de erro `account_closed`. | Preencha o formulário usando o número da conta `111111113` e BSB `000000`. | | Bancontact, EPS, iDEAL, e Przelewy24 | Seu cliente não faz a autenticação na página de redirecionamento de uma forma de pagamento baseada em redirecionamento e notificação imediata. | Escolha qualquer forma de pagamento baseada em redirecionamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Falhar pagamento de teste** na página de redirecionamento. | | Pay by Bank | O cliente paga com uma forma de pagamento baseada em redirecionamento e [notificação posterior](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Escolha a forma de pagamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Concluir o pagamento de teste** na página de redirecionamento. | | Pay by Bank | Seu cliente não faz a autenticação na página de redirecionamento de uma forma de pagamento baseada em redirecionamento e notificação posterior. | Escolha a forma de pagamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Falhar o pagamento de teste** na página de redirecionamento. | | BLIK | Os pagamentos BLIK falham de várias formas: falhas imediatas (por exemplo, o código está vencido ou inválido), erros atrasados (o banco recusa) ou limites de tempo (o cliente não respondeu a tempo). | Use padrões de e-mail para [simular as diferentes falhas.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancários | Forma de pagamento | Cenário | Como testar | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito automático SEPA | O cliente paga com débito automático SEPA. | Preencha o formulário usando o número de conta `AT321904300235473204`. Inicialmente, o status do PaymentIntent muda para processando e, três minutos depois, para bem-sucedido. | | Débito automático SEPA | O status da intenção de pagamento do cliente muda de `processing` para `requires_payment_method`. | Preencha o formulário usando o número de conta `AT861904300235473202`. | #### Boletos | Forma de pagamento | Cenário | Como testar | | ------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- | | Boleto, OXXO | Seu cliente paga com um boleto ou uma guia OXXO. | Selecione boleto ou OXXO como forma de pagamento e envie o pagamento. Feche o diálogo exibido. | Consulte [Testes](https://docs.stripe.com/testing.md) para obter mais informações sobre como testar sua integração. # Descrição da compra > This is a Descrição da compra for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=ios&mobile-ui=payment-element. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integre a IU de pagamento pré-criada da Stripe no checkout do seu aplicativo iOS com a classe [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Veja nosso exemplo de integração [no GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example). Este guia mostra como aceitar pagamentos e movimentar fundos para as contas bancárias dos seus vendedores ou prestadores de serviços. Para fins de demonstração, criaremos um marketplace de locações residenciais que conecta proprietários a pessoas que querem alugar um imóvel. Você pode usar os conceitos deste guia para outras situações. ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. [Verifique e adicione os dados da empresa no Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Conclua seu perfil da plataforma](https://dashboard.stripe.com/connect/settings/profile). 1. [Personalize as configurações da sua marca](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Adicione um nome de empresa, ícone e cor da marca. ## Configurar a Stripe [Lado do servidor] [Lado do cliente] Primeiro, você precisa de uma conta Stripe. [Inscreva-se aqui](https://dashboard.stripe.com/register). ### Lado do servidor Esta integração exige que os endpoints do seu servidor se comuniquem com a API Stripe. Use as bibliotecas oficiais para acessar a API Stripe do seu servidor: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Lado do cliente O [SDK da Stripe para iOS](https://github.com/stripe/stripe-ios) é de código aberto, [totalmente documentado](https://stripe.dev/stripe-ios/index.html) e compatível com aplicativos que aceitam iOS 13 ou versões mais recentes. #### Gerenciador de pacotes Swift Para instalar o SDK, siga estas etapas: 1. No Xcode, selecione **Arquivo** > **Adicionar dependências de pacote…** e insira `https://github.com/stripe/stripe-ios-spm` como URL do repositório. 1. Selecione o número da última versão da nossa [página de lançamentos](https://github.com/stripe/stripe-ios/releases). 1. Adicione o produto **StripePaymentsUI** ao [alvo do seu aplicativo](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Se ainda não o fez, instale a versão mais recente do [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Se não tiver um [Podfile](https://guides.cocoapods.org/syntax/podfile.html), execute o seguinte comando para criar um: ```bash pod init ``` 1. Adicione esta linha ao seu `Podfile`: ```podfile pod 'StripePaymentsUI' ``` 1. Execute o seguinte comando: ```bash pod install ``` 1. Não se esqueça de usar o arquivo `.xcworkspace` para abrir seu projeto em Xcode, em vez do arquivo `.xcodeproj`, daqui em diante. 1. No futuro, para atualizar para a versão mais recente do SDK, execute: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Se ainda não o fez, instale a versão mais recente do [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Adicione esta linha ao seu `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Siga as [instruções de instalação do Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Certifique-se de integrar todas as estruturas necessárias listadas [here](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. No futuro, para atualizar para a versão mais recente do SDK, execute o seguinte comando: ```bash carthage update stripe-ios --platform ios ``` #### Estrutura manual 1. Vá até a nossa [página de lançamentos do GitHub](https://github.com/stripe/stripe-ios/releases/latest) e baixe e descompacte o **Stripe.xcframework.zip**. 1. Arraste **StripePaymentsUI.xcframework** até a seção **Embedded Binaries** das configurações **General** no seu projeto Xcode. Certifique-se de selecionar **Copy items if needed**. 1. Repita a etapa 2 para todas as estruturas necessárias listadas [here](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. No futuro, para atualizar para a versão mais recente do nosso SDK, repita as etapas 1 a 3. > Para obter mais informações sobre a versão mais recente e as versões anteriores do SDK, consulte a página [Lançamentos](https://github.com/stripe/stripe-ios/releases) no GitHub. Para receber notificações quando um novo lançamento for publicado, [assista aos lançamentos](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) do repositório. Configure o SDK com sua [chave publicável da Stripe](https://dashboard.stripe.com/test/apikeys) na inicialização do aplicativo. Isso permite que seu aplicativo faça solicitações à API da Stripe . #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Use suas [chaves de teste](https://docs.stripe.com/keys.md#obtain-api-keys) enquanto testa e desenvolve, e suas chaves de [modo de produção](https://docs.stripe.com/keys.md#test-live-modes) quando publicar seu aplicativo. ## Criar uma conta conectada #### Accounts v2 Quando um vendedor ou provedor de serviços se cadastra na sua plataforma, crie uma [conta conectada](https://docs.stripe.com/api/v2/core/accounts.md) que o represente. A conta conectada permite que você recolha suas informações de identificação, aceite pagamentos para eles e transfira fundos para a conta bancária deles. Em nosso exemplo de aluguel de casas, a conta conectada representa o proprietário da casa. #### Accounts v1 Quando um vendedor ou provedor de serviços se cadastra na sua plataforma, crie uma [conta conectada](https://docs.stripe.com/api/accounts.md) que o represente. A conta conectada permite que você recolha suas informações de identificação, aceite pagamentos para eles e transfira fundos para a conta bancária deles. Em nosso exemplo de aluguel de casas, a conta conectada representa o proprietário da casa. ![](https://b.stripecdn.com/docs-statics-srv/assets/express-ios.6789c3d9f8e327847abb218d75a29eec.png) > Este guia usa contas Express com determinadas [restrições](https://docs.stripe.com/connect/express-accounts.md#prerequisites-for-using-express). Você também tem a opção de avaliar [contas Custom](https://docs.stripe.com/connect/custom-accounts.md). ### Crie uma conta conectada com informações pré-preenchidas #### Accounts v2 Use a API `/v2/core/accounts` para [criar](https://docs.stripe.com/api/v2/core/accounts/create.md) uma conta conectada, especificando o [dashboard da conta conectada e as responsabilidades](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Se você já coletou dados de suas contas conectadas, pode usá-los para preencher o objeto `Account`. Você pode preencher quaisquer dados de conta, inclusive dados pessoais e comerciais, dados de contas externas e muito mais. Após criar uma `Conta`, crie uma [Pessoa](https://docs.stripe.com/api/v2/core/persons/create.md) para representar a pessoa responsável por abrir a conta, definindo como verdadeiro `relationship.representative` e todas as informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` O Connect Onboarding não solicita as informações pré-preenchidas. No entanto, ele solicita que o titular da conta confirme as informações pré-preenchidas antes de aceitar o [contrato de serviços do Connect](https://docs.stripe.com/connect/service-agreement-types.md). Ao testar sua integração, preencha antecipadamente os dados da conta usando [dados de teste](https://docs.stripe.com/connect/testing.md). ### Criar um link da conta Você pode criar um link de conta chamando a API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` e `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Redirecionar o usuário ao URL do link da conta A resposta de criação do link da conta inclui um valor de `url`. Após autenticar o usuário no seu aplicativo, redirecione-o para essa URL para inseri-lo no fluxo. As URLs de link da conta são temporárias e de uso único, pois concedem acesso às informações pessoais do usuário da conta conectada. Se desejar preencher previamente as informações, deverá preencher antes de gerar o link da conta. Depois de criar o link da conta, não será possível ler nem gravar informações na conta conectada. > Não envie URLs de links de conta por e-mail, SMS ou outra maneira para fora do aplicativo da sua plataforma. Em vez disso, forneça-os ao titular da conta autenticado dentro do seu aplicativo. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml