Aceitar um pagamento OXXO

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 React, { 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>
  );
}

Um PaymentIntent é um objeto que representa sua intenção de coletar o pagamento de um cliente, acompanhando todas as etapas do ciclo de vida do processo de pagamento.

Lado do servidor

Crie uma PaymentIntent no seu servidor com um valor e a moeda mxn (OXXO não aceita outras moedas). Se você já tiver uma integração usando a API Payment Intents, adicione oxxo à lista de tipos de forma de pagamento para seu PaymentIntent.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"

Outras opções da forma de pagamento

Você pode especificar um parâmetro opcional expires_after_days nas opções da forma de pagamento para o PaymentIntent, definindo os dias corridos até o vencimento de uma guia OXXO. Por exemplo, se você criar uma guia OXXO na segunda-feira e a configuração de expires_after_days for 2, a guia vencerá na quarta-feira, às 23h59, horário da América/Mexico_City (UTC-6). O parâmetro expires_after_days pode ser de 1 a 7 dias. O padrão é 3 dias.

Do lado do cliente

No cliente, solicite um PaymentIntent a partir do seu servidor e armazene o segredo de cliente.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'mxn',
      payment_method_types: ['oxxo'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

No seu aplicativo, colete o nome completo e endereço de e-mail do cliente.

export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Obtenha o segredo do cliente com o PaymentIntent criado e invoque confirmPayment. Será apresentada uma visualização web com a guia OXXO.

export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
      email,
    };

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Oxxo',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.RequiresAction) {
        Alert.alert(
          'Success',
          `The OXXO voucher was created successfully. Awaiting payment from customer.`
        );
      } else {
        Alert.alert('Payment intent status:', paymentIntent.status);
      }
    }
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Opcional: envie e-mail ao cliente com um link para a guia de pagamento

A Stripe envia um evento payment_intent.requires_action quando uma guia OXXO é criada. Se precisar enviar um e-mail ao cliente com o link para a guia, acesse o PaymentIntent para obter o link, após receber o evento. O campo hosted_voucher_url em payment_intent.next_action.oxxo_display_details contém o link para a guia.

Opcional: personalizar a guia

A Stripe permite personalizar as IUs exibidas para seus clientes na página Configurações da marca.

Estas configurações de marca podem ser aplicadas à guia:

• Ícone: a imagem de sua marca e nome fantasia da empresa
• Cor de destaque: usada no botão Copiar número
• Cor da marca: usada como cor de fundo

A OXXO é uma forma de pagamento com notificação posterior: os fundos não ficam disponíveis imediatamente. Os clientes podem não pagar a guia OXXO em uma loja de conveniência OXXO imediatamente após o checkout.

A Stripe envia um evento payment_intent.succeeded no dia útil seguinte (de segunda a sexta, exceto feriados do calendário mexicano) para todas as guias OXXO pagas. Use o Dashboard ou crie um gerenciador de webhooks para receber esses eventos e executar ações (por exemplo, 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).

Após a data de validade, o status do PaymentIntent muda para processing e o cliente não pode mais pagar a guia OXXO vencida. Se a guia não for paga até 23:59 (horário da Mexico_City/UTC-6) da data de validade, a Stripe envia um evento payment_intent.payment_failed até 10 dias corridos após a data de validade (na maioria dos casos, o evento é enviado dentro de 7 dias corridos). Por exemplo, se a guia OXXO vencer em 1º de setembro, o evento será enviado no máximo até 10 de setembro.

Receber eventos e tomar providências comerciais

Manualmente

Use o Stripe Dashboard para ver todos os pagamentos da Stripe, enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos com falha.

• Veja os pagamentos de teste no Dashboard

Código personalizado

Crie um gerenciador de webhooks para ouvir eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração do webhook localmente usando a CLI da Stripe.

• Crie um webhook personalizado

Em uma área restrita, use os e-mails a seguir ao chamar confirmPayment para testar diferentes cenários.