Accetta pagamenti con carta senza webhook

Innanzitutto, devi creare un account Stripe. Registrati ora.

Utilizza le nostre librerie per accedere all’API Stripe dalla tua applicazione:

# Available as a gem
sudo gem install stripe

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

Acquisisci i dati della carta sul client con Stripe.js e Stripe Elements. Elements è un insieme di componenti di interfaccia utente preintegrati per ottenere e convalidare il numero della carta, il codice postale e la data di scadenza .

Un componente di Stripe Elements contiene un iframe che invia in modo sicuro a Stripe le informazioni sul pagamento tramite una connessione HTTPS. Affinché l’integrazione funzioni, anche l’indirizzo della pagina di completamento del pagamento deve iniziare con https:// anziché http://.

Puoi eseguire il test dell’integrazione senza utilizzare HTTPS. Abilitalo quando è tutto pronto per accettare i pagamenti in modalità live.

<script src="https://js.stripe.com/basil/stripe.js"></script>

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

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

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

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.

Scrivi codice per gestire situazioni che richiedono l’intervento del cliente. In genere un pagamento va a buon fine dopo essere stato confermato sul server al passaggio 4. Tuttavia, se il PaymentIntent richiede un’azione aggiuntiva da parte del cliente, come l’autenticazione 3D Secure, interviene questo codice.

Utilizza stripe.handleCardAction per attivare l’interfaccia utente che gestisce l’azione del cliente. Se l’autenticazione riesce, lo stato della PaymentIntent è requires_confirmation. Riconferma il PaymentIntent sul server per completare il pagamento.

Durante i test, utilizza un numero di carta di test che richiede l’autenticazione (ad esempio 4000002760003184

) per forzare questo flusso. Se utilizzi una carta che non richiede l’autenticazione (ad esempio 4242424242424242

), questa parte del flusso sarà ignorata e il flusso si concluderà al passaggio 4.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

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.