Permita que as empresas da sua plataforma aceitem pagamentos diretamente

Primeiro, você precisa de uma conta Stripe. Cadastre-se agora.

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:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Lado do cliente

O SDK do React Native é de código aberto e totalmente documentado. Internamente, utiliza as SDKs de iOS nativo e Android. Para instalar o SDK do React Native da Stripe, execute um dos seguintes comandos no diretório do seu projeto (dependendo de qual gerenciador de pacotes você usa):

yarn add @stripe/stripe-react-native

Em seguida, instale algumas outras dependências necessárias:

• Para iOS, vá até o diretório ios e execute pod install para garantir a instalação das dependências nativas necessárias.
• Para Android, não há mais dependências para instalar.

Inicialização da Stripe

Para inicializar a Stripe no aplicativo React Native, insira sua tela de pagamento com o componente StripeProvider ou use o método de inicialização initStripe. Somente a chave da API publicável em publishableKey é necessária. O exemplo a seguir mostra como inicializar a Stripe usando o componente StripeProvider.

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

Quando um usuário (vendedor ou provedor de serviços) se cadastrar em sua plataforma, crie uma Conta 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.

Etapa 2.1: Crie uma conta conectada e preencha os dados Lado do servidor

Use a API /v1/accounts para criar uma conta conectada. Você pode criar a conta conectada usando os parâmetros padrão da conta conectada ou especificando o tipo de conta.

curl -X POST https://api.stripe.com/v1/accounts \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

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.

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.

Ao testar sua integração, preencha antecipadamente os dados da conta usando dados de teste.

Etapa 2.2: crie um link de conta Lado do servidor

Você pode criar um link de conta chamando a API Account Links com os seguintes parâmetros:

• account
• refresh_url
• return_url
• type = account_onboarding

curl https://api.stripe.com/v1/account_links \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_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 inclui um valor para a chave url. 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. 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. Envie este URL ao aplicativo e abra-o no navegador para que o usuário conclua o fluxo de Connect Onboarding.

Etapa 2.4: gerencie o usuário que está retornando à sua plataforma Lado do cliente

O Connect Onboarding exige que você passe um return_url e um 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 deep link para habilitar a página da Stripe a redirecionar 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 account.updated
• Chamar a API Accounts 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 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.

Veja as configurações de formas de pagamento 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.

Esta integração usa três objetos da API da Stripe:

1. PaymentIntent: 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.

2. (Opcional) Customer: Para configurar uma forma de pagamento para pagamentos futuros, vincule-a a um Customer. 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.

3. (Opcional) Chave Efêmera de Cliente: as informações sobre o objeto Customer são confidenciais e não podem ser obtidas diretamente por um apliativo. Uma Chave Efêmera concede acesso temporário ao Cliente para o SDK.

Por motivos de segurança, seu aplicativo não pode criar esses objetos. Em vez disso, adicione um endpoint ao seu servidor que:

1. Recuperar ou criar um Customer.
2. Criar uma chave efêmera para o Customer.
3. Cria um PaymentIntent com o valor, a moeda e o cliente. Também é possível incluir opcionalmente o parâmetro automatic_payment_methods. A Stripe habilita sua funcionalidade por padrão na versão mais recente da API.
4. Retorna o segredo do cliente do Payment Intent, o secret da chave efêmera, o id do cliente e sua chave publicável ao 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.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-06-30.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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" \

Antes de exibir o Element Pagamento para dispositivos móveis, a página de checkout deve:

• Mostrar os produtos sendo comprados e o valor total
• Coletar todos os dados de entrega necessários
• Incluir um botão de checkout para apresentar a IU da Stripe

No checkout do aplicativo, faça uma solicitação de rede para o endpoint de backend criado por você na etapa anterior e chame o initPaymentSheet do hook useStripe.

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Quando o cliente tocar no botão Checkout, chame presentPaymentSheet() para abrir a descrição. Depois que o cliente finalizar o pagamento, a descrição será descartada e a promessa será resolvida com um StripeError<PaymentSheetError> opcional.

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Se não houver erro, informe ao usuário que está tudo pronto (por exemplo, exibindo uma tela de confirmação de pedido).

Configurar allowsDelayedPaymentMethods como verdadeiro permite formas de pagamento de notificação assíncrona 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.

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 e configure seu aplicativo delegado para encaminhar o URL ao SDK. A Stripe não aceita links universais.

// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    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
    }
}

Além disso, defina o returnURL no seu objeto PaymentSheet.Configuration para o URL do seu aplicativo.

var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"

Stripe envia um evento payment_intent.succeeded quando o pagamento é concluído. Use a ferramenta Dashboard webhook ou siga o guia de webhooks 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 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:

Consulte Testes para obter mais informações sobre como testar sua integração.