Aceite pagamentos com cartão sem webhooks

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 a partir do seu servidor:

# Available as a gem
sudo gem install stripe

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

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>
  );
}

Colete dados do cartão com segurança no cliente usando CardField, um componente de IU fornecido pelo SDK que coleta número do cartão, data de valide, CVC e código postal.

Adicione o componente CardField à tela de pagamentos para coletar com segurança dados de cartão dos clientes. Use o retorno de chamada onCardChange para examinar dados não confidenciais do cartão, como a bandeira, e verificar se os dados estão completos.

import { CardField, useStripe } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={true}
        placeholders={{
          number: '4242 4242 4242 4242',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
    </View>
  );
}

Execute o aplicativo e verifique se a página de checkout mostra o componente CardField.

Quando o cliente estiver pronto para fazer o checkout, crie um PaymentMethod com os detalhes coletados pelo componente CardField do cartão.

import { CardField, useStripe } from '@stripe/stripe-react-native';
function PaymentScreen() {
  const { createPaymentMethod, handleNextAction } = useStripe();
  const pay = () => {
    // Gather customer billing information (for example, email)
    const billingDetails: CreatePaymentMethod.BillingDetails = {
      email: 'email@stripe.com',
      phone: '+48888000888',
      addressCity: 'Houston',
      addressCountry: 'US',
      addressLine1: '1459  Circle Drive',
      addressLine2: 'Texas',
      addressPostalCode: '77063',
    };
    // Create payment method
    const { paymentMethod, error } = await createPaymentMethod({
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails,
      }
    });
  };
  // ...
}

Se o PaymentMethod for criado corretamente, envie o ID dele para o seu servidor.

// ...
const pay = () => {
  // ...
  // Send the PaymentMethod to your server to create a PaymentIntent
  const response = await fetch(`/pay`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ paymentMethodId: paymentMethod.id }),
  });
  const { error, requires_action, payment_intent_client_secret } = await response.json();
  if (error) {
    // Error creating or confirming PaymentIntent
    Alert.alert('Error', paymentIntentError);
    return;
  }
  if (payment_intent_client_secret && !requires_action) {
    // Payment succeeded
    Alert.alert('Success', 'The payment was confirmed successfully!');
  }
  if (payment_intent_client_secret && requires_action) {
    // ...continued below
  }
};
// ...

Configure um endpoint no seu servidor para receber a solicitação. Esse endpoint também será usado mais à frente, para gerenciar cartões que exijam mais uma etapa de autenticação.

Crie um novo PaymentIntent com o ID do PaymentMethod criado no cliente. Você pode confirmar o PaymentIntent definindo a propriedade confirm como verdadeira quando o PaymentIntent for criado ou invocando confirm após a criação. Também permitimos autorização e captura separadas para pagamentos com cartão.

Se o pagamento exigir ações adicionais, como autenticação do 3D Secure, o status do PaymentIntent será definido como requires_action. Se o pagamento falhar, o status será definido novamente como requires_payment_method e você deverá mostrar um erro ao usuário. Se o pagamento não exigir autenticação adicional, uma cobrança será criada e o status do PaymentIntent será definido como succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Para salvar o cartão e poder reutilizá-lo depois, crie um Customer para armazenar o PaymentMethod e insira os seguintes parâmetros ao criar o PaymentIntent:

• cliente. Configurado com o ID do Cliente.
• setup_future_usage. Definido como off_session para que a Stripe informe que você pretende usar este PaymentMethod para pagamentos fora da sessão, sem a presença do cliente. Esta configuração salva o PaymentMethod no Customer depois da confirmação do PaymentIntent e de todas as outras ações obrigatórias para o usuário. Veja o exemplo de código de salvar cartões depois de um pagamento para saber mais.

Os pagamentos costumam ser finalizados após você confirmá-los no servidor, na etapa 4. No entanto, alguns fluxos de pagamento exigem mais alguma ação do cliente, como autenticação com 3D Secure.

​​Para os casos que exigem outras ações, o status do PaymentIntent é requires_action. No cliente, passe o segredo do cliente do PaymentIntent para handleNextAction. O gerenciador nativo apresenta uma visualização e orienta o cliente pelo fluxo de autenticação. Depois de gerenciar as ações necessárias no cliente, o status do PaymentIntent muda para requires_confirmation. Isso permite que sua integração execute o pedido no seu backend e retorne o resultado da execução para o cliente.

Envie o ID do PaymentIntent para seu backend e confirme novamente em até uma hora para finalizar o pagamento. Caso contrário, a tentativa de pagamento falha e o status do SetupIntent volta a ser requires_payment_method.

// ...
const pay = () => {
  // ...
  // If PaymentIntent requires action, call handleNextAction
  if (payment_intent_client_secret && requires_action) {
    const { error, paymentIntent } = await handleNextAction(payment_intent_client_secret);
    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
        if (
          paymentIntent.status === PaymentIntents.Status.RequiresConfirmation
        ) {
          // Confirm the PaymentIntent again on your server
          const response = await fetch(`/pay`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ payment_intent_id: paymentIntent.id }),
          });
          const { error, success } = await response.json();
          if (error) {
            // Error during confirming Intent
            Alert.alert('Error', error);
          } else if (success) {
            Alert.alert('Success', 'The payment was confirmed successfully!');
          }
        } else {
          // Payment succedeed
          Alert.alert('Success', 'The payment was confirmed successfully!');
        }
      }
  }
};
// ...

Esse código só é executado quando um pagamento exige autenticação adicional, assim como no gerenciamento da etapa anterior. O código em si não é opcional, porque qualquer pagamento pode exigir essa etapa extra.

Com o mesmo endpoint que você configurou acima, confirme o PaymentIntent mais uma vez para finalizar o pagamento e executar o pedido. Esta confirmação precisa acontecer no máximo uma hora após a tentativa de pagamento. Do contrário, o pagamento falha e volta ao status requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​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.

Veja a lista completa de cartões de teste em nosso guia de testes.