Apple Pay

Obtenha um ID de comerciante da Apple solicitando um novo identificador 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}}).

Crie um certificado para criptografia de dados de pagamento pelo aplicativo.

Vá até Configurações de certificado do iOS 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 no Dashboard para obter um novo CSR e certificado.

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.

Habilitar o recurso Apple Pay no Xcode

No componente StripeProvider, especifique o ID de comerciante da Apple que você solicitou:

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

function App() {
  return (
    <StripeProvider
      publishableKey="
pk_test_TYooMQauvdEDq54NiTphI7jx"
      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}"
    >
      // Your app code here
    </StripeProvider>
  );
}

Antes de mostrar o Apple Pay como forma de pagamento no aplicativo, verifique se o dispositivo do usuário aceita Apple Pay e se o usuário adicionou um cartão à sua carteira:

import { PlatformPayButton, isPlatformPaySupported } from '@stripe/stripe-react-native';

function PaymentScreen() {
  const [isApplePaySupported, setIsApplePaySupported] = useState(false);

  useEffect(() => {
    (async function () {
      setIsApplePaySupported(await isPlatformPaySupported());
    })();
  }, [isPlatformPaySupported]);

  // ...

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

  // ...

  return (
    <View>
      {isApplePaySupported && (
        <PlatformPayButton
          onPress={pay}
          type={PlatformPay.ButtonType.Order}
          appearance={PlatformPay.ButtonStyle.Black}
          borderRadius={4}
          style={{
            width: '100%',
            height: 50,
          }}
        />
      )}
    </View>
  );
}

Lado do servidor

Crie um endpoint que crie um PaymentIntent com um valor e uma moeda. Sempre decida quanto cobrar do lado do servidor, um ambiente seguro, em vez do lado do cliente. Isso evita que clientes mal-intencionados possam escolher os preços.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd"

Do lado do cliente

Crie um método que solicite um PaymentIntent do seu servidor:

function PaymentScreen() {
  // ...
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        some: 'value',
      }),
    });
    const { clientSecret } = await response.json();

    return clientSecret;
  };
  // ...
}

Solução de problemas

Quando ocorrem erros da API Stripe durante a criação de tokens, é provável que o problema esteja no certificado do Apple Pay. Gere um novo certificado e carregue-o na Stripe, como descrito nesta página. Use um CSR obtido do Dashboard (não use certificados gerados por você mesmo). Muitas vezes, o Xcode armazena incorretamente certificados antigos no cache. Por isso, além de gerar um novo certificado, a Stripe recomenda que você também crie outro ID de comerciante da Apple.

O erro:

Você não adicionou a conta de comerciante da Apple à Stripe

pode indicar que o aplicativo está enviando dados criptografados com um CSR/certificado anterior (que não é da Stripe). No seu ID de comerciante da Apple, revogue todos os certificados gerados por CSRs que não sejam da Stripe . Se o erro persistir, exclua o ID de comerciante da conta Apple e crie o ID novamente. Em seguida, crie um certificado baseado no mesmo CSR (fornecido pela Stripe) usando anteriormente. Não é necessário carregar esse novo certificado para a Stripe. Para concluir, desative e ative as credenciais do Apple Pay no aplicativo para atualizá-las.

Na propriedade onPress do PlatformPayButton, execute confirmPlatformPayPayment para abrir uma planilha do Apple Pay. Para exibir os itens do carrinho do cliente na planilha de pagamento, informe os itens como um argumento. O último item deve representar sua empresa e o total; ele aparece na planilha com a palavra “Pay” anexada (por exemplo, “Pay iHats, Inc. $50”).

import { confirmPlatformPayPayment } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ... see above

  const pay = async () => {
    const clientSecret = await fetchPaymentIntentClientSecret()
    const { error, paymentIntent } = await confirmPlatformPayPayment(
      clientSecret,
      {
        applePay: {
          cartItems: [
            {
              label: 'Example item name',
              amount: '14.00',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'Tax',
              amount: '1.60',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'iHats, Inc.',
              amount: '15.60',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
          ],
          merchantCountryCode: 'US',
          currencyCode: 'USD',
          requiredShippingAddressFields: [
            PlatformPay.ContactField.PostalAddress,
          ],
          requiredBillingContactFields: [PlatformPay.ContactField.PhoneNumber],
        },
      }
    );
    if (error) {
      // handle error
    } else {
      Alert.alert('Success', 'Check the logs for payment intent details.');
      console.log(JSON.stringify(paymentIntent, null, 2));
    }
  };

  // ... see above
}