# Pagamenti con carta senza autorizzazione della banca

Crea un'integrazione più semplice con limitazioni legate all'area geografica.

Questa integrazione è compatibile con le aziende che accettano solo carte statunitensi e canadesi. Inizialmente è più semplice da costruire, ma non permette l’espansione per accettare una base di clienti internazionale.

### Come funziona questa integrazione

In alcune aree geografiche come l’Europa e l’India, le banche richiedono spesso un’autenticazione a due fattori per confermare un acquisto. Se svolgi la tua attività principalmente negli Stati Uniti e in Canada, puoi semplificare la tua integrazione ignorando l’'*autenticazione della carta* (A bank might require the customer to authenticate a card payment before processing. Implementation varies by bank but commonly consists of a customer entering in a security code sent to their phone), raramente richiesta dalle banche in queste aree geografiche.

Quando una banca richiede l’autenticazione, questa integrazione di base genera immediatamente un rifiuto di pagamento (come un rifiuto di una carta) anziché gestire l’autenticazione per completare il pagamento in modo asincrono. Il vantaggio è che la riuscita o il rifiuto del pagamento sono immediati e la conferma del pagamento avviene sul server. In questo modo, puoi gestire immediatamente le azioni post-pagamento senza un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests).

### In che cosa si differenzia dall'integrazione globale

| Funzionalità                                                                             | L’integrazione | Integrazione globale |
| ---------------------------------------------------------------------------------------- | -------------- | -------------------- |
| Modulo di pagamento personalizzato                                                       | ✔              | ✔                    |
| I dati sensibili non transitano sul tuo server                                           | ✔              | ✔                    |
| Funziona per i clienti statunitensi e canadesi                                           | ✔              | ✔                    |
| Rifiuta i pagamenti se i dati della carta non sono corretti o i fondi sono insufficienti | ✔              | ✔                    |
| Rifiuta i pagamenti con richieste di autenticazione bancaria                             | ✔              |                      |
| Funziona per una clientela globale                                                       |                | ✔                    |
| Gestisce automaticamente i pagamenti con carta che richiedono l’autenticazione bancaria  |                | ✔                    |
| Webhook consigliati per le attività post-pagamento                                       |                | ✔                    |
| Si adatta facilmente ad altre modalità di pagamento, come gli addebiti bancari           |                | ✔                    |

Le aziende in crescita o internazionali dovrebbero usare l’[integrazione globale](https://docs.stripe.com/payments/accept-a-payment.md) di Stripe per poter accettare le richieste di autenticazione a due fattori delle banche e consentire ai clienti di utilizzare più metodi di pagamento.
Il flusso di pagamento che stai integrando (See full diagram at https://docs.stripe.com/payments/without-card-authentication)
## Creare un modulo di pagamento [Lato client]

[Elements](https://docs.stripe.com/payments/elements.md), parte di Stripe.js, offre componenti dell’interfaccia integrati per la raccolta dei dati sulla carta dai clienti. Sono in hosting su Stripe e inseriti nel tuo modulo di pagamento come iframe, pertanto i dati della carta del cliente non toccheranno mai il tuo codice.

#### HTML + JS

Innanzitutto, includi lo script [Stripe.js](https://docs.stripe.com/js.md) nell’intestazione di ogni pagina del sito.

```html
<script src="https://js.stripe.com/dahlia/stripe.js"></script>
```

L’inclusione dello script in ogni pagina del sito consente di sfruttare la [funzionalità antifrode avanzata](https://docs.stripe.com/radar.md) di Stripe e di rilevare comportamenti di navigazione anomali.

### Requisiti di sicurezza

Questo script va sempre caricato direttamente da **js.stripe.com** per garantire la [conformità PCI](https://docs.stripe.com/security/guide.md). Non puoi includere lo script in un pacchetto né utilizzarne una copia in self-hosting.

Quando usi Elements, tutti i dati di pagamento vengono inviati tramite una connessione HTTPS sicura.

L’indirizzo della pagina che contiene Elements deve inoltre iniziare con **https://** e non con **http://**. Per ulteriori informazioni sulla ricezione dei certificati SSL e sull’integrazione con il tuo server per attivare una connessione HTTPS sicura, consulta la documentazione sulla [sicurezza](https://docs.stripe.com/security.md).

### Aggiungere Elements alla pagina

Poi, devi creare un account Stripe. [Registrati ora](https://dashboard.stripe.com/register).

Creare elementi DOM (contenitori) vuoti con ID univoci all’interno del modulo di pagamento

```html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>
```

Crea un’istanza dell’[oggetto Stripe](https://docs.stripe.com/js.md#stripe-function), fornendo la tua [chiave API](https://docs.stripe.com/keys.md) pubblicabile come primo parametro. In seguito, crea un’istanza dell’[oggetto Elements](https://docs.stripe.com/js.md#stripe-elements) e usalo per [montare](https://docs.stripe.com/js.md#element-mount) un elemento carta nel contenitore vuoto dell’elemento DOM della pagina.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
```

Usa [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) sul client per acquisire i dati della carta e creare un [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) quando il cliente invia il modulo di pagamento. Invia l’ID del PaymentMethod al tuo server.

```javascript
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};
```

#### React

Innanzitutto, installa [Stripe.js](https://github.com/stripe/stripe-js) e [React Stripe.js](https://docs.stripe.com/sdks/stripejs-react.md).

```bash
npm install --save @stripe/stripe-js @stripe/react-stripe-js
```

> In questa guida si presume che tu abbia già una conoscenza pratica di React e che tu abbia già configurato un progetto React. Se non hai mai utilizzato React, prima di continuare ti consigliamo di leggere la [Guida introduttiva](https://reactjs.org/docs/getting-started.html) a React.
> 
> Se stai cercando un modo rapido per provare React Stripe.js senza dover creare un nuovo progetto, inizia con questa [demo in CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark).

### Requisiti di sicurezza

Quando usi Elements, tutti i dati di pagamento vengono inviati tramite una connessione HTTPS sicura.

L’indirizzo della pagina che contiene Elements deve inoltre iniziare con **https://** e non con **http://**. Per ulteriori informazioni sulla ricezione dei certificati SSL e sull’integrazione con il tuo server per attivare una connessione HTTPS sicura, consulta la documentazione sulla [sicurezza](https://docs.stripe.com/security.md).

### Caricare Stripe.js e aggiungere Elements alla pagina

Per utilizzare Elements, includi la radice dell’app React in un provider [Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Chiama [loadStripe](https://github.com/stripe/stripe-js#loadstripe) con la chiave pubblicabile e passa il valore `Promise` restituito al provider `Elements`.

Importa e chiama `loadStripe` alla radice dell’app React per sfruttare le [funzionalità antifrode avanzate](https://docs.stripe.com/radar.md) di Stripe e avere la possibilità di rilevare comportamenti di navigazione anomali.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Creare un PaymentMethod

Usa `CardElement` e [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) sul client per acquisire i dati della carta e creare un [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) quando il cliente invia il modulo di pagamento. Invia l’ID del PaymentMethod al tuo server.

Per chiamare `stripe.createPaymentMethod` dal componente del modulo di pagamento, usa gli hook [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) e [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Se preferisci componenti di classe tradizionali rispetto agli hook, puoi utilizzare un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

#### Hook

```jsx
import React from 'react';
import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = 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: elements.getElement(CardElement),
      billing_details: {
        // Include any additional collected billing details.
        name: 'Jenny Rosen',
      },
    });

    handlePaymentMethodResult(result);
  };

  const handlePaymentMethodResult = async (result) => {
    if (result.error) {
      // An error happened when collecting card details,
      // show `result.error.message` in the payment form.
    } else {
      // Otherwise send paymentMethod.id to your server (see Step 3)
      const response = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          payment_method_id: result.paymentMethod.id,
        }),
      });

      const serverResponse = await response.json();

      handleServerResponse(serverResponse);
    }
  };

  const handleServerResponse = (serverResponse) => {
    if (serverResponse.error) {
      // An error happened when charging the card,
      // show the error in the payment form.
    } else {
      // Show a success message
    }
  };

  const handleCardChange = (event) => {
    if (event.error) {
      // Show `event.error.message` in the payment form.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement onChange={handleCardChange} />
      <button type="submit" disabled={!stripe}>
        Submit Payment
      </button>
    </form>
  );
}
```

## Configurare Stripe [Lato server]

Utilizza una libreria ufficiale per inviare richieste all’API Stripe dalla tua applicazione:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

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

## Effettuare un pagamento [Lato server]

Configura un endpoint sul tuo server per ricevere la richiesta dal cliente.

Stripe utilizza un oggetto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) per rappresentare la tua intenzione di riscuotere un pagamento da un cliente, monitorando i tentativi di addebito e le modifiche dello stato del pagamento durante tutta la procedura.

Decidi sempre quanto addebitare al cliente sul server, un ambiente affidabile rispetto a quello del client. In questo modo eviti che eventuali malintenzionati possano scegliere un proprio prezzo.

Crea un endpoint HTTP per rispondere alla richiesta AJAX della fase 1. In quell’endpoint, e decidi quanto addebitare al cliente. Per creare un pagamento, crea un PaymentIntent utilizzando l’ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) della fase 1 con il codice seguente:

#### curl

```curl
# Check the status of the PaymentIntent to make sure it succeeded

curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \

# A PaymentIntent can be confirmed some time after creation,
# but here we want to confirm (collect payment) immediately.
  -d confirm=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \

# If the payment requires any follow-up actions from the
# customer, like two-factor authentication, Stripe will error
# and you will need to prompt them for a new payment method.
  -d error_on_requires_action=true
```

> Se imposti [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) su `true` durante la conferma di un pagamento, Stripe genera automaticamente un errore nel pagamento se questo richiede l’autenticazione a due fattori da parte dell’utente.

#### Risposta dell’API Payment Intents

Quando effettui un pagamento con l’API, la risposta include lo stato del PaymentIntent. Se il pagamento è riuscito, lo stato sarà `succeeded`.

```json
{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,"status": "succeeded",
}
```

Se il pagamento viene rifiutato, la risposta include il codice e il messaggio di errore. Ecco un esempio di pagamento non riuscito perché la carta richiedeva l’autenticazione a due fattori.

```json
{
  "error": {"code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}
```

## Testa l'integrazione

Stripe fornisce numerose carte di test che puoi utilizzare in una *sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) per verificare che l’integrazione sia pronta per l’uso. Utilizzale con un CVC, un codice postale e una data di scadenza futura qualsiasi.

| Numero           | Descrizione                                                                                                                            |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242 | La transazione ha esito positivo e il pagamento viene elaborato automaticamente.                                                       |
| 4000000000009995 | Con un codice di rifiuto `insufficient_funds`, la transazione ha sempre esito negativo.                                                |
| 4000002500003155 | Richiede l’autenticazione che in questa integrazione non va a buon fine restituendo il codice di rifiuto `authentication_not_handled`. |

Consulta l’elenco completo delle [carte di test](https://docs.stripe.com/testing.md).

## Aggiornare l'integrazione per gestire l'autenticazione delle carte

L’integrazione dei pagamenti per i pagamenti con carta di base è ora completa. Questa integrazione **rifiuta le carte che richiedono l’autenticazione durante il pagamento**.

Se nella Dashboard inizi a vedere pagamenti contrassegnati come `Failed`, devi [aggiornare la tua integrazione](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). L’integrazione globale di Stripe gestisce questi pagamenti anziché rifiutarli automaticamente.