# Crie uma plataforma SaaS com contas v1 Crie contas conectadas usando Accounts v1 e facilite pagamentos diretos para elas em sua plataforma SaaS. > #### 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 da plataforma SaaS v2](https://docs.stripe.com/connect/saas.md). Este guia abrange a permissão para seus usuários aceitarem pagamentos, transferir uma parte das receitas dos usuários para o seu saldo e repassar o restante para as contas bancárias dos usuários. Para ilustrar esses conceitos, usaremos um exemplo de plataforma que permite que as empresas criem suas próprias lojas online. # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=web. ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. Adicione dados da empresa para [ativar sua conta](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 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 Quando um usuário (vendedor ou provedor de serviços) se registra na sua plataforma, crie uma [Conta](https://docs.stripe.com/api/accounts.md) de usuário (chamada de *conta conectada*) para que você possa aceitar pagamentos e mover fundos para a conta bancária dele. Contas conectadas representam seu usuário na API da Stripe e ajudam a facilitar a coleta de requisitos de onboarding para que a Stripe possa verificar a identidade do usuário. No nosso exemplo do criador de lojas, a conta conectada representa a empresa que está configurando a loja online. ![Captura de tela do formulário do Connect Onboarding](https://b.stripecdn.com/docs-statics-srv/assets/Kavholm-Seamless-Standard.78b64d90c0bf87130c8b6ba1ef53df7f.png) ### Crie uma conta conectada e preencha os dados Use a API `/v1/accounts` para [criar](https://docs.stripe.com/api/accounts/create.md) uma conta conectada. Você pode criar a conta conectada usando os [parâmetros padrão da conta conectada](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou especificando o tipo de conta. #### Com propriedades padrão ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Com tipo de conta ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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. Depois de criar uma `Account`, crie uma [Pessoa](https://docs.stripe.com/api/persons/create.md) para representar a pessoa responsável por abrir a conta, com `relationship.representative` definido como verdadeiro e informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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](https://docs.stripe.com/api/account_links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Redirecione o usuário para o URL do link da conta A resposta à solicitação da API [Account Links](https://docs.stripe.com/api/account_links.md) inclui um valor para a chave `url`. Redirecione para esse link para enviar o usuário ao fluxo. Esses links são temporários e podem ser usados somente uma vez, porque concedem acesso aos dados pessoais do usuário da conta conectada. Autentique o usuário no aplicativo antes de redirecioná-lo para o URL. Se quiser preencher as informações, faça-o antes de gerar o link da conta. Após criar o link da conta, não será possível ler ou gravar informações na conta. > 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. ### Gerenciar o usuário que volta à plataforma O Connect Onboarding exige que você passe um `return_url` e `refresh_url` para gerenciar todos os casos em que o usuário é redirecionado à sua plataforma. É importante implementá-los corretamente para proporcionar a melhor experiência ao usuário. > Você pode usar HTTP para `return_url` e `refresh_url` enquanto estiver em um ambiente de teste (por exemplo, para testar com localhost), mas o modo de produção só aceita HTTPS. Não se esqueça de trocar os URLs de teste para HTTPS antes de entrar em modo de produção. #### return_url A Stripe emite um redirecionamento para este URL quando o usuário conclui o fluxo do Connect Onboarding. Isso não significa que todas as informações foram coletadas ou que não há requisitos pendentes na conta. Significa somente que a entrada e saída do fluxo foram normais. Nenhum estado é passado por este URL. Após o redirecionamento de um usuário para o `return_url` , verifique o estado do parâmetro `details_submitted` na conta dele realizando uma das seguintes ações: - Escutar webhooks `account.updated` - Chamar a API [Accounts](https://docs.stripe.com/api/accounts.md) e inspecionar o objeto retornado #### refresh_url O usuário é redirecionado para `refresh_url` nestes casos: - O link expirou (alguns minutos se passaram desde a criação do link) - O usuário já acessou o link (atualizou a página ou clicou em Voltar ou Avançar no navegador). - Sua plataforma não consegue mais acessar a conta - A conta foi recusada O `refresh_url` deve acionar um método no servidor para chamar novamente a API [Account Links](https://docs.stripe.com/api/account_links.md) com os mesmos parâmetros e redirecionar o usuário ao fluxo do Connect Onboarding para criar uma experiência ideal. ### Gerenciar usuários que não concluíram o onboarding Um usuário que é redirecionado para o seu `return_url` pode não ter concluído o processo de onboarding. Use o endpoint `/v1/accounts` para recuperar a conta do usuário e verificar `charges_enabled`. Se a conta não estiver totalmente integrada, forneça solicitações de IU para permitir que o usuário continue o onboarding mais tarde. O usuário pode concluir a ativação da conta por meio de um novo link de conta (gerado por sua integração). Verifique o estado do parâmetro `details_submitted` na conta dele para ver se o processo de onboarding foi concluído. ## Ativar formas de pagamento Veja as [configurações de formas de pagamento](https://dashboard.stripe.com/settings/connect/payment_methods) e ative as que pretende aceitar. Os pagamentos com cartão ficam ativados por padrão, mas você pode ativar e desativar as formas de pagamento conforme a necessidade. Este guia supõe que as formas de pagamento Bancontact, cartões de crédito, EPS, iDEAL, Przelewy24, débito automático SEPA e Sofort estão ativadas. Antes da exibição das formas de pagamento, 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 estouro. > O **componente de configurações da forma de pagamento integrado** permite que contas conectadas configurem as formas de pagamento que oferecidas no checkout sem precisar acessar o Dashboard da Stripe. Saiba mais sobre o[componente de configurações da forma de pagamento integrado](https://docs.stripe.com/connect/supported-embedded-components/payment-method-settings.md) e receba notificações assim que ele estiver disponível. ## Aceitar um pagamento Você pode incorporar o [Stripe Checkout](https://stripe.com/payments/checkout) como um formulário de pagamento direto no seu site, ou redirecionar os usuários para uma página hospedada pelo Stripe para finalização da compra. O Checkout oferece suporte a diversos métodos de pagamento e exibe automaticamente as opções mais relevantes para cada cliente. Também é possível utilizar o Payment Element (Elemento de Pagamento), um componente de interface pré-construído que pode ser incorporado como um iframe em seu formulário, permitindo aceitar múltiplas formas de pagamento com uma única integração no front-end. #### Página hospedada pela Stripe ### Crie uma Sessão do Checkout (Lado do cliente) (Lado do servidor) Uma sessão do Checkout controla o que seu cliente vê no formulário de pagamento integrável, como itens de linha, valor e moeda do pedido e formas de pagamento aceitas. Quando realiza cobranças diretas, o Checkout usa as configurações de marca da conta conectada. Consulte a seção [Personalizar a marca](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding) para obter mais informações. Ao contrário de cobranças de destino e cobranças e transferências separadas, os usuários (as contas conectadas) são responsáveis por gerenciar contestações de cobranças diretas. Essa responsabilidade não é da plataforma. 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 "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ --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. - `success_url` - este argumento redireciona um usuário após a conclusão de um pagamento. - `Stripe-Account` – Este cabeçalho indica uma [cobrança direta](https://docs.stripe.com/connect/direct-charges.md) para sua conta conectada. Com cobranças diretas, a conta conectada é responsável pelas taxas da Stripe, reembolsos e estornos. A marca da conta conectada é usada no Checkout, permitindo que os clientes sintam que estão interagindo diretamente com a empresa, e não com a sua plataforma. - (Opcional) `payment_intent_data[application_fee_amount]` - este argumento especifica o valor que sua plataforma planeja obter da transação. Após o processamento do pagamento na conta conectada, o `application_fee_amount` é transferido para a plataforma, e a tarifa da Stripe é deduzida do saldo da conta conectada. ![Fluxo de criação de conta](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) ### 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. | 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) muda de `processing` para `succeeded`. #### Formulário integrado ### Crie uma Sessão do Checkout (Lado do cliente) (Lado do servidor) Uma sessão do Checkout controla o que seu cliente vê na página de pagamentos hospedada pela Stripe, como itens de linha, valor e moeda do pedido e formas de pagamento aceitas. Quando realiza cobranças diretas, o Checkout usa as configurações de marca da conta conectada. Consulte a seção [Personalizar a marca](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding) para obter mais informações. Ao contrário de cobranças de destino e cobranças e transferências separadas, os usuários (as contas conectadas) são responsáveis por gerenciar contestações de cobranças diretas. Essa responsabilidade não é da plataforma. No seu servidor, faça a chamada a seguir para a API Stripe. A resposta de criação da Sessão do Checkout inclui um `client_secret`, que você usará na próxima etapa para montar o Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -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 ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items` – este argumento representa os itens que seu cliente está comprando e que aparecerão na interface do usuário hospedada. - `return_url` - este argumento redireciona um usuário após a conclusão de uma tentativa de pagamento. - `Stripe-Account` – este cabeçalho indica uma [cobrança direta](https://docs.stripe.com/connect/direct-charges.md) para sua conta conectada. Com cobranças diretas, a conta conectada é responsável por tarifas da Stripe, reembolsos e estornos. A marca da conta conectada é utilizada no Checkout, o que permite aos clientes sentirem que estão interagindo diretamente com o comerciante em vez da plataforma. - (Opcional) `payment_intent_data[application_fee_amount]` – este argumento especifica o valor que sua plataforma planeja obter da transação. Se estiver usando a [Ferramenta de preços da plataforma](https://docs.stripe.com/connect/platform-pricing-tools.md) da Stripe para gerenciar preços de tarifas da plataforma da [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), não inclua este argumento, pois ele substituirá qualquer lógica de preços definida pela ferramenta. Após o processamento do pagamento na conta conectada, o `application_fee_amount` é transferido para a plataforma, e a tarifa da Stripe é deduzida do saldo da conta conectada. Verifique se o `return_url` corresponde a uma página no seu site que informa o status do pagamento. Quando a Stripe redireciona o cliente para o `return_url`, substituímos a string `{CHECKOUT_SESSION_ID}` pelo ID da Sessão do Checkout. Use-o para recuperar a Sessão do Checkout e verifique o status para decidir o que mostrar aos clientes. Também é possível anexar seus próprios parâmetros de consulta ao fornecer o `return_url`, que persiste durante o processo de redirecionamento. ![Fluxo de criação de conta](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) ### 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('<>', { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}', }); 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. ### Personalizar a aparência Personalize o Checkout para corresponder ao design do seu site, definindo a cor de fundo, a cor do botão, o raio da borda e as fontes nas [configurações de marca](https://dashboard.stripe.com/settings/branding) da sua conta. Por padrão, o Checkout é renderizado sem preenchimento ou margem externa. Recomendamos usar um elemento de contêiner, como um div para aplicar a margem desejada (for example, 16px em todos os lados). ### 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. | 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) muda 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, não liste formas de pagamento manualmente. 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. A Stripe prioriza as que ajudam a aumentar a conversão e são mais relevantes para a moeda e a localização do cliente. Ocultamos as formas de pagamento de menor prioridade em um menu de estouro. #### Gerenciar formas de pagamento no Dashboard ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 ``` Ao criar um PaymentIntent, você precisa especificar certos parâmetros: - `amount` e `currency` – Crie um PaymentIntent no seu servidor com um valor e uma moeda. - (Opcional) `automatic_payment_methods` – Na versão mais recente do API, não é preciso especificar esse parâmetro 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 retorna automaticamente formas de pagamento qualificadas com base em fatores como valor, moeda e fluxo de pagamento da transação. - (Opcional) `payment_intent_data[application_fee_amount]` – este argumento especifica o valor que sua plataforma planeja obter da transação. Se estiver usando a [Ferramenta de preços da plataforma](https://docs.stripe.com/connect/platform-pricing-tools.md) da Stripe para gerenciar preços de tarifas da plataforma da [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), não inclua este argumento, pois ele substituirá qualquer lógica de preços definida pela ferramenta. Após o processamento do pagamento na conta conectada, o `application_fee_amount` é transferido para a plataforma, e a tarifa da Stripe é deduzida do saldo da conta conectada. #### Listar manualmente as formas de pagamento ```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 ``` Ao criar um PaymentIntent, você precisa especificar certos parâmetros: - `amount` - crie um PaymentIntent no seu servidor com um valor especificado. Sempre determine o valor a ser cobrado no lado do servidor, pois esse é um ambiente confiável. Essa abordagem evita que clientes mal-intencionados escolham seus próprios preços. - `currency` - a moeda incluída no PaymentIntent filtra as formas de pagamento mostradas ao cliente. Portanto, escolha-a de acordo com as formas de pagamento que deseja oferecer. Por exemplo, se você passar `eur` e a OXXO estiver ativada no Dashboard, a OXXO não aparecerá para o cliente porque não aceita pagamentos em `eur`. Algumas formas de pagamento aceitam várias moedas e países. Este guia usa Bancontact, cartões de crédito, EPS, iDEAL, Przelewy24, débito automático SEPA e Sofort nos exemplos de código. - `"payment_method_types[]"` - liste manualmente todas as formas de pagamento que deseja aceitar. - (Opcional) `payment_intent_data[application_fee_amount]` - este argumento especifica o valor que sua plataforma planeja obter da transação. Se estiver usando a [ferramenta de preços da plataforma](https://docs.stripe.com/connect/platform-pricing-tools.md) da Stripe para gerenciar preços de tarifas da plataforma no [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), não inclua este argumento, pois ele substituirá qualquer lógica de preços definida pela ferramenta. Após o processamento do pagamento na conta conectada, o `application_fee_amount` é transferido para a plataforma, e a tarifa da Stripe é deduzida do saldo da conta conectada. > 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, um componente de IU que simplifica a coleta de dados de pagamento para uma ampla variedade de 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. O endereço da página de checkout deve começar com `https://` em vez de `http://` para que sua integração funcione. Você pode testar sua integração sem usar HTTPS, mas lembre-se de [habilitá-la](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos em tempo real. #### Configurar o Stripe.js #### HTML + JS O Payment Element está disponível automaticamente como um recurso do Stripe.js. Inclua o script do 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 você mesmo uma cópia dele. ```html Checkout ``` Crie uma instância da `Stripe` com o seguinte JavaScript na página de checkout: ```javascript // Initialize Stripe.js with the same connected account ID used when creating // the PaymentIntent. const stripe = Stripe('<>', { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}' }); ``` #### Adicionar o Stripe Elements e o Payment Element à 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 tiver sido carregado, crie uma instância do Payment Element e monte-o no node DOM do contêiner com o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior. Passe esse valor como uma opção quando criar a instância do [Elements](https://docs.stripe.com/js/elements_object/create). O segredo do cliente precisa ser administrado com cuidado, porque pode finalizar a cobrança. Não armazene, insira em URL nem exponha o segredo para ninguém, exceto para o próprio cliente. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with the Appearance API appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form using the client secret const elements = stripe.elements(options); // Create and mount the Payment Element const paymentElement = elements.create("payment"); paymentElement.mount("#payment-element"); ``` O Payment Element renderiza um formulário dinâmico, onde o cliente escolhe uma forma de pagamento. O formulário coleta automaticamente todos os dados de pagamento necessários para a forma de pagamento selecionada pelo cliente. Durante a configuração do objeto `Elements`, você pode [personalizar a aparência do Payment Element](https://docs.stripe.com/elements/appearance-api.md) de acordo com o design do site. #### React Instale o [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e o [carregador do 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 ``` ### Adicionar e configurar o provedor do Elements à sua página de pagamento Para usar o componente Payment Element, insira 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 e o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior como `options` no provedor 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("<>", { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}' }); function App() { const options = { // pass the client secret from the previous step clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with the Appearance API appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` #### Adicionar o componente PaymentElement 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 Payment Element renderiza um formulário dinâmico, onde o cliente escolhe um tipo de forma de pagamento. O formulário coleta automaticamente todos os dados de pagamento necessários para a forma de pagamento selecionada pelo cliente. Durante a configuração do provedor do `Elements`, você pode [personalizar a aparência do Payment Element](https://docs.stripe.com/elements/appearance-api.md) de acordo com o design do site. ### 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 [Crie contas](https://docs.stripe.com/connect/testing.md#creating-accounts) e use [OAuth](https://docs.stripe.com/connect/testing.md#using-oauth) para testar o fluxo de criação de contas. Teste as configurações das **formas de pagamento** das contas conectadas: entre em uma das contas de teste e acesse as [configurações das formas de pagamento](https://dashboard.stripe.com/settings/payment_methods). Teste o fluxo de checkout com suas chaves de teste e uma conta de teste. É possível usar nossos [cartões de teste](https://docs.stripe.com/testing.md) para testar seu fluxo de pagamentos e simular vários resultados de pagamento. # 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-saas-platform?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). ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. Adicione dados da empresa para [ativar sua conta](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 agora](https://dashboard.stripe.com/register). ### Lado do servidor Esta integração exige que os endpoints do seu servidor se comuniquem com a API da Stripe. Use nossas bibliotecas oficiais para acessar a API da Stripe pelo 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 **StripePaymentSheet** 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 'StripePaymentSheet' ``` 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 StripePaymentSheet ``` #### 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/StripePaymentSheet/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 **StripePaymentSheet.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/StripePaymentSheet/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 UIKitimportStripePaymentSheet @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 Quando um usuário (vendedor ou provedor de serviços) se cadastrar em sua plataforma, crie uma [Conta](https://docs.stripe.com/api/accounts.md) de usuário (chamada de *conta conectada*) para aceitar pagamentos e enviar valores para a conta bancária dele. Contas conectadas representam seu usuário no API da Stripe e ajudam a gerenciar a coleta de requisitos de onboarding para que a Stripe possa verificar a identidade do usuário. No nosso exemplo do criador de lojas, a conta conectada representa a empresa que está configurando a loja online. ![Fluxo de criação de conta](https://b.stripecdn.com/docs-statics-srv/assets/standard-ios.10c6b24cef1d683d36f2264c726beb1d.png) ### Etapa 2.1: Crie uma conta conectada e preencha os dados (Lado do servidor) Use a API `/v1/accounts` para [criar](https://docs.stripe.com/api/accounts/create.md) uma conta conectada. Você pode criar a conta conectada usando os [parâmetros padrão da conta conectada](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou especificando o tipo de conta. #### Com propriedades padrão ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Com tipo de conta ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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. Depois de criar uma `Account`, crie uma [Pessoa](https://docs.stripe.com/api/persons/create.md) para representar a pessoa responsável por abrir a conta, com `relationship.representative` definido como verdadeiro e informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Etapa 2.2: crie um link de conta (Lado do servidor) Você pode criar um link de conta chamando a API [Account Links](https://docs.stripe.com/api/account_links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Etapa 2.3: redirecione seu usuário para o URL do link da conta (Lado do cliente) A resposta à sua solicitação de [links de conta](https://docs.stripe.com/api/account_links.md) inclui um valor para a chave `url`. Redirecione para este link para enviar seu usuário ao fluxo. Os links de conta são temporários e usados somente uma vez, porque concedem acesso aos dados pessoais do usuário da conta conectada. Autentique o usuário no aplicativo antes de redirecioná-lo para esse URL. Se quiser preencher as informações, faça-o antes de gerar o link da conta. Após criar o link para uma conta Standard, não será possível ler ou gravar informações na conta. > 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. #### 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 } } ``` ### Etapa 2.4: gerencie o usuário que está retornando à sua plataforma (Lado do cliente) O *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) Onboarding exige que você passe `return_url` e `refresh_url` para gerenciar todos os casos em que o usuário é redirecionado à sua plataforma. É importante implementá-los corretamente para proporcionar a melhor experiência ao usuário. Você pode configurar um [link universal](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) para permitir que o iOS redirecione automaticamente para o seu aplicativo. #### return_url A Stripe emite um redirecionamento para este URL quando o usuário conclui o fluxo do Connect Onboarding. Isso não significa que todas as informações foram coletadas ou que não há requisitos pendentes na conta. Significa somente que a entrada e saída do fluxo foram normais. Nenhum estado é passado através deste URL. Após o redirecionamento de um usuário para o `return_url`, verifique o estado do parâmetro `details_submitted` na conta dele, realizando uma das seguintes ações: - Escutar *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) `account.updated` - Chamar a API [Accounts](https://docs.stripe.com/api/accounts.md) e inspecionar o objeto retornado #### refresh_url O usuário é redirecionado para `refresh_url` nestes casos: - O link expirou (alguns minutos se passaram desde a criação do link) - O usuário já acessou o link (atualizou a página ou clicou em Voltar ou Avançar no navegador). - Sua plataforma não consegue mais acessar a conta - A conta foi recusada O `refresh_url` deve acionar um método no servidor para chamar novamente a API [Account Links](https://docs.stripe.com/api/account_links.md) com os mesmos parâmetros e redirecionar o usuário ao fluxo do Connect Onboarding para criar uma experiência ideal. ### Etapa 2.5: Gerencie os usuários que não concluíram o onboarding Um usuário que é redirecionado para o seu `return_url` pode não ter concluído o processo de onboarding. Use o endpoint `/v1/accounts` para recuperar a conta do usuário e verificar `charges_enabled`. Se a conta não estiver totalmente integrada, forneça solicitações de IU para permitir que o usuário continue o onboarding mais tarde. O usuário pode concluir a ativação da conta por meio de um novo link de conta (gerado por sua integração). Verifique o estado do parâmetro `details_submitted` na conta dele para ver se o processo de onboarding foi concluído. ## Ativar formas de pagamento Veja as [configurações de formas de pagamento](https://dashboard.stripe.com/settings/connect/payment_methods) e ative as que pretende aceitar. Os pagamentos com cartão são ativados por padrão, mas você pode ativar e desativar as formas de pagamento conforme a necessidade. ## Adicionar um endpoint [Lado do servidor] > #### Nota > > Para exibir o PaymentSheet antes de criar um PaymentIntent, consulte [Colete os dados de pagamento antes de criar um Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md). Esta integração usa três objetos da API da Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): A Stripe usa isso 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. 1. (Opcional) [Customer](https://docs.stripe.com/api/customers.md): Para configurar uma forma de pagamento para pagamentos futuros, vincule-a a um *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crie um objeto Customer quando o cliente abrir uma conta na sua empresa. Se o cliente pagar como convidado, você pode criar o objeto Customer antes do pagamento e associá-lo à sua representação interna da conta do cliente, mais tarde. 1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Os dados do objeto Customer são confidenciais e não podem ser recuperados diretamente do aplicativo. Uma CustomerSession concede ao SDK acesso temporário com escopo definido ao cliente e fornece opções de configuração adicionais. Consulte uma lista completa de [opções de configuração](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Se você nunca salva cartões para um cliente e não permite que clientes retornando reutilizem cartões salvos, é possível omitir os objetos cliente e CustomerSession da sua integração. Por motivos de segurança, o aplicativo não pode criar esses objetos. Para isso, adicione um endpoint ao servidor para: 1. Recuperar ou criar um Customer. 1. Cria uma [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) para o cliente. 1. Cria um PaymentIntent com o [valor](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), a [moeda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) e o [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Retorna o *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)) do Payment Intent, o `client_secret` da CustomerSession, o [id](https://docs.stripe.com/api/customers/object.md#customer_object-id) do Cliente e sua [chave publicável](https://dashboard.stripe.com/apikeys) para seu aplicativo. As formas de pagamento mostradas aos clientes durante o processo de checkout também são incluídas no PaymentIntent. Você pode permitir que a Stripe obtenha as formas de pagamento das configurações do Dashboard ou listá-las manualmente. Independentemente da opção escolhida, saiba que a moeda passada no PaymentIntent filtra as formas de pagamento mostradas para o cliente. Por exemplo, se você passar EUR no `eur` e a OXXO estiver ativada no Dashboard, a OXXO não será exibida ao cliente porque a OXXO não aceita pagamentos em `eur`. 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. Isso ocorre porque a Stripe avalia a moeda, as restrições de forma de pagamento e outros parâmetros para determinar a lista de formas de pagamento aceitas. Priorizamos as formas de formas de pagamento que aumentam a conversão e que são mais relevantes para a moeda e a localização do cliente. #### Gerenciar formas de pagamento no Dashboard 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 usando as formas de pagamento configuradas no Dashboard. Se não quiser usar o Dashboard ou se quiser especificar formas de pagamento manualmente, você pode listá-las usando o atributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ ``` #### Listar manualmente as formas de pagamento #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ -d application_fee_amount="123" \ ``` > 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 a página [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. ## Integrar a descrição da compra [Lado do cliente] Para exibir o Payment Element para dispositivos móveis na tela de checkout, não se esqueça de: - Mostrar os produtos que o cliente está comprando e o valor total - Usar o [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) para coletar todos os dados de envio necessários do cliente - Adicionar um botão de checkout para exibir a IU da Stripe #### UIKit Na tela checkout do aplicativo, busque o segredo do cliente PaymentIntent, o segredo do cliente CustomerSession, a ID do cliente e a chave publicável do endpoint que você criou na etapa anterior. Use`STPAPIClient.shared` para definir sua chave publicável e inicialize o[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Em seguida, defina `STPAPIClient.shared.stripeAccount` ao ID da conta conectada. #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKeySTPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}""// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Quando o cliente toca no botão **Checkout**, invoque `present` para apresentar a PaymentSheet. Após o cliente concluir o pagamento, a descrição é descartada e o bloco de conclusão é invocado com [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Crie um modelo `ObservableObject` para sua tela de checkout. Esse modelo publica uma [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) e um [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Busque a segredo do cliente PaymentIntent, o segredo do cliente CustomerSession, a ID do cliente e a chave publicável do endpoint que você criou na etapa anterior. Use`STPAPIClient.shared` para definir sua chave publicável e inicialize o[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Em seguida, defina `STPAPIClient.shared.stripeAccount` ao ID da conta conectada. ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKeySTPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}""// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Adicione um [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) à sua `View`. O comportamento é similar a um `Button` SwiftUI, que permite ser personalizado com a adição de uma `View`. Quando você clica no botão, o PaymentSheet é exibido. Depois que você conclui o pagamento, a Stripe descarta a PaymentSheet e chama o gerenciador `onCompletion` com um objeto [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey STPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}"" // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Se `PaymentSheetResult` for `.completed`, informe ao usuário (por exemplo, exibindo uma tela de confirmação de pedido). Configurar `allowsDelayedPaymentMethods` como verdadeiro permite formas de pagamento de [notificação assíncrona](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como contas bancárias dos EUA. Para essas formas de pagamento, o status final do pagamento não é conhecido quando o `PaymentSheet` é concluído, sendo efetivado ou não posteriormente. Se você aceitar esses tipos de formas de pagamento, informe o cliente que seu pedido está confirmado e somente processe o pedido (por exemplo, fazendo o envio do produto) quando o pagamento for bem-sucedido. ## Configurar um URL de retorno [Lado do cliente] O cliente pode sair do seu aplicativo para autenticar (por exemplo, no Safari ou no aplicativo bancário). Para permitir que eles voltem ao seu aplicativo após a autenticação, [configure um esquema de URL personalizado](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) e configure seu aplicativo delegado para encaminhar o URL ao SDK. A Stripe não aceita [links universais](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` ## Gerenciar eventos pós-pagamento [Lado do servidor] 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. | ## Testar a integração #### 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. | #### Débito bancário autenticado | Forma de pagamento | Cenário | Como testar | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Bancontact, iDEAL | 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`. | Consulte [Testes](https://docs.stripe.com/testing.md) para obter mais informações sobre como testar sua integração. ## Optional: Ativar Apple Pay > Se sua tela de checkout tiver um **botão Apple Pay** exclusivo, siga o [guia Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) e use `ApplePayContext` para coletar pagamento pelo seu botão Apple Pay. Você pode usar `PaymentSheet` para processar outros tipos de forma de pagamento. ### Solicitar um ID de comerciante da Apple Obtenha um ID de comerciante da Apple [solicitando um novo identificador](https://developer.apple.com/account/resources/identifiers/add/merchant) no site de desenvolvedores da Apple. Preencha o formulário com descrição e identificador. A descrição é para seu controle e pode ser modificada no futuro. A Stripe recomenda que você use o nome do aplicativo como identificador (por exemplo, `merchant.com.{{YOUR_APP_NAME}}`). ### Criar um certificado Apple Pay Crie um certificado para criptografia de dados de pagamento pelo aplicativo. Vá até [Configurações de certificado do iOS](https://dashboard.stripe.com/settings/ios_certificates) no Dashboard, clique em **Adicionar novo aplicativo** e siga o guia. Baixe um arquivo de solicitação de assinatura de certificado (CSR) para obter um certificado seguro da Apple que permite usar o Apple Pay. Um arquivo CSR deve ser usado para emitir exatamente um certificado. Se você trocar seu ID de comerciante da Apple, acesse as [Configurações de certificado do iOS](https://dashboard.stripe.com/settings/ios_certificates) no Dashboard para obter um novo CSR e certificado. ### Integrar com Xcode Adicione as funções do Apple Pay ao aplicativo. No Xcode, abra as configurações do projeto, clique na guia **Signing & Capabilities** e adicione o recurso **Apple Pay**. Talvez seja necessário fazer login na sua conta de desenvolvedor. Selecione o ID de comerciante criado anteriormente e o aplicativo já pode aceitar Apple Pay. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Habilitar o recurso Apple Pay no Xcode ### Adicionar Apple Pay #### Pagamento avulso Para adicionar Apple Pay à PaymentSheet, defina [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) após inicializar `PaymentSheet.Configuration` com seu ID de comerciante Apple e o [código de país da sua empresa](https://dashboard.stripe.com/settings/account). #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Pagamentos recorrentes Para adicionar Apple Pay à PaymentSheet, defina [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) após inicializar `PaymentSheet.Configuration` com seu ID de comerciante Apple e o [código de país da sua empresa](https://dashboard.stripe.com/settings/account). De acordo com as [diretrizes da Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) para pagamentos recorrentes, você também precisará definir atributos adicionais no `PKPaymentRequest`. Adicione um gerenciador em [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) para configurar [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) com o valor que você pretende cobrar (por exemplo, 9,95 USD por mês). Você também pode adotar [tokens de comerciante](https://developer.apple.com/apple-pay/merchant-tokens/) definindo as propriedades `recurringPaymentRequest` ou `automaticReloadPaymentRequest` no `PKPaymentRequest`. Para saber mais sobre como usar pagamentos recorrentes com o Apple Pay, consulte a [documentação do PassKit da Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Rastreamento de pedidos Para adicionar informações de [rastreamento de pedidos](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) no iOS 16 ou posterior, configure um [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) em seu `PaymentSheet.ApplePayConfiguration.Handlers`. A Stripe invoca sua implementação após a conclusão do pagamento, mas antes que o iOS descarte a descrição Apple Pay. Na sua implementação de `authorizationResultHandler`, obtenha os detalhes do pedido a partir do seu servidor para o pedido concluído. Adicione esses detalhes ao [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) fornecido e retorne o resultado modificado. Para saber mais sobre o rastreamento de pedidos, consulte a [documentação de pedidos da carteira da Apple](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Ativar leitura de cartões Para habilitar o suporte à leitura de cartões no iOS, defina `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) no `Info.plist` do seu aplicativo e informe um motivo para o acesso à câmera (por exemplo, “Para ler cartões”). ## Optional: Personalizar a descrição Toda personalização é configurada usando o objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html). ### Aparência Personalize cores, fontes e assim por diante para combinar com a aparência do seu aplicativo usando a [API appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Layout da forma de pagamento Configure o layout das formas de pagamento na planilha usando [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Você pode exibi-los horizontalmente, verticalmente ou deixar a Stripe otimizar o layout automaticamente. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic ``` ### Coletar endereços de usuários Colete endereços de entrega ou cobrança locais e internacionais de seus clientes usando o [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Nome de exibição do comerciante Especifique o nome da empresa exibido para o cliente definindo [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). Por padrão, esse é o nome do seu aplicativo. #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc." ``` ### Modo escuro A `PaymentSheet` se adapta automaticamente às configurações de aparência do sistema do usuário (modos claro e escuro). Se o seu aplicativo não aceitar o modo escuro, defina [estilo](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) como modo `alwaysLight` ou `alwaysDark`. ```swift var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight ``` ### Dados de faturamento padrão Para definir valores padrão para dados de faturamento coletados na descrição da compra, configure a propriedade `defaultBillingDetails`. A `PaymentSheet` preenche previamente seus campos com os valores que você informou. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ### Coleta de dados de faturamento Use `billingDetailsCollectionConfiguration` para especificar como você deseja coletar dados de faturamento na página de pagamento. Você pode coletar o nome, e-mail, número de telefone e endereço do cliente. Se você quiser apenas os dados de faturamento exigidos pela forma de pagamento, defina `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` como verdadeiro. Nesse caso, `PaymentSheet.Configuration.defaultBillingDetails` são definidos como os [detalhes de faturamento](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) da forma de pagamento. Se você quiser coletar dados de faturamento adicionais que não são necessariamente exigidos pela forma de pagamento, defina `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` como falso. Nesse caso, os dados de faturamento coletados por meio da `PaymentSheet` são definidos como os dados de faturamento da forma de pagamento. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true ``` > Consulte seu jurídico sobre as leis que se aplicam à coleta de dados. Só colete números de telefone se precisar deles para a transação. ## Optional: Conclua o pagamento em sua IU Você pode exibir o Payment Sheet apenas para coletar dados da forma de pagamento e depois chamar um método `confirm` para concluir o pagamento na IU do aplicativo. Isso é útil quando você tem um botão de compra personalizado ou precisa de mais etapas após a coleta dos dados do pagamento. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Conclua o pagamento na IU do aplicativo #### UIKit As etapas a seguir mostram como concluir o pagamento na IU do aplicativo. Veja nosso exemplo de integração no [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift). 1. Primeiro, inicialize [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) em vez de `PaymentSheet` e atualize a IU com sua propriedade `paymentOption`. Essa propriedade contém uma imagem e um rótulo que representam a forma de pagamento padrão selecionada inicialmente pelo cliente. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Em seguida, chame `presentPaymentOptions` para coletar os detalhes do pagamento. Quando terminar, atualize sua IU novamente com a propriedade `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Por fim, chame `confirm`. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI As etapas a seguir mostram como concluir o pagamento na IU do aplicativo. Veja nosso exemplo de integração no [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift). 1. Primeiro, inicialize [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) em vez de `PaymentSheet`. A propriedade `paymentOption` contém uma imagem e um rótulo representando a forma de pagamento selecionada no momento pelo cliente, que você pode usar na sua IU. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Use [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) para inserir o botão que apresenta a descrição da compra para coletar os dados de pagamento. Quando `PaymentSheet.FlowController` chama o argumento `onSheetDismissed`, o `paymentOption` da instância `PaymentSheet.FlowController` reflete a forma de pagamento selecionada. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Use [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) para encapsular o botão que confirma o pagamento. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Se `PaymentSheetResult` for `.completed`, informe ao usuário (por exemplo, exibindo uma tela de confirmação de pedido). Configurar `allowsDelayedPaymentMethods` como verdadeiro permite formas de pagamento de [notificação assíncrona](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como contas bancárias dos EUA. Para essas formas de pagamento, o status final do pagamento não é conhecido quando o `PaymentSheet` é concluído, sendo efetivado ou não posteriormente. Se você aceitar esses tipos de formas de pagamento, informe o cliente que seu pedido está confirmado e somente processe o pedido (por exemplo, fazendo o envio do produto) quando o pagamento for bem-sucedido. ## 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). Teste as configurações das **formas de pagamento** das contas conectadas: entre numa conta de teste e acesse as [configurações das formas de pagamento](https://dashboard.stripe.com/settings/payment_methods). Teste o fluxo de checkout com suas chaves de teste e uma conta de teste. Você pode usar nossos [cartões de teste](https://docs.stripe.com/testing.md) para testar seu fluxo de pagamentos e simular vários resultados de pagamento. # Somente Card Element > This is a Somente Card Element for when platform is ios and mobile-ui is card-element. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=ios&mobile-ui=card-element. Colete dados de cartões com segurança usando [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html), um componente de IU inserível fornecido pelo SDK que coleta o número do cartão, a data de validade, o CVC e o código postal. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. Adicione dados da empresa para [ativar sua conta](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 Este guia explica como usar código para criar uma conta conectada. Se ainda não estiver pronto para fazer a integração, é possível criar uma conta conectada [pelo Dashboard](https://docs.stripe.com/connect/dashboard/managing-individual-accounts.md). Quando um usuário (vendedor ou provedor de serviços) se cadastrar em sua plataforma, crie uma [Conta](https://docs.stripe.com/api/accounts.md) de usuário (chamada de *conta conectada*) para aceitar pagamentos e enviar valores para a conta bancária dele. Contas conectadas representam seu usuário no API da Stripe e ajudam a gerenciar a coleta de requisitos de onboarding para que a Stripe possa verificar a identidade do usuário. No nosso exemplo do criador de lojas, a conta conectada representa a empresa que está configurando a loja online. ![](https://b.stripecdn.com/docs-statics-srv/assets/standard-ios.10c6b24cef1d683d36f2264c726beb1d.png) ### Etapa 2.1: Crie uma conta conectada e preencha os dados (Lado do servidor) Use a API `/v1/accounts` para [criar](https://docs.stripe.com/api/accounts/create.md) uma conta conectada. Você pode criar a conta conectada usando os [parâmetros padrão da conta conectada](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou especificando o tipo de conta. #### Com propriedades padrão ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Com tipo de conta ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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. Depois de criar uma `Account`, crie uma [Pessoa](https://docs.stripe.com/api/persons/create.md) para representar a pessoa responsável por abrir a conta, com `relationship.representative` definido como verdadeiro e informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Etapa 2.2: Crie um link de conta (Lado do servidor) Você pode criar um link de conta chamando a API [Account Links](https://docs.stripe.com/api/account_links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Etapa 2.3: Redirecione seu usuário para o URL do link da conta (Lado do cliente) A resposta à sua solicitação do [Account Links](https://docs.stripe.com/api/account_links.md)] inclui um valor para a `URL` da chave. Redirecione para este link para enviar o usuário para o fluxo. As URLs da API [Account Links](https://docs.stripe.com/api/account_links.md) são temporárias e podem ser usadas apenas uma vez, pois concedem acesso aos dados pessoais do titular da conta. Autentique o usuário em seu aplicativo antes de redirecioná-lo para esta URL. Se você quiser preencher as informações antecipadamente, deverá fazê-lo antes de gerar o link da conta. Depois de criar o link da conta para uma conta Standard, você não poderá ler ou gravar informações da conta. > 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. #### 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 } } ``` ### Etapa 2.4: Gerencie o usuário que está retornando à sua plataforma (Lado do cliente) O *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) Onboarding exige que você passe `return_url` e `refresh_url` para gerenciar todos os casos em que o usuário for redirecionado à sua plataforma. É importante implementá-los corretamente para proporcionar a melhor experiência ao usuário. Você pode configurar um [link universal](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) para permitir que o iOS redirecione automaticamente para o seu aplicativo. #### return_url A Stripe emite um redirecionamento para este URL quando o usuário conclui o fluxo do Connect Onboarding. Isso não significa que todas as informações foram coletadas ou que não há requisitos pendentes na conta. Significa somente que a entrada e saída do fluxo foram normais. Nenhum estado é passado através deste URL. Após o redirecionamento de um usuário para o `return_url`, verifique o estado do parâmetro `details_submitted` na conta dele, realizando uma das seguintes ações: - Escutar *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) `account.updated` - Chamar a API [Accounts](https://docs.stripe.com/api/accounts.md) e inspecionar o objeto retornado #### refresh_url O usuário será redirecionado para o `refresh_url` nestes casos: - O link expirou (alguns minutos se passaram desde a criação do link) - O link já foi acessado (o usuário atualizou a página ou clicou em Voltar ou Avançar no navegador) - O link foi compartilhado em um aplicativo de terceiros, como um cliente de mensagens que tenta acessar o URL para visualizá-lo. Muitos clientes acessam automaticamente links que fazem com que eles expirem - Sua plataforma não consegue mais acessar a conta - A conta foi recusada O `refresh_url` deve acionar um método no servidor para chamar novamente a API [Account Links](https://docs.stripe.com/api/account_links.md) com os mesmos parâmetros e redirecionar o usuário ao fluxo do Connect Onboarding para criar uma experiência ideal. ### Etapa 2.5: Gerencie usuários que não concluíram o onboarding Um usuário que é redirecionado para o seu `return_url` pode não ter concluído o processo de onboarding. Use o endpoint `/v1/accounts` para recuperar a conta do usuário e verificar `charges_enabled`. Se a conta não estiver totalmente integrada, forneça solicitações de IU para permitir que o usuário continue o onboarding mais tarde. O usuário pode concluir a ativação da conta por meio de um novo link de conta (gerado por sua integração). Verifique o estado do parâmetro `details_submitted` na conta dele para ver se o processo de onboarding foi concluído. ## Aceitar um pagamento ### Etapa 3.1: Crie uma página de checkout (Lado do cliente) Colete dados de cartões com segurança usando [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html), um componente de IU inserível fornecido pelo SDK que coleta o número do cartão, a data de validade, o CVC e o código postal. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) Crie uma instância do componente de cartão e um botão **Pagar**, com o seguinte código: #### Swift ```swift import UIKit import StripePaymentsUI class CheckoutViewController: UIViewController { lazy var cardTextField: STPPaymentCardTextField = { let cardTextField = STPPaymentCardTextField() return cardTextField }() lazy var payButton: UIButton = { let button = UIButton(type: .custom) button.layer.cornerRadius = 5 button.backgroundColor = .systemBlue button.titleLabel?.font = UIFont.systemFont(ofSize: 22) button.setTitle("Pay", for: .normal) button.addTarget(self, action: #selector(pay), for: .touchUpInside) return button }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white let stackView = UIStackView(arrangedSubviews: [cardTextField, payButton]) stackView.axis = .vertical stackView.spacing = 20 stackView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stackView) NSLayoutConstraint.activate([ stackView.leftAnchor.constraint(equalToSystemSpacingAfter: view.leftAnchor, multiplier: 2), view.rightAnchor.constraint(equalToSystemSpacingAfter: stackView.rightAnchor, multiplier: 2), stackView.topAnchor.constraint(equalToSystemSpacingBelow: view.topAnchor, multiplier: 2), ]) } @objc func pay() { // ... } } ``` Execute seu aplicativo e verifique se sua página de checkout mostra o componente de cartão e o botão de pagamento. ### Etapa 3.2: Crie um PaymentIntent (Lado do servidor) (Lado do cliente) 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. ### Lado do servidor No seu servidor, crie um endpoint que cria um PaymentIntent com um [valor](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-amount) e uma [moeda](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-currency). Sempre decida quanto deseja cobrar no lado do servidor, um ambiente confiável, e não no lado do cliente. Isso evita que clientes mal-intencionados escolham os próprios preços. #### curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}" ``` Em nosso exemplo de montagem de loja, queremos criar um negócio em que os clientes paguem diretamente as empresas. Para configurar esta empresa: - Indique uma compra da empresa como cobrança direta, com o cabeçalho `Stripe-Account`. - Especifique com `application_fee_amount` o valor da compra da empresa que será pago à plataforma. Quando uma venda é realizada, a Stripe transfere o valor de `application_fee_amount` da conta conectada para a plataforma e deduz a tarifa da Stripe da conta conectada. Veja esse fluxo de fundos ilustrado abaixo: ![](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) Em vez de passar todo o objeto PaymentIntent para o seu aplicativo, retorne somente o *client secret* (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)). A chave secreta do cliente do PaymentIntent é uma chave única que permite confirmar o pagamento e atualizar dados do cartão do cliente, mas impede a manipulação de informações confidenciais, como o valor do pagamento. ### Lado do cliente Configure o id da conta conectada como argumento para o aplicativo do cliente nas bibliotecas do lado do cliente. #### Swift ```swift import UIKit import StripePayments @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { StripeAPI.defaultPublishableKey = "<>" STPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}"" return true } } ``` No cliente, solicite um PaymentIntent a partir do seu servidor e armazene o *segredo de 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)). #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ### Etapa 3.3: Envie o pagamento à Stripe (Lado do cliente) Quando o cliente toca no botão **Pagar**, *confirme* (Confirming a PaymentIntent indicates that the customer intends to pay with the current or provided payment method. Upon confirmation, the PaymentIntent attempts to initiate a payment) o `PaymentIntent` para finalizar o pagamento. Primeiro, monte um objeto [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) com: 1. Os dados da forma de pagamento do campo de texto do cartão 1. O segredo do cliente do `PaymentIntent` do seu servidor Em vez de enviar o objeto PaymentIntent para o cliente, use o *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 é diferente das chaves de API que autenticam solicitações da API Stripe. O segredo do cliente é uma string que permite que o aplicativo acesse campos importantes do PaymentIntent (por exemplo, `status`), mas oculta campos confidenciais (como `customer`). Administre cuidadosamente o segredo do cliente, pois ele pode finalizar a cobrança. Não registre em log, incorpore a URLs nem exponha esse nome a ninguém, exceto ao cliente. Em seguida, chame o método [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) para finalizar o pagamento. #### Swift ```swift class CheckoutViewController: UIViewController { // ... @objc func pay() { guard let paymentIntentClientSecret = paymentIntentClientSecret else { return } // Collect card details let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) paymentIntentParams.paymentMethodParams = cardTextField.paymentMethodParams // Submit the payment let paymentHandler = STPPaymentHandler.shared() paymentHandler.confirmPayment(paymentIntentParams, with: self) { (status, paymentIntent, error) in switch (status) { case .failed: self.displayAlert(title: "Payment failed", message: error?.localizedDescription ?? "") break case .canceled: self.displayAlert(title: "Payment canceled", message: error?.localizedDescription ?? "") break case .succeeded: self.displayAlert(title: "Payment succeeded", message: paymentIntent?.description ?? "", restartDemo: true) break @unknown default: fatalError() break } } } } extension CheckoutViewController: STPAuthenticationContext { func authenticationPresentingViewController() -> UIViewController { return self } } ``` Você pode [salvar os dados do cartão de pagamento de um cliente](https://docs.stripe.com/payments/payment-intents.md#future-usage) na confirmação do pagamento informando `setupFutureUsage` e um `customer` no `PaymentIntent`. Você também pode informar esses parâmetros ao criar o `PaymentIntent` no servidor. Para informar um valor adequado em `setupFutureUsage` para o aplicativo, pode ser necessário que o cliente faça outras autenticações, mas reduz a probabilidade de recusa de pagamentos futuros pelos bancos. [Saiba como otimizar cartões para pagamentos futuros](https://docs.stripe.com/payments/payment-intents.md#future-usage) e determine qual valor usar para seu aplicativo. | Como você pretende usar o cartão | Valor de enumeração `setup_future_usage` | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | | Somente para pagamentos *na sessão* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) | `on_session` | | Somente para pagamentos *fora da sessão* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) | `off_session` | | Pagamentos na sessão ou fora da sessão | `off_session` | Você pode usar um cartão configurado para pagamentos na sessão para fazer pagamentos fora da sessão, mas é mais provável que o banco recuse o pagamento fora da sessão e exija autenticação do titular do cartão. Quando uma regulamentação como a [Autenticação Forte de Cliente](https://docs.stripe.com/strong-customer-authentication.md) exige autenticação, `STPPaymentHandler` apresenta controladores de visualização usando o [STPAuthenticationContext](https://stripe.dev/stripe-ios/stripe-payments/Protocols/STPAuthenticationContext.html) informado e orienta o cliente nesse processo. [Saiba como aceitar a autenticação do 3D Secure no iOS](https://docs.stripe.com/payments/3d-secure.md?platform=ios). Se o pagamento é finalizado, o gerenciador de finalização é chamado com o status `.succeeded`. Caso contrário, o status é `.failed` e você pode exibir `error.localizedDescription` para o usuário. Também é possível verificar o status de um `PaymentIntent` no [Dashboard](https://dashboard.stripe.com/test/payments) ou inspecionando a propriedade `status` no objeto. ### Etapa 3.4: Teste a integração (Lado do cliente) ​​Vários cartões de teste estão disponíveis para você usar em uma área restrita para assegurar que essa integração esteja pronta. Use-os com qualquer CVC e uma data de validade no futuro. | Número | Descrição | | ---------------- | -------------------------------------------------------------------------------------------- | | 4242424242424242 | Finaliza e processa o pagamento imediatamente. | | 4000002500003155 | Requer autenticação. A Stripe abre uma janela solicitando que o cliente faça a autenticação. | | 4000000000009995 | Sempre falha, com o código de recusa `insufficient_funds`. | Veja a lista completa de cartões de teste em nosso guia de [testes](https://docs.stripe.com/testing.md). ### Etapa 3.5: Processamento (Lado do servidor) Após a conclusão de um pagamento, você precisa gerenciar a *execução* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected). Por exemplo, um criador de loja deve alertar a empresa para enviar o item comprado ao cliente. Configure um endpoint de *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [no seu Dashboard](https://dashboard.stripe.com/account/webhooks) (para eventos *de seus aplicativos do Connect*). ![](https://b.stripecdn.com/docs-statics-srv/assets/connect_webhooks.4de92f78dcd94b36838010c85c8a051f.png) Em seguida, crie um endpoint de HTTP no seu servidor para monitorar pagamentos concluídos, depois autorize os usuários (contas conectadas) a executar as compras. #### Rubi ```ruby # Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' # If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] connected_account_id = event['account'] handle_successful_payment_intent(connected_account_id, payment_intent) end status 200 end def handle_successful_payment_intent(connected_account_id, payment_intent) # Fulfill the purchase puts 'Connected account ID: ' + connected_account_id puts payment_intent.to_s end ``` Learn more in our [fulfillment guide for payments](https://docs.stripe.com/webhooks/handling-payment-events.md). ### Testar webhooks localmente Use a Stripe CLI para testar webhooks localmente. 1. Primeiro [instale o Stripe CLI](https://docs.stripe.com/stripe-cli/install.md) na sua máquina, caso ainda não tenha instalado. 1. Para fazer login, execute `stripe login` na linha de comando e siga as instruções. 1. Por fim, para permitir que seu host local receba um evento simulado em sua conta conectada, execute `stripe listen --forward-to localhost:{PORT}/webhook` em uma janela do terminal e execute `stripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} payment_intent.succeeded` (ou acione qualquer outro [evento aceito](https://github.com/stripe/stripe-cli/wiki/trigger-command#supported-events)) em outro. ## Testando 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). Teste as configurações das **formas de pagamento** das contas conectadas: entre numa conta de teste e acesse as [configurações das formas de pagamento](https://dashboard.stripe.com/settings/payment_methods). Teste o fluxo de checkout com suas chaves de teste e uma conta de teste. Você pode usar nossos [cartões de teste](https://docs.stripe.com/testing.md) para testar seu fluxo de pagamentos e simular vários resultados de pagamento. # Descrição da compra > This is a Descrição da compra for when platform is android and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=android&mobile-ui=payment-element. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) Integre a IU de pagamento incorporada da Stripe no checkout do seu aplicativo Android com a classe [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html). ## Pré-requisitos 1. [Cadastre sua plataforma](https://dashboard.stripe.com/connect). 1. Adicione dados da empresa para [ativar sua conta](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 agora](https://dashboard.stripe.com/register). ### Lado do servidor Esta integração exige que os endpoints do seu servidor se comuniquem com a API da Stripe. Use as bibliotecas oficiais para acessar a API da Stripe pelo 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 Android](https://github.com/stripe/stripe-android) é de código aberto e [totalmente documentado](https://stripe.dev/stripe-android/). Para instalar o SDK, adicione `stripe-android` ao bloco `dependencies` do arquivo [app/build.gradle](https://developer.android.com/studio/build/dependencies): #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.0") } ``` > Veja mais informações sobre o último lançamento de SDK e as versões anteriores na página [Lançamentos](https://github.com/stripe/stripe-android/releases) no GitHub. Para receber notificações quando um novo lançamento for publicado, [assista aos lançamentos do repositório](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Configure o SDK com sua [chave publicável](https://dashboard.stripe.com/apikeys) da Stripe, de modo que seja possível fazer solicitações à API Stripe, como em sua subcategoria `Application`: #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > 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 Quando um usuário (vendedor ou provedor de serviços) se cadastrar em sua plataforma, crie uma [Conta](https://docs.stripe.com/api/accounts.md) de usuário (chamada de *conta conectada*) para aceitar pagamentos e enviar valores para a conta bancária dele. Contas conectadas representam seu usuário no API da Stripe e ajudam a gerenciar a coleta de requisitos de onboarding para que a Stripe possa verificar a identidade do usuário. No nosso exemplo do criador de lojas, a conta conectada representa a empresa que está configurando a loja online. ![Fluxo de criação de conta](https://b.stripecdn.com/docs-statics-srv/assets/standard-android.04900ae101e927a74a6f2b0afb53bf23.png) ### Etapa 2.1: Crie uma conta conectada e preencha os dados (Lado do servidor) Use a API `/v1/accounts` para [criar](https://docs.stripe.com/api/accounts/create.md) uma conta conectada. Você pode criar a conta conectada usando os [parâmetros padrão da conta conectada](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou especificando o tipo de conta. #### Com propriedades padrão ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Com tipo de conta ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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. Depois de criar uma `Account`, crie uma [Pessoa](https://docs.stripe.com/api/persons/create.md) para representar a pessoa responsável por abrir a conta, com `relationship.representative` definido como verdadeiro e informações da conta que você queira preencher previamente (por exemplo, o nome e sobrenome). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Etapa 2.2: crie um link de conta (Lado do servidor) Você pode criar um link de conta chamando a API [Account Links](https://docs.stripe.com/api/account_links.md) com os seguintes parâmetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Etapa 2.3: redirecione seu usuário para o URL do link da conta (Lado do cliente) A resposta à sua solicitação de [links de conta](https://docs.stripe.com/api/account_links.md) inclui um valor para a chave `url`. Redirecione para este link para enviar seu usuário ao fluxo. Os links de conta são temporários e usados somente uma vez, porque concedem acesso aos dados pessoais do usuário da conta conectada. Autentique o usuário no aplicativo antes de redirecioná-lo para esse URL. Se quiser preencher as informações, faça-o antes de gerar o link da conta. Após criar o link para uma conta Standard, não será possível ler ou gravar informações na conta. > 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. ```xml