Apple Pay

Pour obtenir un ID de marchand Apple, demandez un nouvel identifiant sur le site Web Apple Developer.

Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, merchant.com.{{YOUR_APP_NAME}}).

Créez un certificat permettant à votre application de chiffrer les données de paiement.

Accédez aux paramètres des certificats iOS dans le Dashboard, cliquez sur Ajouter une nouvelle application et suivez le guide.

Téléchargez un fichier CSR (Certificate Signing Request) pour obtenir d’Apple un certificat sécurisé vous autorisant à utiliser Apple Pay.

Un fichier CSR peut émettre exactement un certificat. Si vous changez d’ID de marchand Apple, vous devez accéder aux paramètres des certificats iOS dans le Dashboard pour obtenir un nouveau fichier CSR et un nouveau certificat.

Ajoutez la fonctionnalité Apple Pay à votre application. Dans Xcode, ouvrez vos paramètres de projet, cliquez sur l’onglet Signature et fonctionnalités, puis ajoutez Apple Pay. Vous serez peut-être alors invité(e) à vous connecter à votre compte développeur. Sélectionnez l’ID du marchand créé plus tôt. Il est désormais possible d’utiliser Apple Pay sur votre application.

Activez la fonctionnalité Apple Pay dans Xcode

Dans le composant StripeProvider, spécifiez l’ID de marchand Apple avec lequel vous venez de vous inscrire :

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

Avant d’afficher Apple Pay comme option de paiement dans votre application, déterminez si l’appareil de l’utilisateur prend en charge Apple Pay et s’il a ajouté une carte bancaire à son portefeuille :

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

Côté serveur

Créez un endpoint qui génère un PaymentIntent avec un montant et une devise. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, à la différence du côté client. Cette précaution empêchera les éventuels clients malveillants de fixer leurs propres tarifs.

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

Côté client

Créez une méthode qui demande un PaymentIntent depuis votre serveur :

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;
  };
  // ...
}

Résolution des problèmes

Si l’API Stripe génère des erreurs lors de la tentative de création de tokens, il est probable que votre certificat Apple Pay pose problème. Solution : générer un nouveau certificat et l’envoyer à Stripe, comme expliqué sur cette page. Veillez à utiliser une demande de signature de certificat (CSR) obtenue depuis votre Dashboard et non pas une CSR que vous avez générée vous-même. Xcode met souvent en cache de manière incorrecte d’anciens certificats. En plus de générer un nouveau certificat, Stripe vous recommande donc de créer aussi un nouvel ID de marchand Apple.

Si vous recevez l’erreur :

Vous n’avez pas ajouté votre compte de marchand Apple à Stripe

Il est probable que votre application envoie des données chiffrées avec une ancienne CSR/un ancien certificat (non générés par Stripe). Vérifiez que tout certificat généré par des CSR autres que Stripe est révoqué pour votre ID de marchand Apple. Si cette mesure ne résout pas le problème, supprimez l’ID de marchand dans votre compte Apple et recréez-le. Ensuite, créez un nouveau certificat basé sur la même CSR (fournie par Stripe) que celle utilisée précédemment. Vous n’avez pas besoin de charger ce nouveau certificat sur Stripe. Une fois ces opérations effectuées, désactivez les identifiants Apple Pay dans votre application et réactivez-les pour vous assurer qu’ils sont bien actualisés.

Dans la propriété onPress de votre PlatformPayButton, appelez confirmPlatformPayPayment pour ouvrir un formulaire Apple Pay. Pour afficher les articles mis dans le panier du client sur le formulaire de paiement, transmettez les articles en tant qu’arguments :

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

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

  const pay = async () => {
    const clientSecret = await fetchPaymentIntentClientSecret()
    const { error } = await confirmPlatformPayPayment(
      clientSecret,
      {
        applePay: {
          cartItems: [
            {
              label: 'Example item name',
              amount: '14.00',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'Total',
              amount: '12.75',
              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
}