Accepter les paiements par carte sans webhooks

Côté serveur

Pour cette intégration, votre serveur doit être doté de points de terminaison qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur :

# Available as a gem
sudo gem install stripe

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

Côté client

La trousse SDK de React Native est un logiciel libre très bien documenté. À l’interne, elle utilise les trousses SDK pour iOS natif et pour Android. Pour installer la trousse SDK de React Native, exécutez l’une des commandes suivantes dans le répertoire de votre projet (qui dépend du gestionnaire de progiciel que vous utilisez) :

yarn add @stripe/stripe-react-native

Ensuite, installez les autres dépendances nécessaires :

• Pour iOS, accédez au répertoire ** ios** et exécutez la fonctionnalité pod install pour vous assurer d’installer également les dépendances natives requises.
• Pour Android, il n’y a plus de dépendances à installer.

Initialisation de Stripe

Pour initialiser Stripe dans votre application React Native, enveloppez votre écran de paiement avec le composant StripeProvider ou utilisez la méthode d’initialisation initStripe. Seule la clé publiable de l’API est requise dans l’objet publishableKey. L’exemple suivant montre comment initialiser Stripe à l’aide du composant 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>
  );
}

Collectez en toute sécurité les informations de carte du client avec CardField, un composant d’interface utilisateur fourni par la trousse SDK qui collecte le numéro de carte, la date d’expiration, le CVC et le code postal.

Ajoutez le composant CardField à votre page de paiement pour recueillir les informations de carte de manière sécurisée auprès de vos clients. Utilisez le rappel onCardChange pour inspecter des informations non sensibles relatives à la carte, comme la marque, et pour vérifier si les détails sont complets.

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

Exécutez votre application et assurez-vous que votre page de paiement affiche le composant CardField.

Lorsque votre client est prêt à effectuer son paiement, créez un objet PaymentMethod avec les informations recueillies par le composant CardField.

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

Une fois le PaymentMethod créé avec succès, envoyez l’identifiant qui en résulte à votre serveur.

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

Configurez un point de terminaison sur votre serveur pour recevoir la requête. Ce point de terminaison sera également utilisé plus tard pour gérer les cartes qui nécessitent une étape d’authentification supplémentaire.

Créer un nouveau PaymentIntent avec l’ID du PaymentMethod créé côté client. Vous pouvez confirmer le PaymentIntent en définissant la propriété confirm à la valeur true lors de la création du PaymentIntent ou en appelant confirm après sa création. La fonction Séparer l’autorisation et la capture est également prise en charge pour les paiements par carte.

Si le paiement exige des actions supplémentaires, comme l’authentification 3D Secure, l’état du PaymentIntent passera à requires_action. Si le paiement a échoué, l’état repassera à requires_payment_method et vous devrez envoyer un message d’erreur à votre utilisateur. Si le paiement ne nécessite aucune authentification supplémentaire, un débit sera alors créé et l’état du PaymentIntent passera à 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"

Si vous souhaitez enregistrer la carte pour la réutiliser plus tard, créez un objet Customer pour stocker le PaymentMethod, puis transmettez les paramètres supplémentaires suivants lors de la création du PaymentIntent :

• customer. Définissez ce paramètre à l’ID du client.
• setup_future_usage. Définissez ce paramètre à off_session pour indiquer à Stripe que vous prévoyez de réutiliser ce PaymentMethod pour des paiements hors session en l’absence de votre client. La définition de cette propriété permet d’enregistrer le PaymentMethod pour ce client une fois le PaymentIntent confirmé et toutes les actions requises effectuées par l’utilisateur. Pour en savoir plus, consultez l’exemple de code montrant comment enregistrer des cartes après un paiement.

Un paiement normal est réussi une fois que vous l’avez confirmez sur le serveur à l’étape 4. Cependant, certains flux de paiement exigent une autre action de la part du client, telle que l’authentification 3D Secure.

​​Pour les cas nécessitant une action ultérieure, l’état du PaymentIntent est requires_action. Du côté client, transmettez la clé secrète du client du PaymentIntent à handleNextAction. Le gestionnaire natif présente une vue et guide le client tout au long du processus d’authentification. Après avoir traité une action requise du côté client, l’état du PaymentIntent passe à requires_confirmation. Cette étape permet à votre intégration de traiter la commande dans votre application dorsale et de renvoyer le résultat du traitement à votre client.

Envoyez l’identifiant du PaymentIntent à votre programme dorsal et confirmez-le de nouveau dans un délai d’une heure pour finaliser le paiement. Sinon, la tentative de paiement échoue et revient à l’état 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!');
        }
      }
  }
};
// ...

Ce code est exécuté uniquement lorsqu’un paiement nécessite une authentification supplémentaire, comme c’était le cas à l’étape précédente. Le code n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.

À l’aide du même point de terminaison que vous aviez configuré ci-dessus, confirmez le PaymentIntent à nouveau pour finaliser le paiement et traiter la commande. Assurez-vous que cette confirmation se produise dans l’heure suivant la tentative de paiement, sinon le paiement échouera et retournera à requires_payment_method.

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

​​Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test dans un bac à sable. Utilisez-les avec n’importe quel CVC et une date d’expiration non échue.

Pour obtenir la liste complète de nos cartes de test, consultez notre guide sur les tests.