Accetta pagamenti con carta senza webhook

Lato server

Per questa integrazione sono necessari endpoint sul server che parlano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server:

# Available as a gem
sudo gem install stripe

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

Lato client

L’SDK React Native è open source e completamente documentato. Internamente, utilizza SDK iOS nativi e Android. Per installare l’SDK React Native di Stripe, esegui uno dei seguenti comandi nella directory del progetto (a seconda del gestore di pacchetti utilizzato):

yarn add @stripe/stripe-react-native

Poi, installa alcune altre dipendenze necessarie:

• Per iOS, vai alla directory ios ed esegui pod install per garantire che vengano installate anche le dipendenze native necessarie.
• Per Android, non ci sono più dipendenze da installare.

Inizializzazione di Stripe

Per inizializzare Stripe nell’app React Native, esegui il wrapping della schermata di pagamento con il componente StripeProvider oppure utilizza il metodo di inizializzazione initStripe. È richiesta solo la chiave pubblicabile dell’API in publishableKey. L’esempio seguente spiega come inizializzare Stripe utilizzando il componente 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>
  );
}

Acquisisci i dati della carta di credito in modo sicuro sul client con CardField, un componente integrabile dell’interfaccia utente fornito dall’SDK che acquisisce il numero di carta, la data di scadenza, il CVC e il codice postale.

Aggiungi il componente CardField alla schermata di pagamento per acquisire in modo sicuro i dati della carta dai clienti. Usa la chiamata di ritorno onCardChange per ispezionare i dati non sensibili della carta, come il circuito, e verificare se i dati sono completi.

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

Esegui la tua app e verifica che nella pagina di completamento del pagamento sia presente il componente CardField.

Quando il cliente è pronto per completare la transazione, crea un PaymentMethod con i dati acquisiti dal componente 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,
      }
    });
  };
  // ...
}

Se il PaymentMethod è stato creato correttamente, invia il suo ID al tuo server.

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

Configura un endpoint sul tuo server per ricevere la richiesta. Questo endpoint verrà utilizzato anche successivamente per gestire le carte che richiedono un’ulteriore fase di autenticazione.

Crea un nuovo PaymentIntent con l’ID del PaymentMethod creato sul client. Per confermare il PaymentIntent, imposta la proprietà confirm su true al momento della creazione del PaymentIntent o chiama confirm dopo la creazione. Per i pagamenti con carta è ammesso anche separare l’autorizzazione dall’acquisizione.

Se il pagamento richiede operazioni supplementari, come l’autenticazione 3D Secure, lo stato del PaymentIntent sarà impostato su requires_action. Se il pagamento non è riuscito, lo stato torna a requires_payment_method e devi inviare un messaggio di errore all’utente. Se il pagamento non richiede una fase di autenticazione supplementare, viene creato un addebito e lo stato del PaymentIntent è impostato su 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"

Se vuoi salvare la carta per riutilizzarla in seguito, crea un oggetto Customer per memorizzare il PaymentMethod e specifica i seguenti parametri supplementari quando crei il PaymentIntent:

• customer. Impostato sull’ID del cliente.
• setup_future_usage. Impostato su off_session per indicare a Stripe che prevedi di riutilizzare questo PaymentMethod per pagamenti all’esterno della sessione in assenza del cliente. L’impostazione di questa proprietà consente di salvare il PaymentMethod nell’oggetto Customer una volta che il PaymentIntent è stato confermato e che tutte le azioni richieste sono state eseguite dall’utente. Per ulteriori informazioni, consulta l’esempio di codice relativo al salvataggio delle carte dopo un pagamento.

Un normale pagamento va a buon fine dopo essere stato confermato sul server al passaggio 4. Tuttavia, alcuni flussi di pagamento richiedono un’azione supplementare da parte del cliente, ad esempio l’autenticazione 3D Secure.

​​Per i casi che richiedono azioni successive, lo stato del PaymentIntent è requires_action. Sul client, imposta la chiave privata client del PaymentIntent su handleNextAction. Il gestore nativo presenta una vista e guida il cliente nel flusso di autenticazione. Dopo aver gestito le azioni richieste sul client, lo stato del PaymentIntent passa a requires_confirmation. Ciò consente all’integrazione di evadere l’ordine sul tuo back-end e restituire il risultato dell’evasione al tuo client.

Invia l’ID del PaymentIntent al tuo back-end e riconfermalo entro un’ora per finalizzare il pagamento. In caso contrario, il tentativo di pagamento non riesce e torna allo stato 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!');
        }
      }
  }
};
// ...

Questo codice viene eseguito solo quando un pagamento richiede un’ulteriore autenticazione, come al passaggio precedente. Il codice non è facoltativo, perché qualsiasi pagamento potrebbe richiedere questo ulteriore passaggio.

Utilizzando lo stesso endpoint configurato in precedenza, riconferma il PaymentIntent per finalizzare il pagamento ed evadere l’ordine. Accertati che tale conferma avvenga entro un’ora dal tentativo di pagamento. In caso contrario, il pagamento non riuscirà e tornerà allo stato requires_payment_method.

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

​​Sono disponibili diverse carte di test che puoi utilizzare in una sandbox per verificare che l’integrazione sia pronta per l’uso. Usale con un CVC qualsiasi e una data di scadenza futura.

Per un elenco completo delle carte di test, consulta la nostra guida al testing.