Accepter les paiements par carte sans webhooks

Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints 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

Le SDK React Native est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK Android et iOS natifs. Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets 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 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, wrappez votre écran de paiement avec le composant StripeProvider ou utilisez la méthode d’initialisation initStripe. Seule la clé publiable de l’API dans publishableKey est nécessaire. 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 le 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 en toute sécurité les informations de carte de vos clients. Utilisez le rappel onCardChange pour vérifier les informations non sensibles concernant la carte, telles que la marque, et confirmer que les informations sont complètes.

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 règlement affiche le composant CardField.

Lorsque votre client est prêt à effectuer son règlement, créez un objet PaymentMethod avec les informations recueillies par l’élément 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 endpoint sur votre serveur pour recevoir la requête. Cet endpoint sera également utilisé ultérieurement pour traiter 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 attribuant à la propriété confirm la valeur true lors de la création du PaymentIntent ou appelez confirm après la création. Pour les paiements par carte bancaire, il est également possible de séparer l’autorisation de la capture.

Si le paiement exige des actions supplémentaires comme l’authentification 3D Secure, l’état du PaymentIntent sera défini sur requires_action. Si le paiement a échoué, l’état bascule à nouveau sur requires_payment_method et vous devez envoyer un message d’erreur à votre utilisateur. Si le paiement ne nécessite aucune authentification supplémentaire, un paiement est alors créé et l’état PaymentIntent est défini sur 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 bancaire pour la réutiliser plus tard, créez un objet Customer pour stocker l’objet PaymentMethod, puis transmettez les paramètres supplémentaires suivants lors de la création du PaymentIntent :

• client. Défini sur l’ID du client.
• setup_future_usage. Défini sur 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. Définir 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 bancaires après un paiement.

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

​​Pour les cas nécessitant l’une des actions suivantes, l’état du PaymentIntent est requires_action. Sur le client, transmettez la clé secrète du client du PaymentIntent à handleNextAction. Le gestionnaire natif affiche une vue et guide le client tout au long du flux d’authentification. Après avoir traité une action requise côté client, l’état du PaymentIntent passe à requires_confirmation. Cette étape permet à votre intégration de traiter la commande sur votre back-end et de renvoyer le résultat de l’exécution à votre client.

Envoyez l’identifiant du PaymentIntent à votre back-end 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 lui-même n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.

À l’aide du même endpoint que celui configuré plus tôt, reconfirmez le PaymentIntent pour mener à bien le paiement et traiter la commande. Veillez à ce que cette confirmation survienne dans l’heure qui suit la tentative de paiement. À défaut, le paiement échouera et repassera à l’état 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, veuillez consulter notre guide de test.