# Creare una pagina di pagamento personalizzata contenente Link
Integrare Link utilizzando Payment Element o Link Authentication Element
Se la tua piattaforma Connect utilizza [account configurati dal cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilizza la nostra [guida](https://docs.stripe.com/connect/use-accounts-as-customers.md) per sostituire i riferimenti `Customer` ed eventi nel tuo codice con la documentazione di riferimento dell’API Accounts v2 equivalente.
Questa guida spiega come accettare pagamenti con [Link](https://docs.stripe.com/payments/link.md) utilizzando l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) e [Payment Element](https://docs.stripe.com/payments/payment-element.md) o [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md).
Sono disponibili tre modi per proteggere un indirizzo email del cliente per l’autenticazione e la registrazione su :
- **Specifica un indirizzo email:** puoi specificare un indirizzo email per Payment Element utilizzando [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Se raccogli già l’indirizzo email e/o il numero di telefono del cliente nel flusso di pagamento, consigliamo questo approccio.
- **Raccogli un indirizzo email:** puoi raccogliere un indirizzo email direttamente in Payment Element. Se non raccogli l’indirizzo email in nessuna fase del flusso di pagamento, ti consigliamo questo approccio.
- **Link Authentication Element:** puoi utilizzare Link Authentication Element per creare un unico campo di inserimento email sia per la raccolta dell’email che per l’autenticazione Link. Ti consigliamo di farlo se utilizzi [Address Element](https://docs.stripe.com/elements/address-element.md).
Raccogli l’indirizzo email del cliente per l’autenticazione o la registrazione su Link
## Configurare Stripe [Lato server]
Innanzitutto [crea un account Stripe](https://dashboard.stripe.com/register) o [accedi](https://dashboard.stripe.com/login).
Utilizza le nostre librerie ufficiali per accedere 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'
```
## Creare un PaymentIntent [Lato server]
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.
Se raccogli i dati delle carte di credito per un [utilizzo futuro con Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md), elenca manualmente i metodi di pagamento invece di utilizzare quelli dinamici. Per utilizzare Link senza i metodi di pagamento dinamici, aggiorna la tua integrazione in modo da passare `link` a `payment_method_types`.
Quando crei un PaymentIntent, [proponi in modo dinamico ai tuoi clienti i metodi di pagamento più pertinenti](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), tra cui Link, utilizzando i metodi di pagamento dinamici. Per utilizzare i metodi di pagamento dinamici, non includere il parametro `payment_method_types`. Facoltativamente, puoi anche abilitare `automatic_payment_methods`.
> Quando la tua integrazione non imposta il parametro `payment_method_types`, alcuni metodi di pagamento si attivano automaticamente, comprese le carte e i wallet.
Per aggiungere Link alla tua integrazione con Elements utilizzando metodi di pagamento dinamici:
1. Nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods) della tua Dashboard, attiva Link.
1. Se hai un’integrazione esistente che elenca manualmente i metodi di pagamento, rimuovi il parametro [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) dalla tua integrazione.
### Recuperare la chiave privata client
L’oggetto PaymentIntent contiene una *chiave privata client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)), che il lato client usa per completare la procedura di pagamento in modo sicuro. Per specificare la chiave privata sul lato client, puoi utilizzare approcci diversi.
#### Applicazione a pagina singola
Recupera la chiave privata client dall’endpoint sul server utilizzando la funzione `fetch`del browser. Questo approccio è più adatto quando il lato client è un’applicazione con un’unica pagina, in particolare creata con un framework front-end moderno come React. Crea l’endpoint server che invia la chiave privata client:
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the PaymentIntent
{client_secret: intent.client_secret}.to_json
end
```
Quindi recupera la chiave privata client con JavaScript sul lato client:
```javascript
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
```
#### Rendering lato server
Trasmetti la chiave privata client al client dal server. Questo approccio è più adatto se l’applicazione genera contenuti statici sul server prima di inviarli al browser.
Aggiungi la [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) nel modulo di pagamento. Nel codice lato server, recupera la chiave privata client da PaymentIntent:
#### Ruby
```erb
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## Raccoglie l'indirizzo email del cliente
Link autentica un cliente utilizzando il suo indirizzo email. A seconda del tuo flusso di pagamento, hai a disposizione le seguenti opzioni: passare un’email al Payment Element, acquisirla direttamente nel Payment Element oppure utilizzare l’Authentication Element di Link. Tra queste, Stripe consiglia di passare l’indirizzo email del cliente al Payment Element, se disponibile.
#### Specificare un indirizzo email
Se ti trovi in una *qualsiasi* delle situazioni descritte di seguito:
- Conosci l’indirizzo email del cliente prima che arrivi alla pagina di pagamento, ad esempio tramite un profilo del cliente.
- Non devi raccogliere l’indirizzo di spedizione del cliente.
- Preferisci utilizzare il campo di inserimento dell’indirizzo email che inserisci prima del modulo di pagamento.
Quindi, integra Link passando l’email del cliente al Payment Element, creando una procedura di pagamento più rapida attivando il flusso di autenticazione di Link non appena il cliente raggiunge la fase di pagamento. Questa opzione integra un solo elemento: il Payment Element.
Link compila automaticamente l’email acquisita nel modulo di checkout per velocizzare la procedura di pagamento.
Link mostra una richiesta di autenticazione per un cliente esistente.
In questo flusso, gestisci l’acquisizione dell’email in un tuo campo del modulo *before* che il cliente arrivi alla fase di pagamento, quindi passi l’email al Payment Element. Il Payment Element autentica il cliente durante la fase di pagamento e mostra i dati di pagamento salvati nel suo account Link, oppure mostra il modulo di creazione dell’account Link dopo l’inserimento dei dati della carta. Ecco come si presenta:
Integrare Link utilizzando Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Questa opzione di integrazione non acquisisce l’indirizzo di spedizione del cliente. Se devi acquisire un indirizzo di spedizione, integra Link utilizzando l’Authentication Element, l’Address Element e il Payment Element di Link.
#### Raccogliere un indirizzo email
L’autenticazione di in Payment Element consente ai clienti di inserire un indirizzo email direttamente in Payment Element senza ulteriori interventi di integrazione.
In questo flusso, il cliente inserisce il proprio indirizzo email e si autentica o si registra con Link direttamente nel Payment Element durante la procedura di pagamento. Se un cliente non ha ancora effettuato la registrazione a Link e sceglie un metodo di pagamento supportato nel Payment Element, gli viene richiesto di salvare i propri dati utilizzando Link. Per chi ha già effettuato la registrazione Link compila automaticamente le informazioni di pagamento.
#### Usare Link Authentication Element
Se ti trovi in una *qualsiasi* delle situazioni descritte di seguito:
- Serve un unico componente ottimizzato per l’acquisizione dell’email e l’autenticazione con Link.
- Devi raccogliere un indirizzo di spedizione del cliente.
Quindi utilizza il flusso di integrazione che implementa questi elementi: l’Authentication Element di Link, il Payment Element e, facoltativamente, l’Address Element.
Una pagina di checkout con Link abilitato ha l’Authentication Element di Link all’inizio, seguito dall’Address Element e dal Payment Element alla fine. Puoi anche mostrare l’Authentication Element di Link su pagine separate, nello stesso ordine, per flussi di pagamento su più pagine.
Creare un modulo di pagamento utilizzando più Element
L’integrazione funziona nel modo seguente:
Diagramma che descrive come integrare Link utilizzando Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Configura il modulo di pagamento [Lato client]
Ora puoi configurare il tuo modulo di pagamento personalizzato con i componenti dell’interfaccia utente preintegrati di Elements. Affinché l’integrazione funzioni, l’indirizzo della pagina di pagamento deve iniziare con `https://` anziché con `http://` Puoi eseguire il test dell’integrazione senza utilizzare HTTPS. [Abilita HTTPS](https://docs.stripe.com/security/guide.md#tls) quando sarà tutto pronto per accettare i pagamenti in modalità live.
#### Specificare un indirizzo email
Payment Element visualizza un modulo di contatto del cliente precompilato che include il numero di telefono e l’indirizzo email. Visualizza anche un modulo dinamico che consente al cliente di scegliere un tipo di metodo di pagamento. Questo modulo raccoglie automaticamente tutti i dati di pagamento necessari per il tipo di metodo di pagamento selezionato dal cliente.
Inoltre, Payment Element gestisce la visualizzazione dei metodi di pagamento salvati da Link per i clienti autenticati.
#### React
### Configurare Stripe Elements
Installa [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e il [caricatore Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dal registro di sistema pubblico npm:
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Creare il modulo di pagamento
Nella pagina di pagamento, includi il modulo di pagamento con il componente `Elements`, specificando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Se disponi di altre informazioni sui clienti, inseriscile nell’oggetto `defaultValues.billingDetails` dell’elemento `PaymentElement`. Precompilare il maggior numero possibile di informazioni semplifica la creazione e il riutilizzo dell’account Link per i tuoi clienti. Puoi anche passare l’[oggetto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizzando Elements in modo che si adatti al design del tuo sito.
Quindi, inserisci l’elemento `PaymentElement` nel tuo modulo di pagamento. Ti consigliamo di inserire almeno l’indirizzo email del cliente in [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) per precompilare i dati relativi a Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurare Stripe Elements
Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo al tag `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per garantire la conformità alle norme PCI. Non includere lo script in un pacchetto o non utilizzarne una copia in self-hosting.
```html
Checkout
```
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:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Aggiungi Elements alla tua pagina di pagamento
Nella pagina di pagamento, crea dei nodi DOM vuoti con ID univoci affinché Elements possa mostrare le seguenti informazioni:
```html
```
Dopo il caricamento del modulo appena configurato, crea un nuovo gruppo Elements, specificando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Puoi anche specificare l’[oggetto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizzando i componenti Elements in modo che si adattino al design del tuo sito.
Se disponi di altre informazioni sul cliente, specificale nell’oggetto `defaultValues.billingDetails` di `PaymentElement`. La precompilazione di quante più informazioni possibili semplifica la creazione e il riutilizzo dell’account Link per i tuoi clienti.
Infine, crea un’istanza per ciascun componente di Element e integrala nel nodo DOM corrispondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Raccogliere un indirizzo email
Payment Element visualizza un modulo di contatto del cliente precompilato che include il numero di telefono e l’indirizzo email. Visualizza anche un modulo dinamico che consente al cliente di scegliere un tipo di metodo di pagamento. Questo modulo raccoglie automaticamente tutti i dati di pagamento necessari per il tipo di metodo di pagamento selezionato dal cliente.
Inoltre, Payment Element gestisce la visualizzazione dei metodi di pagamento salvati da Link per i clienti autenticati. Per questa integrazione, è necessario lasciare attivo Link nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Configurare Stripe Elements
Installa [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e il [caricatore Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dal registro di sistema pubblico npm:
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Creare il modulo di pagamento
Nella pagina di pagamento, includi il modulo di pagamento con il componente `Elements`, specificando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Se disponi di altre informazioni sui clienti, inseriscile nell’oggetto `defaultValues.billingDetails` dell’elemento `PaymentElement`. Precompilare il maggior numero possibile di informazioni semplifica la creazione e il riutilizzo dell’account Link per i tuoi clienti. Puoi anche passare l’[oggetto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizzando Elements in modo che si adatti al design del tuo sito.
Quindi, inserisci l’elemento `PaymentElement` nel tuo modulo di pagamento. Ti consigliamo di inserire almeno l’indirizzo email del cliente in [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) per precompilare i dati relativi a Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurare Stripe Elements
Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo al tag `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per garantire la conformità alle norme PCI. Non includere lo script in un pacchetto o non utilizzarne una copia in self-hosting.
```html
Checkout
```
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:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Aggiungi Elements alla tua pagina di pagamento
Nella pagina di pagamento, crea dei nodi DOM vuoti con ID univoci affinché Elements possa mostrare le seguenti informazioni:
```html
```
Dopo il caricamento del modulo appena configurato, crea un nuovo gruppo Elements, specificando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Puoi anche specificare l’[oggetto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizzando i componenti Elements in modo che si adattino al design del tuo sito.
Se disponi di altre informazioni sul cliente, specificale nell’oggetto `defaultValues.billingDetails` di `PaymentElement`. La precompilazione di quante più informazioni possibili semplifica la creazione e il riutilizzo dell’account Link per i tuoi clienti.
Infine, crea un’istanza per ciascun componente di Element e integrala nel nodo DOM corrispondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Usare Link Authentication Element
Link Authentication Element visualizza un campo di inserimento dell’indirizzo email. Quando Link associa l’indirizzo email di un cliente a un account Link esistente, invia al cliente un codice sicuro monouso sul suo telefono per l’autenticazione. Se l’autenticazione va a buon fine, Stripe visualizza automaticamente gli indirizzi e i metodi di pagamento salvati su Link affinché il cliente possa utilizzarli.
Questa integrazione crea anche il Payment Element, che genera un modulo dinamico che consente al cliente di selezionare un tipo di metodo di pagamento. Il modulo raccoglie automaticamente tutti i dati di pagamento necessari per il tipo di metodo di pagamento selezionato dal cliente. L’elemento di pagamento gestisce inoltre la visualizzazione dei metodi di pagamento salvati da Link per i clienti autenticati.
#### React
### Configurare Stripe Elements
Installa [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e il [caricatore Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dal registro di sistema pubblico npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
Nella pagina di pagamento, includi il modulo di pagamento con il componente `Elements`, specificando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dal [passaggio precedente](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Se raccogli l’indirizzo email del cliente già in un’altra parte del modulo, sostituisci il campo di inserimento dell’email esistente con `linkAuthenticationElement`.
Se non raccogli gli indirizzi email, aggiungi `linkAuthenticationElement` al tuo flusso di checkout. Devi posizionare `linkAuthenticationElement` prima di `ShippingAddressElement` (facoltativo se raccogli gli indirizzi di spedizione) e `PaymentElement` affinché Link compili automaticamente i dettagli salvati da Link per il tuo cliente in `ShippingAddressElement` e `PaymentElement`. Puoi anche specificare [l’opzione relativa all’aspetto](https://docs.stripe.com/elements/appearance-api.md), personalizzando Elements in modo che si adattino al design del tuo sito.
Se disponi dell’indirizzo email del cliente, specificalo nell’opzione `defaultValues` di `linkAuthenticationElement`. In questo modo, il campo relativo all’indirizzo email viene precompilato e il processo di autenticazione di viene avviato.
Se disponi di altre informazioni sul cliente, specificale nell’oggetto `defaultValues.billingDetails` per `PaymentElement`. La precompilazione di quante più informazioni possibili semplifica la creazione e il riutilizzo dell’account Link per i tuoi clienti.
Poi visualizza i componenti `linkAuthenticationElement` e `PaymentElement` nel tuo modulo di pagamento.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Non è necessario che `linkAuthenticationElement`, `PaymentElement`, e `ShippingAddressElement` siano sulla stessa pagina. Se disponi di un processo in cui le informazioni di contatto del cliente, le informazioni di spedizione e i dettagli di pagamento vengono mostrati al cliente in fasi separate durante il pagamento, puoi visualizzare ciascun Element nella fase o nella pagina appropriate. Includi `linkAuthenticationElement` come modulo di inserimento dell’indirizzo email nella fase di raccolta delle informazioni di contatto per assicurarti che il cliente possa sfruttare appieno la funzionalità di compilazione automatica fornita da Link.
Se raccogli l’indirizzo email del cliente tramite Link Authentication nelle prime fasi del flusso di checkout, non è necessario mostrarlo nuovamente nelle pagine relative alla spedizione o al pagamento.
### Recuperare un indirizzo email
Puoi recuperare i dati dell’indirizzo email utilizzando la proprietà `onChange` nel componente `linkAuthenticationElement`. Il gestore `onChange` si attiva ogni volta che l’utente aggiorna il campo dell’indirizzo email o quando un indirizzo email del cliente salvato viene compilato automaticamente.
```jsx
{
setEmail(event.value.email);
}} />
```
### Precompilare un indirizzo email del cliente
Link Authentication Element accetta un indirizzo email. Se specifichi l’indirizzo email del cliente, viene attivato il flusso di autenticazione Link non appena il cliente arriva alla pagina di pagamento utilizzando l’opzione `defaultValues`.
```jsx
```
#### HTML + JS
### Configurare Stripe Elements
Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo al tag `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per garantire la conformità alle norme PCI. Non includere lo script in un pacchetto o non utilizzarne una copia in self-hosting.
```html
Checkout
```
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:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Aggiungi Link Elements alla tua pagina di pagamento
Nella pagina di pagamento, crea nodi DOM vuoti con ID univoci affinché Elements possa mostrare le seguenti informazioni:
```html
```
Quando il modulo che hai appena configurato si carica, crea un nuovo gruppo Elements, passando la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Se l’indirizzo email del cliente è già stato acquisito nel modulo di pagamento, sostituisci l’input esistente con `linkAuthenticationElement`.
Se non raccogli l’indirizzo email, aggiungi `linkAuthenticationElement` al flusso di checkout prima di `shippingAddress` (facoltativo se raccogli gli indirizzi di spedizione). Aggiungi `PaymentElement` per Link per compilare automaticamente i dati salvati per Link del cliente nei campi `shippingAddress` e `PaymentElement`. Puoi anche passare l’[oggetto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), personalizzando Elements in modo che si adatti al design del tuo sito.
Se disponi dell’indirizzo email del cliente, inseriscilo nell’opzione `defaultValues` di `linkAuthenticationElement`. In questo modo, l’indirizzo e-mail verrà precompilato e verrà avviata la procedura di autenticazione Link. Se disponi di altre informazioni sul cliente, inseriscile nell’oggetto `defaultValues.billingDetails` di `PaymentElement`. Precompilare il maggior numero possibile di informazioni semplifica la creazione dell’account Link e ne facilita il riutilizzo da parte dei tuoi clienti.
Infine, crea un’istanza per ciascun componente di Element e integrala nel nodo DOM corrispondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
`linkAuthenticationElement` mostra un indirizzo email. Quando Link trova una corrispondenza tra l’indirizzo email di un cliente e un account Link esistente, invia un codice monouso sicuro al numero di telefono del cliente affinché possa effettuare l’autenticazione. Se il cliente si autentica correttamente, Stripe visualizza automaticamente gli indirizzi e i metodi di pagamento salvati su Link, in modo che il cliente possa utilizzarli.
Il componente `PaymentElement` mostra un modulo dinamico che consente al cliente di scegliere un tipo di metodo di pagamento. Il modulo acquisisce automaticamente tutti i dati di pagamento necessari per il tipo di metodo di pagamento scelto dal cliente. `PaymentElement` gestisce inoltre la visualizzazione dei metodi di pagamento salvati su per i clienti autenticati.
Non è necessario che Link Authentication, Payment e Shipping Address Elements siano sulla stessa pagina. Se disponi di un processo in cui le informazioni di contatto del cliente, i dati di spedizione e i dettagli di pagamento vengono mostrati al cliente in fasi separate durante il pagamento, puoi visualizzare ciascun Element nella fase o nella pagina appropriate. Includi Link Authentication Element come modulo di inserimento dell’indirizzo email nella fase di raccolta delle informazioni di contatto per assicurarti che il cliente possa sfruttare appieno la funzionalità di compilazione automatica fornita da Link.
Se raccogli l’indirizzo email del cliente tramite Link Authentication nelle prime fasi del flusso di checkout, non è necessario mostrarlo nuovamente nelle pagine relative alla spedizione o al pagamento.
### Recuperare l’indirizzo email
Puoi recuperare i dati dell’indirizzo email utilizzando la proprietà `onChange` nel componente `linkAuthenticationElement`. Il gestore `onChange` si attiva ogni volta che l’utente aggiorna il campo dell’indirizzo email o quando un indirizzo email del cliente salvato viene compilato automaticamente.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Precompilare un indirizzo email del cliente
Link Authentication Element accetta un indirizzo email. Se specifichi l’indirizzo email del cliente, il flusso di autenticazione Link viene avviato non appena il cliente arriva alla pagina di pagamento utilizzando l’opzione `defaultValues`.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
```
## Optional: Precompilare altri dati del cliente [Lato client]
Se disponibile, la precompilazione delle informazioni del cliente semplifica ulteriormente la procedura di pagamento e riduce l’inserimento manuale dei dati.
#### Specificare un indirizzo email
Payment Element accetta un oggetto `defaultValues.billingDetails` che consente di precompilare il nome e il numero di telefono del cliente, nonché il suo indirizzo email e l’indirizzo di spedizione. Precompilando il maggior numero possibile di informazioni relative al cliente, semplifichi la creazione e il riutilizzo dell’account Link.
Precompila l’indirizzo email, il numero di telefono e il nome del cliente per semplificare il processo di registrazione di
Puoi specificare i seguenti valori per l’oggetto `defaultValues.billingDetails`:
| Valore | Obbligatorio | Formato |
| --------- | ------------ | -------------------------------------------------------------------------------- |
| `email` | Obbligatorio | stringa |
| `name` | Facoltativo | stringa |
| `phone` | Facoltativo | stringa |
| `address` | Facoltativo | Oggetto JSON con i campi `postal_code` e `country`. Tutti i campi sono stringhe. |
Il modo in cui specifichi `defaultValues.billingDetails` in Payment Element varia a seconda che le informazioni vengano raccolte in una pagina separata prima di Payment Element o nella stessa pagina.
#### Prima di Payment Element
Se raccogli le informazioni su una pagina separata prima di Payment Element, puoi precompilare i valori specificando `defaultValues.billingDetails` quando crei il Payment Element:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Stessa pagina di Payment Element
Se raccogli le informazioni sulla stessa pagina di Payment Element, puoi precompilare i valori aggiornando Payment Element con `defaultValues.billingDetails`.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Specificare un indirizzo email in Link Authentication Element
If you’re using the Link Authentication Element, add the `defaultValues.billingDetails` object to the Payment Element to prefill a customer’s name and phone number as well as their shipping addresses. By prefilling as much of your customer’s information as possible, you simplify Link account creation and reuse.
Prefill your customer’s email address, phone number, and name to simplify the Link sign-up process
Puoi specificare i seguenti valori per l’oggetto `defaultValues.billingDetails`:
| Valore | Obbligatorio | Formato |
| --------- | ------------ | -------------------------------------------------------------------------------- |
| `name` | Facoltativo | stringa |
| `phone` | Facoltativo | stringa |
| `address` | Facoltativo | Oggetto JSON con i campi `postal_code` e `country`. Tutti i campi sono stringhe. |
Un Payment Element con tutti i valori precompilati è simile agli esempi seguenti:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Raccogliere indirizzi di spedizione [Lato client]
#### Specificare un indirizzo email
Questa opzione di integrazione non raccoglie l’indirizzo di spedizione del cliente. Se hai bisogno di raccogliere un indirizzo di spedizione, integra Link utilizzando Link Authentication Element, Address Element, and Payment Element nei passaggi previsti in [Utilizza Link Authentication Element](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Utilizzare Link Authentication Element
#### React
Per raccogliere gli indirizzi, crea un nodo DOM vuoto in cui visualizzare [Address Element](https://docs.stripe.com/elements/address-element.md). Address Element deve essere visualizzato dopo Link Authentication Element affinché Link possa compilare automaticamente i dati dell’indirizzo salvati del cliente:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Visualizza `AddressElement` prima di `PaymentElement`. Il componente `PaymentElement` rileva dinamicamente i dati dell’indirizzo acquisiti da `AddressElement`, nascondendo i campi superflui e acquisendo eventuali altri dati sull’indirizzo di fatturazione.
### Recuperare i dati relativi all’indirizzo
`AddressElement` specifica automaticamente l’indirizzo di spedizione quando un cliente invia il pagamento, ma puoi anche recuperare l’indirizzo nel front-end utilizzando la proprietà `onChange`. Il gestore `onChange` invia un evento ogni volta che l’utente aggiorna un campo in Address Element o seleziona gli indirizzi salvati:
```jsx
{
setAddressState(event.value);
}} />
```
### Inserisci automaticamente un indirizzo di spedizione
Utilizza [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) per precompilare le informazioni sull’indirizzo, accelerando la procedura di pagamento per i clienti.
```jsx
```
#### HTML + JS
[Address Element](https://docs.stripe.com/elements/address-element.md) consente di raccogliere gli indirizzi di spedizione o di addebito. Crea un nodo DOM vuoto per Address Element. Visualizzalo dopo Link Authentication Element:
```html
```
Quindi crea un’istanza di Address Element e integrala nel nodo DOM:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Visualizza Address Element prima di Payment Element. Il componente Payment Element rileva dinamicamente i dati dell’indirizzo acquisiti da Address Element, nascondendo i campi superflui e acquisendo eventuali altri dati sull’indirizzo di fatturazione.
### Recuperare i dati relativi all’indirizzo
Address Element specifica automaticamente l’indirizzo di spedizione quando un cliente invia il pagamento, ma puoi anche recuperare l’indirizzo nel front-end utilizzando l’evento `change`, il quale viene inviato ogni volta che l’utente aggiorna un campo in Address Element o dopo aver selezionato gli indirizzi salvati:
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Inserisci automaticamente un indirizzo di spedizione
Utilizza [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) per precompilare le informazioni sull’indirizzo, accelerando la procedura di pagamento per i clienti.
```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
mode: 'shipping',
defaultValues: {
name: 'Jane Doe',
address: {
line1: '354 Oyster Point Blvd',
line2: '',
city: 'South San Francisco',
state: 'CA',
postal_code: '94080',
country: 'US',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Personalizza l'aspetto [Lato client]
Dopo aver aggiunto questi componenti Elements alla tua pagina, puoi personalizzarne l’[aspetto](https://docs.stripe.com/elements/appearance-api.md#theme) per adattarli al resto del design:
Personalizzare l’aspetto di Elements
## Inviare il pagamento a Stripe [Lato client]
Utilizza [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) per completare il pagamento con i dati raccolti dal cliente nei diversi moduli Elements. Fornisci un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a questa funzione per indicare dove Stripe reindirizza l’utente dopo il completamento del pagamento.
L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, prima che Stripe lo reindirizzi al `return_url`.
Per impostazione predefinita, i pagamenti con carta e bancari vengono reindirizzati immediatamente al `return_url` quando il pagamento va a buon fine. Se vuoi impedire il reindirizzamento a `return_url`, puoi utilizzare [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) per modificare il comportamento.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(error.message);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
Il `return_url` corrisponde a una pagina del tuo sito web che fornisce lo [stato del pagamento](https://docs.stripe.com/payments/payment-intents/verifying-status.md) del `PaymentIntent` quando visualizzi la pagina di ritorno. Quando Stripe reindirizza il cliente al `return_url`, puoi utilizzare i seguenti parametri di ricerca dell’URL per verificare lo stato del pagamento. Puoi anche aggiungere i tuoi parametri di ricerca quando specifichi il `return_url`. Questi parametri di query vengono conservati durante la procedura di reindirizzamento.
| Parametro | Descrizione |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | Identificativo univoco per il `PaymentIntent` |
| `payment_intent_client_secret` | La [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dell’oggetto `PaymentIntent`. |
## Optional: Separare l'autorizzazione dall'acquisizione [Lato server]
Link supporta l’[autorizzazione e l’addebito separati](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). È necessario addebitare un pagamento autorizzato tramite Link entro 7 giorni dall’autorizzazione. In caso contrario, l’autorizzazione verrà automaticamente annullata e non sarà più possibile addebitare tale pagamento.
### Indicare a Stripe di eseguire solo l’autorizzazione
Per indicare che vuoi separare l’autorizzazione dall’acquisizione, imposta [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) su `manual` quando crei il PaymentIntent. Il parametro indica a Stripe di limitarsi ad autorizzare l’importo sul metodo di pagamento del cliente.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Acquisire i fondi
Dopo l’avvenuta autorizzazione, lo [stato](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) PaymentIntent diventa `requires_capture`. Per acquisire i fondi autorizzati, effettua una richiesta di [acquisizione](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. L’importo totale autorizzato viene acquisito per impostazione predefinita. Non puoi acquisire un importo superiore, ma puoi acquisire un importo inferiore.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Facoltativo) Annullare l’autorizzazione
Per annullare un’autorizzazione, puoi [annullare il PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).
## Gestire gli eventi successivi al pagamento [Lato server]
Stripe invia un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) quando il pagamento viene completato. [Utilizza un webhook per ricevere questi eventi](https://docs.stripe.com/webhooks/quickstart.md) ed eseguire azioni come l’invio della conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione.
Configura la tua integrazione in modo che ascolti questi eventi anziché attendere un callback dal client. Quando attendi un callback dal client, il cliente può chiudere la finestra del browser o uscire dall’app prima dell’esecuzione del callback. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare [diversi tipi di metodi di pagamento](https://stripe.com/payments/payment-methods-guide) con una sola integrazione.
Oltre a gestire l’evento `payment_intent.succeeded`, puoi gestire anche altri due eventi importanti quando riscuoti pagamenti con Payment Element:
| Evento | Descrizione | Azione |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Inviato da Stripe quando un cliente ha completato un pagamento con esito positivo. | Invia al cliente la conferma di un ordine ed *evade* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) l’ordine. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Inviato da Stripe quando il cliente ha tentato un pagamento che non è andato a buon fine. | Se un pagamento è passato da `processing` a `payment_failed`, offri al cliente un altro tentativo di pagamento. |
## Testa l'integrazione
> Non memorizzare dati di utenti reali negli account *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) . Tratta questi dati come se fossero pubblicamente disponibili, perché questi account di test sono associati alla tua chiave pubblicabile.
Attualmente, Link funziona solo con carte di credito, carte di debito e conti bancari qualificati negli Stati Uniti. Link richiede la [registrazione del dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Puoi creare account sandbox per Link utilizzando qualsiasi indirizzo email valido. La tabella seguente mostra i valori fissi del passcode monouso che Stripe accetta per l’autenticazione degli account sandbox:
| Valore | Risultato |
| ------------------------------------------------------ | -------------------------------------------- |
| Sei cifre qualsiasi tra quelle non elencate di seguito | Operazione riuscita |
| 000001 | Errore, codice non valido |
| 000002 | Errore, codice scaduto |
| 000003 | Errore, numero massimo di tentativi superato |
Per testare metodi di pagamento specifici, consulta gli [esempi di test di Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Più fonti di finanziamento
Quando Stripe fornisce fonti di finanziamento aggiuntive, non è necessario aggiornare l’integrazione. Stripe le supporta automaticamente con le stesse tempistiche di regolamento delle transazioni e le stesse garanzie dei pagamenti con carta e conto corrente.
### Autenticazione delle carte e 3D Secure
Link supporta l’autenticazione *3D Secure 2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) per i pagamenti con carta. 3DS2 richiede ai clienti di completare un passaggio di verifica aggiuntivo con la società emittente della carta quando effettuano un pagamento. I pagamenti che sono stati autenticati con successo utilizzando 3D Secure sono coperti da un *trasferimento di responsabilità* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).
Per avviare le procedure di autenticazione 3DS2 con Link in un ambiente sandbox, utilizza la seguente carta di test con un codice CVC, un codice postale e una data di scadenza futura a tua scelta: 4000000000003220.
In una sandbox, la procedura di autenticazione mostra una pagina di autenticazione simulata. In tale pagina puoi autorizzare o annullare il pagamento. L’autorizzazione del pagamento simula la riuscita dell’autenticazione e ti reindirizza all’URL di reindirizzamento specificato. Se fai clic sul pulsante **Operazione non riuscita** viene simulato un tentativo di autenticazione non andato a buon fine.
Per ulteriori informazioni, consulta la [pagina sull’autenticazione 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Durante il test dei flussi 3DS, solo le carte di test per 3DS2 attiveranno l’autenticazione su .
## Optional: Visualizzare i dati salvati del cliente [Lato server] [Lato client]
Se la tua piattaforma Connect utilizza [account configurati dal cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilizza la nostra [guida](https://docs.stripe.com/connect/use-accounts-as-customers.md) per sostituire i riferimenti `Customer` ed eventi nel tuo codice con la documentazione di riferimento dell’API Accounts v2 equivalente.
Oltre a visualizzare i tuoi indirizzi e metodi di pagamento salvati per un cliente, puoi visualizzare i dati salvati tramite .
Se un cliente ha più di un metodo di pagamento salvato, Stripe mostra le tre carte usate più di recente salvate nell’oggetto *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments), oltre a tutti i metodi di pagamento che il cliente ha salvato con Link.
A tal fine, crea una chiave temporanea e inviala al tuo front-end insieme all’ID *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Le informazioni relative all’oggetto `customer` sono sensibili: non puoi recuperarle direttamente all’interno di Stripe.js. Una chiave temporanea consente di accedere temporaneamente ai dati `customer`.
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-03-25.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
Sul lato client, recupera `customerOptions` con `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Poi specifica i valori `customerOptions.ephemeralKey` e `customerOptions.customer` per l’opzione `customerOptions` nel [gruppo Elements](https://docs.stripe.com/js/elements_object/create). Devi anche specificare il flag beta `elements_customers_beta_1` durante il caricamento dell’istanza Stripe.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-03-25.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Salvare i metodi di pagamento di Link [Lato server] [Lato client]
Puoi salvare i metodi di pagamento di Link per futuri pagamenti *fuori sessione* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) o abbonamenti *abbonamenti* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis), ma non per futuri *pagamenti all’interno della sessione* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Per farlo, devi associarlo a un *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea un oggetto `customer` quando il tuo cliente crea un account presso la tua attività. Quindi, specifica `customer` durante la creazione del tuo PaymentIntent.
Quando un nuovo cliente effettua la sua prima transazione con la tua attività, crea un oggetto `customer` in Stripe per memorizzare i suoi dati per uso futuro.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
Nell’ultima versione dell’API, specificare il parametro `automatic_payment_methods` è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita.
Quando è tutto pronto per effettuare un nuovo addebito al cliente, usa l’oggetto `customer` e l’ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) corrispondente per creare un nuovo PaymentIntent. Imposta [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) su `true`. Di conseguenza il PaymentIntent invia un errore se è richiesta l’autenticazione quando il cliente non utilizza attivamente il tuo sito o la tua app.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## Comunicare ai clienti l’utilizzo di Stripe
Stripe raccoglie informazioni sulle interazioni dei clienti con Elements per fornirti servizi, prevenire le frodi e migliorare i propri servizi. Ad esempio, utilizza cookie e indirizzi IP per identificare quali Elements sono stati visualizzati da un cliente durante una singola sessione di pagamento. Sei responsabile della comunicazione e della raccolta di tutti i diritti e i consensi necessari affinché Stripe utilizzi i dati in questi modi. Per ulteriori informazioni, visita il nostro [Centro privacy](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
## See also
- [Che cos’è ](https://docs.stripe.com/payments/link.md)
- [ con Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [ in Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Esplora Authentication Element](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [ in diverse integrazioni di pagamento](https://docs.stripe.com/payments/link/link-payment-integrations.md)