# Accettare un pagamento Accettare pagamenti online in modo sicuro ## Start here: Install agent skills Stripe recommends using official skills to integrate with the API using best practices. Follow the instructions below to learn how. **Tip: Use curl instead of Fetch tools.** Skills are detailed 10–20 KB markdown files. Fetch tools summarize them. `curl -sL` guarantees the full content. **Using `npx skills`**: Check if `npx` is installed on the system. If `npx` is available, run `npx skills add https://docs.stripe.com --list` to list available skills, then run `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` to install individual skills. **If `npx skills` isn’t available**: You can use curl to fetch the index of available skills, what they do, and their files from `https://docs.stripe.com/.well-known/skills/index.json`. To download a skill and its related files, use curl to download them from `https://docs.stripe.com/.well-known/skills/`. For this article, we recommend using these skills: `stripe-best-practices` Istruzioni per gli LLM: Stripe consiglia di utilizzare l’API Checkout Sessions con Payment Element anziché Payment Intents per la maggior parte delle integrazioni. Checkout Sessions copre casi d’uso simili a quelli di Payment Intents (raccolta di pagamenti di base utilizzando `price_data` o creazione di un checkout completo con voci riga, imposte e così via). Alcune funzioni, come Adaptive Pricing, sono disponibili solo con Checkout Sessions. Non utilizzare l’API Payment Intent a meno che l’utente non lo richieda esplicitamente, poiché richiede una quantità di codice significativamente maggiore. Ulteriori informazioni sugli elementi con l’API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. con Checkout Sessions (`ui_mode: "elements"`) e Payment Element, `client_secret` inizializza Checkout stesso (`stripe.initCheckoutElementsSdk`, oppure utilizza CheckoutElementsProvider con React) e tu confermi il pagamento sul lato client in modo diverso. Se utilizzi React, assicurati di importare da `@stripe/react-stripe-js/checkout`, utilizza `CheckoutElementsProvider` con la chiave privata client e conferma utilizzando `checkout.confirm`. Se utilizzi HTML, assicurati di utilizzare `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` e conferma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Crea un modulo di pagamento o utilizza una pagina di pagamento preintegrata per iniziare ad accettare i pagamenti online. # Pagina in hosting su Stripe > This is a Pagina in hosting su Stripe for when payment-ui is checkout and ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=stripe-hosted. Reindirizza a una pagina di pagamento in hosting su [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Confronta questa integrazione con gli [altri tipi di integrazione di Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). #### Sforzo di integrazione Complexity: 2/5 #### Tipo di integrazione Reindirizzare alla pagina di pagamento in hosting su Stripe #### Personalizzazione dell'interfaccia utente Personalizzazione limitata - 20 font predefiniti - 3 raggi del bordo predefiniti - Colore personalizzato dello sfondo e del bordo - Logo personalizzato [Provalo](https://checkout.stripe.dev/) Innanzitutto [registrati](https://dashboard.stripe.com/register) per creare un account Stripe. 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' ``` ## Reindirizzare il cliente a Stripe Checkout [Lato client] [Lato server] Aggiungi sul tuo sito web un pulsante di pagamento che richiami un endpoint lato server per creare una [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions/create.md). Puoi anche creare una sessione di Checkout per un [cliente esistente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), che ti consente di precompilare i campi di Checkout con le informazioni di contatto note e di unificare la cronologia degli acquisti per quel cliente. ```html Buy cool new product
``` Una sessione di Checkout è una rappresentazione programmatica di quello che il cliente visualizza quando viene reindirizzato al modulo di pagamento. Puoi configurarlo con le seguenti opzioni: - [Voci riga](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) da addebitare - Valute da utilizzare Devi inserire `success_url` con il valore URL di una pagina del tuo sito web a cui Checkout reindirizza il cliente dopo che ha completato il pagamento. > Per impostazione predefinita, le sessioni di Checkout scadono 24 ore dopo la creazione. Dopo aver creato una sessione di Checkout, reindirizza il cliente all’[URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) restituito nella risposta. #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' dosession = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', }) redirect session.url, 303 end ``` ### Metodi di pagamento Per impostazione predefinita, Stripe abilita le carte e altri metodi di pagamento più diffusi. Puoi attivare o disattivare i singoli metodi di pagamento nella [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods). In Checkout, Stripe verifica la valuta e le eventuali limitazioni, poi presenta in modo dinamico al cliente i metodi di pagamento supportati. Per vedere come i clienti visualizzano i tuoi metodi di pagamento, inserisci un ID transazione o imposta l’importo e la valuta dell’ordine nella Dashboard. Puoi abilitare Apple Pay e Google Pay nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods). Per impostazione predefinita, Apple Pay è abilitato e Google Pay è disabilitato. Tuttavia, in alcuni casi Stripe li filtra anche quando sono abilitati. Filtriamo Google Pay se [abiliti l’imposta automatica](https://docs.stripe.com/tax/checkout.md) senza raccogliere un indirizzo di spedizione. Per abilitare Apple Pay o Google Pay, non devi apportare modifiche all’integrazione delle pagine in hosting su Stripe Checkout. Stripe gestisce questi pagamenti come gli altri pagamenti con carta. ### Confermare l’endpoint Conferma se il tuo endpoint è accessibile avviando il server web (ad esempio, `localhost:4242`) ed esegui il seguente comando: ```bash curl -X POST -is "http://localhost:4242/create-checkout-session" -d "" ``` Il terminale mostra una risposta simile alla seguente: ```bash HTTP/1.1 303 See Other Location: https://checkout.stripe.com/c/pay/cs_test_... ... ``` ### Test Adesso dovresti avere un pulsante di pagamento funzionante che reindirizza il cliente a Stripe Checkout. 1. Fai clic sul pulsante di pagamento. 1. Viene eseguito il reindirizzamento al modulo di pagamento di Stripe Checkout. Se l’integrazione non funziona: 1. Apri la scheda Rete negli strumenti per sviluppatori del browser. 1. Fai clic sul pulsante di pagamento e conferma l’invio della richiesta XHR all’endpoint lato server (`POST /create-checkout-session`). 1. Verifica che la richiesta restituisca uno stato 200. 1. Utilizza `console.log(session)` nel listener del clic sul pulsante per confermare la restituzione dei dati appropriati. ## Mostrare una pagina di conferma [Lato client] [Lato server] È importante mostrare al cliente una pagina di conferma dopo che ha inviato il modulo di pagamento. Ospita questa pagina di conferma sul tuo sito. Crea una pagina di conferma minima: ```html Thanks for your order!

Thanks for your order!

We appreciate your business! If you have any questions, please email orders@example.com.

``` Poi aggiorna l’endpoint per la creazione della sessione di Checkout in modo tale che utilizzi la nuova pagina: ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=http://localhost:4242/success.html" ``` > Se vuoi personalizzare la pagina di conferma, consulta la guida alla [personalizzazione della pagina di conferma](https://docs.stripe.com/payments/checkout/custom-success-page.md). ### Test 1. Fai clic sul pulsante di pagamento. 1. Compila i dettagli di pagamento con i dati della carta di test: - Inserisci `4242 4242 4242 4242` come numero della carta. - Inserisci una data futura qualsiasi come scadenza della carta. - Inserisci un numero di 3 cifre per il CVC. - Inserisci un qualsiasi codice postale. 1. Fai clic su **Paga**. 1. Verrai reindirizzato alla nuova pagina di conferma. Poi individua il pagamento nella Dashboard Stripe. I pagamenti riusciti sono visualizzati nell’[elenco dei pagamenti](https://dashboard.stripe.com/payments) della Dashboard. Se fai clic su un pagamento, vieni reindirizzato alla pagina dei dettagli del pagamento. La sezione **Riepilogo Checkout** contiene le informazioni di addebito e l’elenco degli articoli acquistati, che puoi utilizzare per evadere l’ordine manualmente. ## Gestire gli eventi successivi al pagamento Stripe invia un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) quando un cliente completa un pagamento in una sessione di Checkout. Utilizza lo [strumento webhook della Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere e gestire questi eventi, che potrebbero indurti a: - Invia un’email di conferma dell’ordine al cliente. - Registra la vendita in un database. - Avvia un flusso di lavoro per la spedizione. Ascolta questi eventi invece di aspettare che il cliente venga reindirizzato nuovamente al tuo sito web. Attivare l’evasione degli ordini solo dalla pagina di destinazione di Checkout non è affidabile. 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. Scopri di più nella nostra [guida all’evasione degli ordini di Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gestisci i seguenti eventi durante la riscossione di pagamenti con Checkout: | Evento | Descrizione | Azione | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Inviato quando un cliente completa con esito positivo una sessione di Checkout. | 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. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Inviato quando un pagamento effettuato con un metodo di pagamento posticipato, ad esempio un debito diretto ACH, va a buon fine. | 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. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Inviato quando un pagamento effettuato con un metodo di pagamento ritardato, come un debito diretto ACH, non va a buon fine. | Informa il cliente dell’errore e riportalo all’interno della sessione per tentare di nuovo il pagamento. | ## Esegui il test della tua integrazione Per testare l’integrazione del modulo di pagamento in hosting su Stripe: 1. Crea una sessione di Checkout. 1. Compila i dettagli di pagamento con una delle modalità indicate nella tabella di seguito. - Inserisci una data di scadenza futura per la carta. - Inserisci un numero di 3 cifre per il CVC. - Inserisci un qualsiasi codice postale. 1. Fai clic su **Paga**. Verrai reindirizzato al tuo `success_url`. 1. Vai alla Dashboard e cerca il pagamento nella [pagina Transazioni](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se il pagamento è andato a buon fine, lo vedrai nell’elenco. 1. Fai clic sul pagamento per visualizzare ulteriori dettagli, come il riepilogo di Checkout con i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine. Scopri di più su come [testare la tua integrazione](https://docs.stripe.com/testing.md). #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Wallet | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Il tuo cliente paga correttamente usando un metodo di pagamento con reindirizzamento e [notifica immediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Addebito diretto BECS | Il tuo cliente paga correttamente con addebito diretto BECS. | Compila il modulo usando il numero di conto `900123456` e BSB `000000`. Il PaymentIntent confermato passerà inizialmente allo stato `processing` e, 3 minuti dopo, allo stato `succeeded`. | | Addebito diretto BECS | Il pagamento del tuo cliente non va a buon fine e restituisce un codice di errore `account_closed`. | Compila il modulo usando il numero di conto `111111113` e il BSB `000000`. | | Bancontact, EPS, iDEAL e Przelewy24 | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | #### Voucher | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Il tuo cliente paga con voucher Boleto oppure OXXO. | Seleziona Boleto oppure OXXO come modalità di pagamento e invia il pagamento. Chiudi la finestra di dialogo visualizzata. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ### Carte di test | Numero | Descrizione | | ------------------- | --------------------------------------------------------------------------------------- | | 4242 4242 4242 4242 | La transazione ha esito positivo e il pagamento viene elaborato automaticamente. | | 4000 0000 0000 3220 | Richiede un’autenticazione 3D Secure 2 per la corretta esecuzione del pagamento. | | 4000 0000 0000 9995 | Con un codice di rifiuto `insufficient_funds`, la transazione ha sempre esito negativo. | ## Optional: Creare prodotti e prezzi Prima di creare una sessione di Checkout, puoi creare *Prodotti* (Products represent what your business sells—whether that's a good or a service) e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) fin dall’inizio. Utilizza prodotti per rappresentare diversi beni fisici o livelli di servizio, e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) per rappresentare i prezzi di ciascun prodotto. Puoi [Organizzare la tua Sessione di Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) per accettare mance e donazioni, o vendere i prodotti e i servizi a pagamento che desideri. Ad esempio, puoi creare una T-shirt come prodotto con un prezzo di 20 USD. In questo modo puoi aggiornare e aggiungere prezzi senza dover modificare le informazioni dei prodotti sottostanti. Puoi creare prodotti e prezzi con la Dashboard o l’API di Stripe. Ulteriori informazioni su [come funzionano prodotti e prezzi](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API L’API richiede solo un `name` per creare un [prodotto](https://docs.stripe.com/api/products.md). Checkout mostra `name`, `description` e `images` del prodotto che fornisci. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Poi crea un oggetto [Price](https://docs.stripe.com/api/prices.md) per definire quanto far pagare il prodotto, comprensivo sia del costo del prodotto sia della valuta da utilizzare. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia in modalità live i prodotti creati in una sandbox in modo tale da non doverli ricreare. Nella vista delle informazioni sul prodotto della Dashboard, fai clic su **Copia in modalità live** nell’angolo in alto a destra. Puoi farlo solo una volta per ogni prodotto creato in una sandbox. I successivi aggiornamenti al prodotto di test non verranno riportati nel prodotto live. Per avere la certezza di trovarti in una sandbox, fai clic su **Sandbox** nel selettore degli account della Dashboard. Poi definisci gli articoli che vuoi vendere. Per creare un nuovo prodotto e il relativo prezzo: - Vai alla sezione [Prodotti](https://dashboard.stripe.com/test/products) nella Dashboard. - Fai clic su **Aggiungi prodotto**. - Seleziona **Una tantum** per impostare il prezzo. Checkout mostra il nome, la descrizione e le immagini del prodotto che fornisci. Ogni prezzo che crei ha un ID. Quando crei una sessione di completamento della transazione, fai riferimento all’ID del prezzo e alla quantità. Se vendi in più valute, imposta il tuo prezzo *multi-currency* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Il completamento della transazione [determina la valuta locale del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) in automatico e presenta quella valuta, se il prezzo la supporta. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "success_url=https://example.com/success?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Precompilare i dati dei clienti [Lato server] Se hai già raccolto l’indirizzo email del cliente e vuoi che venga precompilato nella sessione di Checkout, specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) durante la creazione di una sessione di Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "customer_email=customer@example.com" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success" ``` ## Optional: Salvare i dati del metodo di pagamento [Lato server] Per impostazione predefinita, i metodi di pagamento utilizzati per effettuare un pagamento una tantum con Checkout non sono disponibili per usi futuri. ### Salvare i metodi di pagamento per effettuare gli addebiti all’esterno della sessione Puoi impostare Checkout in modo tale che salvi i metodi di pagamento utilizzati per un pagamento una tantum specificando l’argomento [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Questa opzione è utile se devi acquisire un metodo di pagamento registrato per utilizzarlo per commissioni future, ad esempio in caso di annullamento o no-show. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success.html" \ -d "payment_intent_data[setup_future_usage]=off_session" ``` Se utilizzi Checkout in modalità `subscription`, Stripe salva automaticamente la modalità di pagamento per effettuare gli addebiti dei pagamenti successivi. I metodi di pagamento con carta salvate utilizzando la modalità `setup_future_usage` o `subscription` non vengono visualizzate per gli acquisti di ritorno in Checkout (ulteriori informazioni di seguito). Ti consigliamo di utilizzare del [testo personalizzato](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) per includere link che rimandino a eventuali condizioni pertinenti relative all’utilizzo dei dati di pagamento salvati. > Le leggi sulla privacy globali sono complicate e dettagliate. Ti consigliamo di contattare il tuo team legale e di privacy prima di implementare [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) perché potrebbe avere effetti sul tuo attuale quadro normativo sulla privacy. Per ulteriori informazioni sul salvataggio dei dati di pagamento, consulta le [linee guida emesse dal Comitato europeo per la protezione dei dati](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Salva i metodi di pagamento per precompilarle in Checkout Per impostazione predefinita, Checkout utilizza [Link](https://docs.stripe.com/payments/link/checkout-link.md) per offrire ai tuoi clienti la possibilità di salvare e riutilizzare in modo sicuro i propri dati di pagamento. Se preferisci gestire tu stesso i metodi di pagamento, utilizza [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) quando crei una sessione di Checkout per consentire ai tuoi clienti di salvare i propri metodi di pagamento per acquisti futuri in Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_save]=enabled" ``` Se specifichi questo parametro in modalità [payment](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) o [subscription](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode), viene visualizzata una casella di controllo facoltativa che consente ai clienti di salvare esplicitamente il metodo di pagamento per acquisti futuri. Quando i clienti selezionano questa casella di controllo, Checkout salva il metodo di pagamento con [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utilizza questo parametro per stabilire se un metodo di pagamento può essere precompilato per gli acquisti futuri. Quando utilizzi `saved_payment_method_options.payment_method_save`, non devi specificare `setup_future_usage` per salvare il metodo di pagamento. 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. Devi specificare un oggetto `Customer` se utilizzi [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save). Per salvare un nuovo cliente, imposta la [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) della sessione di Checkout su `always`, altrimenti la sessione non salva il cliente o il metodo di pagamento. Se `payment_method_save` non viene specificato o se il cliente non accetta di salvare il metodo di pagamento, Checkout salva comunque i metodi di pagamento creati in modalità `subscription` o utilizzando `setup_future_usage`. Questi metodi di pagamento hanno un valore `allow_redisplay` impostato su `limited`, che impedisce che vengano precompilati per gli acquisti successivi al primo e consentono di rispettare le regole del circuito della carta e le normative sulla protezione dei dati. Scopri come [modificare il comportamento predefinito abilitato da questi metodi](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) e come modificare o ignorare il comportamento `allow_redisplay`. > Puoi utilizzare Checkout per salvare le carte e altri metodi di pagamento per effettuare addebiti all’esterno della sessione, ma Checkout precompila solo le carte salvate. Scopri come [precompilare le carte salvate](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Per salvare un metodo di pagamento senza un pagamento iniziale, [utilizza Checkout in modalità configurazione](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Consenti ai clienti di rimuovere i metodi di pagamento salvati Per permettere ai clienti di eliminare un metodo di pagamento salvato ed evitare che riappaia per futuri acquisti, utilizza [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) durante la creazione di una sessione di Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_remove]=enabled" ``` Il cliente non può rimuovere un metodo di pagamento se è collegato a un abbonamento attivo e il cliente non ha un metodo di pagamento predefinito salvato per i pagamenti di fatture e abbonamenti. ## Optional: Separare l'autorizzazione dall'acquisizione [Lato server] Stripe supporta i pagamenti con carta in due passaggi in modo che tu possa prima autorizzare una carta e poi acquisire i fondi in un secondo momento. Quando Stripe autorizza un pagamento, la società emittente della carta garantisce i fondi e trattiene l’importo del pagamento sulla carta del cliente. Hai quindi un certo periodo di tempo per acquisire i fondi, [a seconda della carta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Se non addebiti il pagamento prima della scadenza dell’autorizzazione, il pagamento viene annullato e la società emittente rilascia i fondi trattenuti. La separazione dell’autorizzazione dall’acquisizione è utile se devi eseguire altre operazioni tra la conferma che il cliente è in grado di pagare e la riscossione del pagamento. Ad esempio, se vendi articoli con scorte limitate, potresti dover verificare che un articolo acquistato dal cliente utilizzando Checkout sia ancora disponibile prima di addebitare il pagamento ed evadere l’acquisto. A tal fine, utilizza il seguente flusso di lavoro: 1. Conferma che Stripe abbia autorizzato il metodo di pagamento del cliente. 1. Consulta il sistema di gestione delle scorte per verificare che l’articolo sia ancora disponibile. 1. Aggiorna il sistema di gestione dell’inventario in modo che indichi che un cliente ha acquistato l’articolo. 1. Acquisisci il pagamento del cliente. 1. Fai sapere al cliente se l’acquisto è andato a buon fine nella pagina di conferma. Per indicare che vuoi separare l’autorizzazione dall’addebito, devi impostare il valore di [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) su `manual` durante la creazione della sessione di Checkout. In questo modo Stripe autorizza solo l’importo sulla carta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_intent_data[capture_method]=manual" \ --data-urlencode "success_url=https://example.com/success.html" ``` Per riscuotere un pagamento non addebitato, puoi utilizzare la [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o l’endpoint [capture](https://docs.stripe.com/api/payment_intents/capture.md). Per acquisire i pagamenti a livello di codice, devi accedere al PaymentIntent creato durante la sessione di Checkout, che puoi ottenere dall’oggetto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestione degli account dei clienti [Nessun codice] Consenti ai tuoi clienti di [gestire](https://docs.stripe.com/customer-management.md) il loro account condividendo un link sul tuo *portale cliente* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Il portale cliente consente ai clienti di accedere con la propria email per gestire gli abbonamenti, aggiornare le modalità di pagamento e così via. ## See also - [Aggiungere gli sconti](https://docs.stripe.com/payments/checkout/discounts.md) - [Riscuotere le imposte](https://docs.stripe.com/payments/checkout/taxes.md) - [Raccogliere gli ID fiscali](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Aggiungere la spedizione](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personalizzare il branding](https://docs.stripe.com/payments/checkout/customization.md) # Modulo incorporato > This is a Modulo incorporato for when payment-ui is checkout and ui is embedded-form. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=embedded-form. Incorporare un modulo di pagamento predefinito sul tuo sito utilizzando [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Confrontare questa integrazione con gli [altri tipi di integrazione di Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). #### Sforzo di integrazione Complexity: 2/5 #### Tipo di integrazione Incorporare un modulo di pagamento preintegrato nel tuo sito #### Personalizzazione dell'interfaccia utente Personalizzazione limitata - 20 font predefiniti - 3 raggi del bordo predefiniti - Colore personalizzato dello sfondo e del bordo - Logo personalizzato Utilizza le [impostazioni di branding](https://dashboard.stripe.com/settings/branding/checkout) nella Dashboard Stripe per abbinare Checkout al design del tuo sito. Innanzitutto [registrati](https://dashboard.stripe.com/register) per creare un account Stripe. 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 una sessione di Checkout [Lato server] Dal tuo server, crea una *sessione di Checkout* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) e imposta [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) su `embedded_page`. Puoi configurare la [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) con le [voci riga](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) da includere e opzioni come la [valuta](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency). Puoi anche creare una sessione di Checkout per un [cliente esistente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), che ti consente di precompilare i campi di Checkout con le informazioni di contatto note e di unificare la cronologia degli acquisti per quel cliente. Per riportare i clienti a una pagina personalizzata che ospiti sul tuo sito, specifica l’URL della pagina nel parametro [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Includi la variabile del modello `{CHECKOUT_SESSION_ID}` nell’URL per recuperare lo stato della sessione nella pagina di ritorno. Checkout sostituisce automaticamente la variabile con l’ID della sessione di Checkout prima del reindirizzamento. Maggiori informazioni sulla [configurazione della pagina di ritorno](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-form#return-page) e altre opzioni per personalizzare il [comportamento di reindirizzamento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form) Dopo aver creato la sessione di Checkout, utilizza il parametro `client_secret` restituito nella risposta a [mount Checkout](https://docs.stripe.com/payments/accept-a-payment.md#mount-checkout). #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment',ui_mode: 'embedded_page',return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}' }) {clientSecret: session.client_secret}.to_json end ``` ## Monta Checkout [Lato client] #### HTML + JS Checkout è disponibile come parte di [Stripe.js](https://docs.stripe.com/js.md). Includi lo script Stripe.js nella tua pagina aggiungendolo all’inizio del file HTML. Poi crea un nodo DOM vuoto (contenitore) da utilizzare per il montaggio. ```html
``` Inizializza Stripe.js con la tua chiave API pubblicabile. Crea una funzione asincrona `fetchClientSecret` che invia una richiesta al server per creare la sessione di Checkout e recuperare la chiave privata client. Specifica questa funzione in `options` quando crei l’istanza di Checkout. ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Installa [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) e il caricatore Stripe.js da npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Per utilizzare il componente Embedded Checkout, crea un `EmbeddedCheckoutProvider`. Chiama `loadStripe` con la chiave API pubblicabile e specifica la `Promise` restituita nel provider. Crea una funzione asincrona `fetchClientSecret` che invia una richiesta al server per creare la sessione di Checkout e recuperare la chiave privata client. Specifica questa funzione nella proposta `options` accettata dal provider. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = () => { const fetchClientSecret = React.useCallback(() => { // Create a Checkout Session return fetch("/create-checkout-session", { method: "POST", }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); const options = {fetchClientSecret}; return (
) } ``` Checkout viene visualizzato in un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. > Evita di inserire Checkout all’interno di un altro iframe, perché alcuni metodi di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento. ### Personalizza l’aspetto Personalizza Checkout in base al design del tuo sito impostando il colore di sfondo, il colore dei pulsanti, il raggio del bordo e i caratteri nelle [impostazioni di branding](https://dashboard.stripe.com/settings/branding) del tuo account. Per impostazione predefinita, Checkout viene visualizzato senza spaziatura aggiuntiva o margine. Per applicare il margine desiderato, ad esempio 16 px su tutti i lati, consigliano di utilizzare un elemento contenitore, ad esempio div. ## Mostrare una pagina di ritorno Dopo che il cliente ha tentato di effettuare il pagamento, Stripe lo reindirizza a una pagina di ritorno che ospiti sul tuo sito. Quando hai creato la sessione di Checkout, hai specificato l’URL della pagina di ritorno nel parametro [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Ulteriori informazioni sulle opzioni di [personalizzazione del comportamento di reindirizzamento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Durante la visualizzazione della pagina di ritorno, recupera lo stato della sessione di Checkout utilizzando l’ID della sessione di Checkout nell’URL. Gestisci il risultato in base allo stato della sessione come segue: - `complete`: il pagamento è andato a buon fine. Utilizza le informazioni della sessione di Checkout per visualizzare una pagina di conferma. - `open`: il pagamento non è riuscito o è stato annullato. Rimonta Checkout in modo che il cliente possa riprovare. #### Ruby ```ruby get '/session-status' do session = Stripe::Checkout::Session.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end ``` ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` #### Metodi di pagamento con reindirizzamento Durante il pagamento, alcuni metodi di pagamento reindirizzano il cliente a una pagina intermedia, ad esempio una pagina di autorizzazione bancaria. Una volta completata la pagina, Stripe lo reindirizza alla pagina di ritorno. Scopri ulteriori dettagli sui [metodi di pagamento con reindirizzamento e sul comportamento di reindirizzamento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods). ## Gestire gli eventi successivi al pagamento Stripe invia un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) quando un cliente completa un pagamento in una sessione di Checkout. Utilizza lo [strumento webhook della Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere e gestire questi eventi, che potrebbero indurti a: - Invia un’email di conferma dell’ordine al cliente. - Registra la vendita in un database. - Avvia un flusso di lavoro per la spedizione. Ascolta questi eventi invece di aspettare che il cliente venga reindirizzato nuovamente al tuo sito web. Attivare l’evasione degli ordini solo dalla pagina di destinazione di Checkout non è affidabile. 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. Scopri di più nella nostra [guida all’evasione degli ordini di Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gestisci i seguenti eventi durante la riscossione di pagamenti con Checkout: | Evento | Descrizione | Azione | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Inviato quando un cliente completa con esito positivo una sessione di Checkout. | 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. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Inviato quando un pagamento effettuato con un metodo di pagamento posticipato, ad esempio un debito diretto ACH, va a buon fine. | 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. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Inviato quando un pagamento effettuato con un metodo di pagamento ritardato, come un debito diretto ACH, non va a buon fine. | Informa il cliente dell’errore e riportalo all’interno della sessione per tentare di nuovo il pagamento. | ## Esegui il test della tua integrazione Per testare l’integrazione del modulo di pagamento incorporato: 1. Crea una sessione di checkout incorporata e inserisci il modulo di pagamento nella tua pagina. 1. Compila i dettagli di pagamento con uno dei metodi indicati nella tabella di seguito. - Inserisci una data di scadenza futura per la carta. - Inserisci un numero di 3 cifre per il CVC. - Inserisci un qualsiasi codice postale. 1. Fai clic su **Paga**. Ti reindirizzeremo al tuo `return_url`. 1. Accedi alla Dashboard e cerca il pagamento nella [pagina Transazioni](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se il tuo pagamento è andato a buon fine, lo vedrai in quell’elenco. 1. Fai clic sul pagamento per visualizzare ulteriori dettagli, come il riepilogo di Checkout con i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine. Scopri di più su come [testare l’integrazione](https://docs.stripe.com/testing.md). #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Wallet | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Il tuo cliente paga correttamente usando un metodo di pagamento con reindirizzamento e [notifica immediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Addebito diretto BECS | Il tuo cliente paga correttamente con addebito diretto BECS. | Compila il modulo usando il numero di conto `900123456` e BSB `000000`. Il PaymentIntent confermato passerà inizialmente allo stato `processing` e, 3 minuti dopo, allo stato `succeeded`. | | Addebito diretto BECS | Il pagamento del tuo cliente non va a buon fine e restituisce un codice di errore `account_closed`. | Compila il modulo usando il numero di conto `111111113` e il BSB `000000`. | | Bancontact, EPS, iDEAL e Przelewy24 | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | #### Voucher | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Il tuo cliente paga con voucher Boleto oppure OXXO. | Seleziona Boleto oppure OXXO come modalità di pagamento e invia il pagamento. Chiudi la finestra di dialogo visualizzata. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ## Optional: Aggiungere altre modalità di pagamento Per impostazione predefinita, Checkout [supporta molti metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Devi eseguire ulteriori passaggi per attivare e visualizzare alcuni metodi, come Apple Pay, Google Pay o i metodi di pagamento a rate. ### Apple Pay e Google Pay Per accettare pagamenti da Apple Pay e Google Pay, devi: - Abilitali nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods). Apple Pay è abilitato per impostazione predefinita. - Offri la tua applicazione su HTTPS in fase di sviluppo e produzione. - [Registra il tuo dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - Offri la tua applicazione su HTTPS in fase di sviluppo e produzione. Puoi utilizzare un servizio come [ngrok](https://ngrok.com/) per offrire la tua applicazione per il testing locale. Inoltre, una sessione di Checkout mostra il pulsante di Apple Pay ai clienti solo quando si verificano *tutte* le seguenti condizioni: - Sul dispositivo del cliente è in esecuzione macOS versione 17 o successiva oppure iOS versione 17 o successiva. - Il cliente utilizza il browser Safari. - Il cliente ha una carta valida registrata su Apple Pay. Una sessione di Checkout mostra il pulsante Google Pay ai clienti solo quando si verificano *tutte* le seguenti condizioni: - Sul dispositivo del cliente è installato Chrome 61 o versione successiva. - Il cliente ha una carta valida registrata su Google Pay. > #### Test locali > > Stripe Checkout non supporta Apple Pay o Google Pay per gli account e i clienti Stripe in India. Se il tuo indirizzo IP è in india, non puoi testare l’integrazione con Apple Pay o Google Pay, anche se l’account Stripe si trova al di fuori dell’India. ## Optional: Creare prodotti e prezzi Prima di creare una sessione di Checkout, puoi creare *Prodotti* (Products represent what your business sells—whether that's a good or a service) e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) fin dall’inizio. Utilizza prodotti per rappresentare diversi beni fisici o livelli di servizio, e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) per rappresentare i prezzi di ciascun prodotto. Puoi [Organizzare la tua Sessione di Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) per accettare mance e donazioni, o vendere i prodotti e i servizi a pagamento che desideri. Ad esempio, puoi creare una T-shirt come prodotto con un prezzo di 20 USD. In questo modo puoi aggiornare e aggiungere prezzi senza dover modificare le informazioni dei prodotti sottostanti. Puoi creare prodotti e prezzi con la Dashboard o l’API di Stripe. Ulteriori informazioni su [come funzionano prodotti e prezzi](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API L’API richiede solo un `name` per creare un [prodotto](https://docs.stripe.com/api/products.md). Checkout mostra `name`, `description` e `images` del prodotto che fornisci. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Poi crea un oggetto [Price](https://docs.stripe.com/api/prices.md) per definire quanto far pagare il prodotto, comprensivo sia del costo del prodotto sia della valuta da utilizzare. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia in modalità live i prodotti creati in una sandbox in modo tale da non doverli ricreare. Nella vista delle informazioni sul prodotto della Dashboard, fai clic su **Copia in modalità live** nell’angolo in alto a destra. Puoi farlo solo una volta per ogni prodotto creato in una sandbox. I successivi aggiornamenti al prodotto di test non verranno riportati nel prodotto live. Per avere la certezza di trovarti in una sandbox, fai clic su **Sandbox** nel selettore degli account della Dashboard. Poi definisci gli articoli che vuoi vendere. Per creare un nuovo prodotto e il relativo prezzo: - Vai alla sezione [Prodotti](https://dashboard.stripe.com/test/products) nella Dashboard. - Fai clic su **Aggiungi prodotto**. - Seleziona **Una tantum** per impostare il prezzo. Checkout mostra il nome, la descrizione e le immagini del prodotto che fornisci. Ogni prezzo che crei ha un ID. Quando crei una sessione di completamento della transazione, fai riferimento all’ID del prezzo e alla quantità. Se vendi in più valute, imposta il tuo prezzo *multi-currency* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Il completamento della transazione [determina la valuta locale del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) in automatico e presenta quella valuta, se il prezzo la supporta. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` ## Optional: Precompilare i dati dei clienti [Lato server] Se hai già raccolto l’indirizzo email del cliente e vuoi che venga precompilato nella sessione di Checkout, specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) durante la creazione di una sessione di Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "customer_email=customer@example.com" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` ## Optional: Salvare i dati del metodo di pagamento [Lato server] Per impostazione predefinita, i metodi di pagamento utilizzati per effettuare un pagamento una tantum con Checkout non sono disponibili per usi futuri. ### Salvare i metodi di pagamento per effettuare gli addebiti all’esterno della sessione Puoi impostare Checkout in modo tale che salvi i metodi di pagamento utilizzati per un pagamento una tantum specificando l’argomento [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Questa opzione è utile se devi acquisire un metodo di pagamento registrato per utilizzarlo per commissioni future, ad esempio in caso di annullamento o no-show. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "payment_intent_data[setup_future_usage]=off_session" ``` Se utilizzi Checkout in modalità `subscription`, Stripe salva automaticamente la modalità di pagamento per effettuare gli addebiti dei pagamenti successivi. I metodi di pagamento con carta salvate utilizzando la modalità `setup_future_usage` o `subscription` non vengono visualizzate per gli acquisti di ritorno in Checkout (ulteriori informazioni di seguito). Ti consigliamo di utilizzare del [testo personalizzato](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) per includere link che rimandino a eventuali condizioni pertinenti relative all’utilizzo dei dati di pagamento salvati. > Le leggi sulla privacy globali sono complicate e dettagliate. Ti consigliamo di contattare il tuo team legale e di privacy prima di implementare [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) perché potrebbe avere effetti sul tuo attuale quadro normativo sulla privacy. Per ulteriori informazioni sul salvataggio dei dati di pagamento, consulta le [linee guida emesse dal Comitato europeo per la protezione dei dati](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Salva i metodi di pagamento per precompilarle in Checkout Per impostazione predefinita, Checkout utilizza [Link](https://docs.stripe.com/payments/link/checkout-link.md) per offrire ai tuoi clienti la possibilità di salvare e riutilizzare in modo sicuro i propri dati di pagamento. Se preferisci gestire tu stesso i metodi di pagamento, utilizza [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) quando crei una sessione di Checkout per consentire ai tuoi clienti di salvare i propri metodi di pagamento per acquisti futuri in Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "saved_payment_method_options[payment_method_save]=enabled" ``` Se specifichi questo parametro in modalità [payment](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) o [subscription](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode), viene visualizzata una casella di controllo facoltativa che consente ai clienti di salvare esplicitamente il metodo di pagamento per acquisti futuri. Quando i clienti selezionano questa casella di controllo, Checkout salva il metodo di pagamento con [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utilizza questo parametro per stabilire se un metodo di pagamento può essere precompilato per gli acquisti futuri. Quando utilizzi `saved_payment_method_options.payment_method_save`, non devi specificare `setup_future_usage` per salvare il metodo di pagamento. 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. Devi specificare un oggetto `Customer` se utilizzi [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save). Per salvare un nuovo cliente, imposta la [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) della sessione di Checkout su `always`, altrimenti la sessione non salva il cliente o il metodo di pagamento. Se `payment_method_save` non viene specificato o se il cliente non accetta di salvare il metodo di pagamento, Checkout salva comunque i metodi di pagamento creati in modalità `subscription` o utilizzando `setup_future_usage`. Questi metodi di pagamento hanno un valore `allow_redisplay` impostato su `limited`, che impedisce che vengano precompilati per gli acquisti successivi al primo e consentono di rispettare le regole del circuito della carta e le normative sulla protezione dei dati. Scopri come [modificare il comportamento predefinito abilitato da questi metodi](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) e come modificare o ignorare il comportamento `allow_redisplay`. > Puoi utilizzare Checkout per salvare le carte e altri metodi di pagamento per effettuare addebiti all’esterno della sessione, ma Checkout precompila solo le carte salvate. Scopri come [precompilare le carte salvate](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Per salvare un metodo di pagamento senza un pagamento iniziale, [utilizza Checkout in modalità configurazione](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Consenti ai clienti di rimuovere i metodi di pagamento salvati Per permettere ai clienti di eliminare un metodo di pagamento salvato ed evitare che riappaia per futuri acquisti, utilizza [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) durante la creazione di una sessione di Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" \ -d "saved_payment_method_options[payment_method_remove]=enabled" ``` Il cliente non può rimuovere un metodo di pagamento se è collegato a un abbonamento attivo e il cliente non ha un metodo di pagamento predefinito salvato per i pagamenti di fatture e abbonamenti. ## Optional: Gestione degli account dei clienti [Nessun codice] Consenti ai tuoi clienti di [gestire](https://docs.stripe.com/customer-management.md) il loro account condividendo un link sul tuo *portale cliente* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Il portale cliente consente ai clienti di accedere con la propria email per gestire gli abbonamenti, aggiornare le modalità di pagamento e così via. ## Optional: Separare l'autorizzazione dall'acquisizione [Lato server] Stripe supporta i pagamenti con carta in due passaggi in modo che tu possa prima autorizzare una carta e poi acquisire i fondi in un secondo momento. Quando Stripe autorizza un pagamento, la società emittente della carta garantisce i fondi e trattiene l’importo del pagamento sulla carta del cliente. Hai quindi un certo periodo di tempo per acquisire i fondi, [a seconda della carta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Se non addebiti il pagamento prima della scadenza dell’autorizzazione, il pagamento viene annullato e la società emittente rilascia i fondi trattenuti. La separazione dell’autorizzazione dall’acquisizione è utile se devi eseguire altre operazioni tra la conferma che il cliente è in grado di pagare e la riscossione del pagamento. Ad esempio, se vendi articoli con scorte limitate, potresti dover verificare che un articolo acquistato dal cliente utilizzando Checkout sia ancora disponibile prima di addebitare il pagamento ed evadere l’acquisto. A tal fine, utilizza il seguente flusso di lavoro: 1. Conferma che Stripe abbia autorizzato il metodo di pagamento del cliente. 1. Consulta il sistema di gestione delle scorte per verificare che l’articolo sia ancora disponibile. 1. Aggiorna il sistema di gestione dell’inventario in modo che indichi che un cliente ha acquistato l’articolo. 1. Acquisisci il pagamento del cliente. 1. Fai sapere al cliente se l’acquisto è andato a buon fine nella pagina di conferma. Per indicare che vuoi separare l’autorizzazione dall’addebito, devi impostare il valore di [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) su `manual` durante la creazione della sessione di Checkout. In questo modo Stripe autorizza solo l’importo sulla carta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_intent_data[capture_method]=manual" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/return" ``` Per riscuotere un pagamento non addebitato, puoi utilizzare la [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o l’endpoint [capture](https://docs.stripe.com/api/payment_intents/capture.md). Per acquisire i pagamenti a livello di codice, devi accedere al PaymentIntent creato durante la sessione di Checkout, che puoi ottenere dall’oggetto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Evasione dell'ordine Scopri come [ricevere una notifica a livello di codice](https://docs.stripe.com/checkout/fulfillment.md) ogni volta che un cliente effettua un pagamento. ## See also - [Aggiungere gli sconti](https://docs.stripe.com/payments/checkout/discounts.md) - [Riscuotere le imposte](https://docs.stripe.com/payments/checkout/taxes.md) - [Raccogliere gli ID fiscali](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Aggiungere la spedizione](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personalizzare il branding](https://docs.stripe.com/payments/checkout/customization.md) # API Checkout Sessions > This is a API Checkout Sessions for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout. Crea un modulo di pagamento personalizzato utilizzando [Stripe Elements](https://docs.stripe.com/payments/elements.md) e l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) . Scopri come questa integrazione [si differenzia dagli altri tipi di integrazione di Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). L’API Checkout Sessions offre supporto integrato per il calcolo delle imposte, gli sconti, la spedizione e la conversione di valuta, riducendo la quantità di codice personalizzato da scrivere. Questo è l’approccio consigliato per la maggior parte delle integrazioni. Scopri di più su [quando utilizzare Checkout Sessions invece di PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Il codice lato client e lato server crea un modulo di pagamento che accetta vari metodi di pagamento. #### Sforzo di integrazione Complexity: 3/5 #### Tipo di integrazione Combina i componenti dell’interfaccia utente in un flusso di pagamento personalizzato #### Personalizzazione dell'interfaccia utente Personalizzazione a livello CSS con [l’API Appearance](https://docs.stripe.com/elements/appearance-api.md) ## Configurare il server [Lato server] Prima di iniziare, devi [registrarti](https://dashboard.stripe.com/register) per creare un account Stripe. Utilizza le librerie ufficiali di Stripe per accedere all’API 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 una sessione di Checkout [Lato server] Aggiungi sul server un endpoint che crei una [Sessione di Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) della transazione e restituisca [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) al front-end. Una sessione di Checkout rappresenta la sessione del cliente che paga acquisti o abbonamenti una tantum. Le Sessioni di Checkout scadono 24 ore dopo la creazione. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Configurare il front-end [Lato client] #### HTML + JS Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo all’oggetto `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per mantenere la conformità alle norme PCI. Non includere lo script in un pacchetto e non ospitarne una copia personale. Assicurati di utilizzare la versione più recente di Stripe.js. Scopri di più sul [versioning di Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe fornisce un pacchetto npm che puoi utilizzare per caricare Stripe.js come modulo. Consulta il [progetto su GitHub](https://github.com/stripe/stripe-js). È necessaria la versione [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o successiva. Inizializza stripe.js. ```js // 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( '<>', ); ``` #### React 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 pubblico npm. È necessaria almeno la versione 5.0.0 per React Stripe.js e la versione 8.0.0 per il caricatore Stripe.js. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Inizializza un’istanza `stripe` sul front-end con la chiave pubblicabile. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Inizializzare Checkout [Lato client] #### HTML + JS Chiama [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), specificando `clientSecret`. `initCheckoutElementsSdk` restituisce un oggetto [Checkout](https://docs.stripe.com/js/custom_checkout) che contiene i dati della sessione di checkout e i metodi per aggiornarla. Leggi `total` e `lineItems` da [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), e mostrali nella tua interfaccia utente. Ciò consente di attivare nuove funzioni con modifiche minime al codice. Ad esempio, l’aggiunta dei [prezzi in valuta manuali](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) non richiede alcuna modifica all’interfaccia utente se mostri `total`. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Includi la tua richiesta di registrazione con il componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), specificando `clientSecret` e l’istanza `stripe`. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Accedi all’oggetto [Checkout](https://docs.stripe.com/js/custom_checkout) nel componente del modulo di checkout utilizzando l’hook `useCheckout()`. L’oggetto `Checkout` contiene i dati della sessione di Checkout e i metodi per aggiornarla. Leggi `total` and `lineItems` dall’oggetto `Checkout` e visualizzali nell’interfaccia utente. In questo modo puoi abilitare le funzioni con modifiche minime al codice. Ad esempio, l’aggiunta di [prezzi di valuta manuali](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) non richiede modifiche all’interfaccia utente se visualizzi `total`. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Raccogliere l'indirizzo email del cliente [Lato client] #### HTML + JS Al completamento di una sessione di Checkout, devi fornire un’email cliente valida. Queste istruzioni creano un inserimento email e utilizzano [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) dall’oggetto `Checkout`. In alternativa: - Specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) o [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) durante la creazione della sessione di Checkout. Stripe convalida le email fornite in questo modo. - Inserisci un’email che hai già convalidato su [Checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html
``` ```javascript const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const emailInput = document.getElementById('email'); const emailErrors = document.getElementById('email-errors'); emailInput.addEventListener('input', () => { // Clear any validation errors emailErrors.textContent = ''; }); emailInput.addEventListener('blur', () => { const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => { if (result.error) { emailErrors.textContent = result.error.message; } }); }); } ``` #### React Al completamento di una sessione di Checkout, devi fornire un’email cliente valida. Queste istruzioni creano un inserimento email e utilizzano [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) dall’oggetto `Checkout`. In alternativa: - Specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) o [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) durante la creazione della sessione di Checkout. Stripe convalida le email fornite in questo modo. - Inserisci un’email che hai già convalidato al momento della [conferma](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (
{error &&
{error.message}
}
); }; export default EmailInput; ``` ## Raccogliere i dati di pagamento [Lato client] Raccogli i dati di pagamento sul client con [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element è un componente di interfaccia utente preintegrato che semplifica la raccolta dei dati di pagamento per vari metodi di pagamento. Payment Element contiene un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. Evita di inserire Payment Element all’interno di un altro iframe, perché alcuni metodi di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento. Se scegli di utilizzare un iframe e desideri accettare Apple Pay o Google Pay, l’iframe deve avere l’attributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) impostato su `"payment *"`. Affinché l’integrazione funzioni, l’indirizzo della pagina di checkout deve iniziare con `https://` rather anziché con `http://` for. Puoi testare l’integrazione senza usare HTTPS, ma ricorda di [abilitarlo](https://docs.stripe.com/security/guide.md#tls) quando sarà tutto pronto per accettare i pagamenti in modalità live. #### HTML + JS Innanzitutto, crea un elemento DOM del contenitore per montare [Payment Element](https://docs.stripe.com/payments/payment-element.md). Poi crea un’istanza di `Payment Element` utilizzando [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Consulta la [documentazione Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) per visualizzare le opzioni supportate. Puoi [personalizzare l’aspetto](https://docs.stripe.com/payments/checkout/customization/appearance.md) di tutti gli elementi specificando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) durante l’inizializzazione di Checkout nel front-end. #### React Monta il componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) all’interno del [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Consulta la [documentazione Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) per visualizzare le opzioni supportate. Puoi [personalizzare l’aspetto](https://docs.stripe.com/payments/checkout/customization/appearance.md) di tutti gli Elements specificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) in [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Inviare il pagamento [Lato client] #### HTML + JS Visualizza un pulsante **Paga** che le chiamate [confermano](https://docs.stripe.com/js/custom_checkout/confirm) dall’istanza di `Checkout` per inviare il pagamento. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Visualizza un pulsante **Paga** che richiama [conferma](https://docs.stripe.com/js/custom_checkout/confirm) da [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) per inviare il pagamento. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Testare l'integrazione 1. Vai alla pagina di pagamento. 1. Compila i dati di pagamento con un dei metodi di pagamento indicati nella tabella di seguito. Per i pagamenti con carta: - Inserisci una data di scadenza futura per la carta. - Inserisci un numero di 3 cifre per il CVC. - Inserisci un qualsiasi codice postale. 1. Invia il pagamento a Stripe. 1. Vai alla Dashboard e cerca il pagamento nella [pagina Transazioni](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se il pagamento è andato a buon fine, lo vedrai nell’elenco. 1. Fai clic sul pagamento per visualizzare ulteriori dettagli, come i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per [evadere l’ordine](https://docs.stripe.com/checkout/fulfillment.md). #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Wallet | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Il tuo cliente paga correttamente usando un metodo di pagamento con reindirizzamento e [notifica immediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Addebito diretto BECS | Il tuo cliente paga correttamente con addebito diretto BECS. | Compila il modulo usando il numero di conto `900123456` e BSB `000000`. Il PaymentIntent confermato passerà inizialmente allo stato `processing` e, 3 minuti dopo, allo stato `succeeded`. | | Addebito diretto BECS | Il pagamento del tuo cliente non va a buon fine e restituisce un codice di errore `account_closed`. | Compila il modulo usando il numero di conto `111111113` e il BSB `000000`. | | Bancontact, EPS, iDEAL e Przelewy24 | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | #### Voucher | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Il tuo cliente paga con voucher Boleto oppure OXXO. | Seleziona Boleto oppure OXXO come modalità di pagamento e invia il pagamento. Chiudi la finestra di dialogo visualizzata. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ## Optional: Creare prodotti e prezzi Prima di creare una sessione di Checkout, puoi creare *Prodotti* (Products represent what your business sells—whether that's a good or a service) e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) fin dall’inizio. Utilizza prodotti per rappresentare diversi beni fisici o livelli di servizio, e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) per rappresentare i prezzi di ciascun prodotto. Puoi [Organizzare la tua Sessione di Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) per accettare mance e donazioni, o vendere i prodotti e i servizi a pagamento che desideri. Ad esempio, puoi creare una T-shirt come prodotto con un prezzo di 20 USD. In questo modo puoi aggiornare e aggiungere prezzi senza dover modificare le informazioni dei prodotti sottostanti. Puoi creare prodotti e prezzi con la Dashboard o l’API di Stripe. Ulteriori informazioni su [come funzionano prodotti e prezzi](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API L’API richiede solo un `name` per creare un [prodotto](https://docs.stripe.com/api/products.md). Checkout mostra `name`, `description` e `images` del prodotto che fornisci. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Poi crea un oggetto [Price](https://docs.stripe.com/api/prices.md) per definire quanto far pagare il prodotto, comprensivo sia del costo del prodotto sia della valuta da utilizzare. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia in modalità live i prodotti creati in una sandbox in modo tale da non doverli ricreare. Nella vista delle informazioni sul prodotto della Dashboard, fai clic su **Copia in modalità live** nell’angolo in alto a destra. Puoi farlo solo una volta per ogni prodotto creato in una sandbox. I successivi aggiornamenti al prodotto di test non verranno riportati nel prodotto live. Per avere la certezza di trovarti in una sandbox, fai clic su **Sandbox** nel selettore degli account della Dashboard. Poi definisci gli articoli che vuoi vendere. Per creare un nuovo prodotto e il relativo prezzo: - Vai alla sezione [Prodotti](https://dashboard.stripe.com/test/products) nella Dashboard. - Fai clic su **Aggiungi prodotto**. - Seleziona **Una tantum** per impostare il prezzo. Checkout mostra il nome, la descrizione e le immagini del prodotto che fornisci. Ogni prezzo che crei ha un ID. Quando crei una sessione di completamento della transazione, fai riferimento all’ID del prezzo e alla quantità. Se vendi in più valute, imposta il tuo prezzo *multi-currency* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Il completamento della transazione [determina la valuta locale del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) in automatico e presenta quella valuta, se il prezzo la supporta. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Precompilare i dati dei clienti [Lato server] Se hai già raccolto l’indirizzo email del cliente e vuoi che venga precompilato nella sessione di Checkout, specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) durante la creazione di una sessione di Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "customer_email=customer@example.com" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Salvare i dati del metodo di pagamento Scopri come [accettare un pagamento e salvare i dati di pagamento del cliente](https://docs.stripe.com/payments/save-during-payment.md) per acquisti futuri. ## Optional: Ascoltare le modifiche alla sessione di Checkout ### Ascoltare le modifiche alla sessione di Checkout Puoi ascoltare le modifiche alla [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions.md) aggiungendo un listener di eventi sull’evento '`change` con [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event). #### HTML + JS ```javascript checkout = stripe.initCheckoutElementsSdk({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckout } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'success') { checkoutState.checkout.on('change', (session) => { // Handle changes to the checkout session }); } }; ``` ## Optional: Raccogliere gli indirizzi di fatturazione e di spedizione ## Raccogliere un indirizzo di fatturazione Per impostazione predefinita, una sessione di Checkout raccoglie i dati di fatturazione minimi necessari per il pagamento tramite Payment Element. ### Utilizzo di Billing Address Element Puoi raccogliere indirizzi di fatturazione completi utilizzando Billing Address Element. Innanzitutto, specifica [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) quando crei la sessione di Checkout. #### HTML + JS Crea un elemento DOM del contenitore per montare Billing Address Element. Quindi crea un’istanza di Billing Address Element utilizzando [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore. ```html
``` ```javascript const billingAddressElement = checkout.createBillingAddressElement(); billingAddressElement.mount('#billing-address'); ``` Billing Address Element supporta le seguenti opzioni: - [contatti](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [visualizza](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) #### React Monta il componente `BillingAddressElement` all’interno del`CheckoutElementsProvider`. ```jsx import React from 'react'; import {BillingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Billing Address Element supporta le seguenti proprietà: - [contatti](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [visualizza](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) ### Utilizzo di un modulo personalizzato Puoi creare un modulo personalizzato per raccogliere gli indirizzi di fatturazione. - Se la tua pagina di checkout prevede una fase distinta per la raccolta dell’indirizzo prima della conferma, chiama [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) quando il cliente invia l’indirizzo. - In alternativa, puoi inviare l’indirizzo quando il cliente fa clic sul pulsante di pagamento specificando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) per [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ### Raccogliere indirizzi di fatturazione parziali Per raccogliere indirizzi di fatturazione parziali, ad esempio solo il Paese e il codice postale, specifica [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection). Quando si raccolgono indirizzi di fatturazione parziali, occorre [raccogliere gli indirizzi manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Per impostazione predefinita, Payment Element raccoglie automaticamente i dati di fatturazione minimi necessari per il pagamento. Per evitare la doppia raccolta dei dati di fatturazione, specifica [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) durante la creazione del Payment Element. Se intendi raccogliere solo un sottoinsieme di dati di fatturazione (ad esempio il nome del cliente), specifica `never` solo per i campi che intendi raccogliere autonomamente. ## Raccogliere un indirizzo di spedizione Per raccogliere l’indirizzo di spedizione di un cliente, specifica il parametro [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) quando crei la sessione di Checkout. Quando raccogli un indirizzo di spedizione, devi anche specificare i Paesi autorizzati per la spedizione. Configura la proprietà [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) con una matrice di [codici Paese ISO di due lettere](https://www.nationsonline.org/oneworld/country_code_list.htm). ### Come utilizzare Shipping Address Element Puoi raccogliere indirizzi di spedizione completi con Shipping Address Element. #### HTML + JS Crea un elemento DOM del contenitore per montare Shipping Address Element. Quindi crea un’istanza di Shipping Address Element utilizzando [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore. ```html
``` ```javascript const shippingAddressElement = checkout.createShippingAddressElement(); shippingAddressElement.mount('#shipping-address'); ``` Shipping Address Element supporta le seguenti opzioni: - [contatti](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [visualizza](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) #### React Monta il componente `ShippingAddressElement` all’interno del `CheckoutElementsProvider`. ```jsx import React from 'react'; import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Shipping Address Element supporta le seguenti proprietà: - [contatti](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [visualizza](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) ### Ascoltare le modifiche alla sessione di Checkout Puoi ascoltare le modifiche alla [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions.md) aggiungendo un listener di eventi per gestire le modifiche relative all’indirizzo. #### HTML + JS Utilizza l’[oggetto Session](https://docs.stripe.com/js/custom_checkout/session_object) per visualizzare l’importo della spedizione nel modulo di pagamento. ```html

Totals

``` ```javascript const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const subtotal = document.getElementById('subtotal'); const shipping = document.getElementById('shipping'); const total = document.getElementById('total'); checkout.on('change', (session) => { subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`; shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`; total.textContent = `Total: ${session.total.total.amount}`; }); ``` #### React Utilizza [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) per visualizzare il costo di spedizione nel modulo di checkout. ```jsx import React from 'react'; import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (

Checkout Summary

{checkoutState.type === 'success' && ( <>
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
            

Totals

              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
            
)}
) }; ``` ### Sincronizza indirizzi di spedizione e fatturazione Quando utilizzi sia l’elemento Indirizzo di fatturazione che l’elemento Indirizzo di spedizione, puoi mostrare una casella di controllo che consente ai clienti di sincronizzare i loro indirizzi di fatturazione e di spedizione. #### HTML + JS Specifica l’opzione [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) in `elementsOptions` quando inizializzi Checkout per configurare quale Address Element mostra la casella di controllo. ```javascript const checkout = stripe.initCheckoutElementsSdk({ clientSecret, elementsOptions: { syncAddressCheckbox: 'shipping', }, }); ``` #### React Specifica l’opzione [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) in `elementsOptions` al `CheckoutElementsProvider` per configurare quale Address Element mostra la casella di controllo. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Imposta il valore su `'billing'` o `'shipping'` per scegliere quale Address Element mostra la casella di controllo. Impostalo su `'none'` per nascondere la casella di controllo o lascialo vuoto per utilizzare il valore predefinito (`'billing'`). ### Usare un modulo personalizzato Puoi creare un modulo personalizzato per raccogliere gli indirizzi di spedizione. - Se la pagina di checkout prevede una fase distinta per la raccolta dell’indirizzo prima della conferma, chiama [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) quando il cliente invia l’indirizzo. - In alternativa, puoi inviare l’indirizzo quando il cliente fa clic sul pulsante di pagamento specificando [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) per [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ## Optional: Separare l'autorizzazione dall'acquisizione [Lato server] Stripe supporta i pagamenti con carta in due passaggi in modo che tu possa prima autorizzare una carta e poi acquisire i fondi in un secondo momento. Quando Stripe autorizza un pagamento, la società emittente della carta garantisce i fondi e trattiene l’importo del pagamento sulla carta del cliente. Hai quindi un certo periodo di tempo per acquisire i fondi, [a seconda della carta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Se non addebiti il pagamento prima della scadenza dell’autorizzazione, il pagamento viene annullato e la società emittente rilascia i fondi trattenuti. La separazione dell’autorizzazione dall’acquisizione è utile se devi eseguire altre operazioni tra la conferma che il cliente è in grado di pagare e la riscossione del pagamento. Ad esempio, se vendi articoli con scorte limitate, potresti dover verificare che un articolo acquistato dal cliente utilizzando Checkout sia ancora disponibile prima di addebitare il pagamento ed evadere l’acquisto. A tal fine, utilizza il seguente flusso di lavoro: 1. Conferma che Stripe abbia autorizzato il metodo di pagamento del cliente. 1. Consulta il sistema di gestione delle scorte per verificare che l’articolo sia ancora disponibile. 1. Aggiorna il sistema di gestione dell’inventario in modo che indichi che un cliente ha acquistato l’articolo. 1. Acquisisci il pagamento del cliente. 1. Fai sapere al cliente se l’acquisto è andato a buon fine nella pagina di conferma. Per indicare che vuoi separare l’autorizzazione dall’addebito, devi impostare il valore di [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) su `manual` durante la creazione della sessione di Checkout. In questo modo Stripe autorizza solo l’importo sulla carta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_intent_data[capture_method]=manual" \ -d return_url={{RETURN_URL}} \ -d ui_mode=elements ``` Per riscuotere un pagamento non addebitato, puoi utilizzare la [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o l’endpoint [capture](https://docs.stripe.com/api/payment_intents/capture.md). Per acquisire i pagamenti a livello di codice, devi accedere al PaymentIntent creato durante la sessione di Checkout, che puoi ottenere dall’oggetto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestione degli account dei clienti [Nessun codice] Consenti ai tuoi clienti di [gestire](https://docs.stripe.com/customer-management.md) il loro account condividendo un link sul tuo *portale cliente* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Il portale cliente consente ai clienti di accedere con la propria email per gestire gli abbonamenti, aggiornare le modalità di pagamento e così via. ## Optional: Evasione dell'ordine Come [ricevere una notifica a livello di codice](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) quando un cliente effettua un pagamento ## See also - [Aggiungere sconti per pagamenti una tantum](https://docs.stripe.com/payments/checkout/discounts.md?payment-ui=embedded-components) - [Riscuotere le imposte](https://docs.stripe.com/payments/checkout/taxes.md?payment-ui=embedded-components) - [Abilitare quantità di voci riga modificabili](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components) - [Aggiunta di pulsanti con un solo clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) # API Payment Intents > This is a API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=paymentintents. Crea un modulo di pagamento personalizzato utilizzando [Stripe Elements](https://docs.stripe.com/payments/elements.md) e l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Scopri come questa integrazione [si differenzia dagli altri tipi di integrazione di Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). L’API Payment Intents è un’API di livello inferiore che puoi utilizzare per creare il tuo flusso di checkout o pagamenti, ma richiede una quantità significativamente maggiore di codice e una manutenzione continua. Per la maggior parte delle integrazioni, consigliamo [Payment Element con Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md), poiché copre flussi di pagamento simili a quelli di Payment Intents. Scopri di più su quando utilizzare [Checkout Sessions invece di PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Il codice lato client e lato server crea un modulo di pagamento che accetta vari metodi di pagamento. #### Sforzo di integrazione Complexity: 4/5 #### Tipo di integrazione Combina i componenti dell’interfaccia utente in un flusso di pagamento personalizzato #### Personalizzazione dell'interfaccia utente Personalizzazione a livello CSS con l’[ API Appearance ](https://docs.stripe.com/elements/appearance-api.md) > #### Vuoi utilizzare Stripe Tax, sconti, spedizioni o la conversione di valuta? > > Stripe dispone di un’integrazione Payment Element che gestisce per tuo conto tasse, sconti, spedizioni e conversioni di valuta. Vedi [Creazione di una pagina di completamento della transazione](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) per saperne di più. ## 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] > Se vuoi presentare Payment Element senza prima creare un PaymentIntent, consulta la sezione [Raccogliere i dati di pagamento prima di creare un intento](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). L’oggetto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) rappresenta la tua intenzione di riscuotere un pagamento da un cliente e tiene traccia dei tentativi di addebito e delle modifiche di stato durante l’intera procedura di pagamento. Panoramica generale dell'integrazione di pagamento descritta da questo documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment) ### Creare il PaymentIntent Crea un PaymentIntent sul tuo server con un [importo](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) e una [valuta](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Nell’ultima versione dell’API, specificare il parametro `automatic_payment_methods` è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita. Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina il reindirizzamento ai metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Stripe utilizza le tue [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods) per visualizzare i metodi di pagamento che hai abilitato. Per vedere come appaiono i tuoi metodi di pagamento ai clienti, inserisci un ID transazione o imposta un importo ordine e una valuta nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Per sostituire i metodi di pagamento, elenca manualmente quelli che vuoi abilitare utilizzando l’attributo [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` > Decidi sempre quanto addebitare sul lato server, che è un ambiente sicuro, anziché sul client. In questo modo impedisci ai client malintenzionati di scegliere un proprio prezzo. ### 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 ``` ## Acquisire i dati di pagamento [Lato client] Raccogli i dati di pagamento sul client con [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element è un componente di interfaccia utente preintegrato che semplifica la raccolta dei dati di pagamento per vari metodi di pagamento. Payment Element contiene un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. Evita di inserire Payment Element all’interno di un altro iframe, perché alcuni metodi di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento. Se scegli di utilizzare un iframe e desideri accettare Apple Pay o Google Pay, l’iframe deve avere l’attributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) impostato su `"payment *"`. Affinché l’integrazione funzioni, l’indirizzo della pagina di checkout deve iniziare con `https://` rather anziché con `http://` for. Puoi testare l’integrazione senza usare HTTPS, ma ricorda di [abilitarlo](https://docs.stripe.com/security/guide.md#tls) quando sarà tutto pronto per accettare i pagamenti in modalità live. #### HTML + JS ### Configurare Stripe.js Payment Element è automaticamente disponibile come funzione di Stripe.js. Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo all’oggetto `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per mantenere la conformità alle norme PCI. Non includere lo script in un pacchetto e non ospitarne una copia personale. ```html Checkout ``` Crea un’istanza di Stripe con il seguente JavaScript nella pagina di pagamento: ```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('<>'); ``` ### Aggiungere Payment Element alla pagina di pagamento Payment Element deve avere uno spazio dedicato nella pagina di pagamento. Crea un nodo DOM (contenitore) vuoto con ID univoco nel modulo di pagamento: ```html
``` Dopo il caricamento del modulo precedente, crea un’istanza di Payment Element e montala sul nodo DOM del contenitore. Specifica la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del passaggio precedente in `options` quando crei l’istanza di [Elements](https://docs.stripe.com/js/elements_object/create): Gestisci la chiave privata client con attenzione in quanto può effettuare l’addebito. Non devi registrarla, inserirla negli URL né mostrarla a nessuno se non al cliente. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurare Stripe.js 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 ``` ### Aggiungere e configurare il provider Elements alla pagina di pagamento Per utilizzare il componente Payment Element, includi il componente della pagina di pagamento in un [provider Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Chiama `loadStripe` con la chiave pubblicabile e specifica la `Promise` restituita nel provider `Elements`. Specifica anche la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dal passaggio precedente al provider `Elements` come `options`. ```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('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Aggiungere Payment Element Utilizza il componente `PaymentElement` per creare il modulo: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Stripe Elements è un insieme di componenti dell’interfaccia utente preintegrati. Per personalizzare ulteriormente il modulo o raccogliere altre informazioni sul cliente, consulta la [documentazione di Elements](https://docs.stripe.com/payments/elements.md). Il Payment Element visualizza un modulo dinamico che consente al cliente di scegliere una modalità di pagamento. Per ogni modalità di pagamento, il modulo richiede automaticamente al cliente di inserire tutti i dati di pagamento necessari. ### Personalizza l’aspetto Personalizza Payment Element in base al design del tuo sito specificando l’[oggetto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) in `options` al momento della creazione del provider `Elements`. ### Raccogli indirizzi By default, the Payment Element only collects the necessary billing address details. Some behavior, such as [calculating tax](https://docs.stripe.com/api/tax/calculations/create.md) or entering shipping details, requires your customer’s full address. You can: - Utilizza [Address Element](https://docs.stripe.com/elements/address-element.md) per sfruttare le funzioni di completamento automatico e localizzazione per raccogliere l’indirizzo completo dei tuoi clienti. Ciò contribuisce a garantire il calcolo più accurato delle imposte. - Raccogli i dettagli dell’indirizzo utilizzando il tuo modulo personalizzato. ### Richiedi il token esercente di Apple Pay Se hai configurato la tua integrazione per [accettare pagamenti Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), ti consigliamo di configurare l’interfaccia Apple Pay in modo che restituisca un token esercente per abilitare le transazioni avviate dall’esercente (MIT). [Richiedi il tipo di token esercente pertinente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) in Payment Element. ## Optional: Salva e recupera le modalità di pagamento del cliente Puoi configurare Payment Element per salvare i metodi di pagamento del cliente per usi futuri. Questa sezione mostra come integrare la [funzione dei metodi di pagamento salvate](https://docs.stripe.com/payments/save-customer-payment-methods.md), che consente a Payment Element di: - Richiedere agli acquirenti il consenso per il salvataggio di un metodo di pagamento - Salva le modalità di pagamento quando gli acquirenti forniscono il consenso - Mostra le modalità di pagamento salvate agli acquirenti per gli acquisti futuri - [Aggiorna automaticamente le carte smarrite o scadute](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) quando gli acquirenti le sostituiscono ![Payment Element e una casella di controllo del metodo di pagamento salvato](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Salva i metodi di pagamento. ![Payment Element con un metodo di pagamento salvato selezionato](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Riutilizza un metodo di pagamento salvato in precedenza. ### Abilita il salvataggio del metodo di pagamento in Payment Element Quando crei un [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) sul server, crea anche una [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) fornendo l’[ID cliente](https://docs.stripe.com/api/customers/object.md#customer_object-id) e abilitando il componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) per la tua sessione. Configura le [funzionalità](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) dei metodi di pagamento salvati che vuoi abilitare. Ad esempio, abilitando [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save), viene visualizzata una casella di controllo che invita i clienti a salvare i dati di pagamento per usi futuri. Puoi specificare `setup_future_usage` in una PaymentIntent o in una sessione di Checkout per ignorare il comportamento predefinito per il salvataggio dei metodi di pagamento. In questo modo, salvi automaticamente il metodo di pagamento per uso futuro, anche se il cliente non sceglie esplicitamente di salvarlo. > Se intendi specificare `setup_future_usage`, evita di impostare `payment_method_save_usage` nella stessa transazione di pagamento perché questo causa un errore di integrazione. #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-intent-and-customer-session' do intent = Stripe::PaymentIntent.create({ amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = Stripe::CustomerSession.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` La tua istanza Elements utilizza la *chiave privata client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) della CustomerSession per accedere ai metodi di pagamento salvati del cliente. [Gestisci gli errori](https://docs.stripe.com/error-handling.md) correttamente quando crei l’oggetto CustomerSession. Se si verifica un errore, non devi fornire la chiave privata client della CustomerSession all’istanza Elements, in quanto è facoltativa. Crea l’istanza Elements utilizzando le chiavi private client sia per PaymentIntent che per CustomerSession. Poi utilizza questa istanza di Elements per creare un Payment Element. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` > Se permetti agli acquirenti di rimuovere i metodi di pagamento salvati abilitando [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove), ci saranno effetti sugli abbonamenti che dipendono da tale metodo di pagamento. La rimozione del metodo di pagamento scollega il [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) dal [cliente](https://docs.stripe.com/api/customers.md). Quando confermi il PaymentIntent, Stripe.js configura automaticamente l’impostazione [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sul PaymentIntent e [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sul PaymentMethod, a condizione che il cliente abbia selezionato la casella per salvare i propri dati di pagamento. ### Imporre la nuova raccolta del CVC Facoltativamente, specifica `require_cvc_recollection` [quando crei il PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) per imporre la nuova raccolta del CVC quando un cliente paga con una carta. ### Rileva la selezione di una modalità di pagamento salvata Quando viene selezionata una modalità di pagamento salvata, per controllare i contenuti dinamici ascolta l’evento `change` del Payment Element, che viene popolato con la modalità di pagamento selezionata. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Optional: Link nella pagina di pagamento [Lato client] Consenti ai clienti di pagare più rapidamente utilizzando [Link](https://docs.stripe.com/payments/link.md) in [Payment Element](https://docs.stripe.com/payments/payment-element.md). È possibile compilare automaticamente le informazioni per qualsiasi cliente connesso che già utilizza Link, indipendentemente dal fatto che abbia inizialmente salvato le proprie informazioni in Link con un’altra attività. L’integrazione predefinita di Payment Element include un avviso di Link sul modulo della carta. Per gestire Link in Payment Element, vai alle [impostazioni del metodo di pagamento](https://dashboard.stripe.com/settings/payment_methods). ![Esegui l'autenticazione o l'iscrizione a Link direttamente nel Payment Element durante il pagamento](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Raccogli l’indirizzo e-mail del cliente per l’autenticazione o la registrazione su Link ### Opzioni di integrazione Esistono due modi per integrare Link con il Payment Element. Tra questi, Stripe consiglia di specificare un indirizzo email del cliente nel Payment Element (se disponibile). Ricorda di considerare come funziona la procedura di pagamento quando decidi tra queste opzioni: | Opzione di integrazione | Flusso di pagamento | Descrizione | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Specifica un indirizzo email del cliente in Payment Element (Recommended) | - Il cliente inserisce il proprio indirizzo email prima di raggiungere la pagina di pagamento (in una precedente fase di creazione dell’account, ad esempio). - Preferisci utilizzare il campo di inserimento dell’indirizzo email. | Specifica sistematicamente l’indirizzo email del cliente nel Payment Element. In questo scenario, un cliente effettua l’autenticazione a Link direttamente tramite il modulo di pagamento e non da un componente dell’interfaccia utente separato. | | Raccogliere l’indirizzo e-mail del cliente in Payment Element | - I tuoi clienti possono scegliere di inserire il loro indirizzo email ed effettuano l’autenticazione o l’iscrizione a Link direttamente nel Payment Element durante il pagamento. - Non è richiesta alcuna modifica del codice. | Se un cliente non si è iscritto a Link e sceglie un metodo di pagamento supportato nel Payment Element, gli viene richiesto di salvare i propri dati tramite Link. Per coloro che si sono già iscritti, Link compila automaticamente le informazioni di pagamento. | Utilizza i [valori predefiniti](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) per specificare un indirizzo email di un cliente in Payment Element. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Per ulteriori informazioni, leggi come [creare una pagina di checkout personalizzata che includa ](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Recuperare gli aggiornamenti dal server [Lato client] Una volta visualizzato Payment Element, potresti aggiornare gli attributi sul PaymentIntent, come l’[importo](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (ad es. per i codici sconto o costi di spedizione). Puoi [aggiornare il PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) sul tuo server e poi chiamare [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) per vedere il nuovo importo in Payment Element. Questo esempio mostra come creare l’endpoint del server che aggiorna l’importo sul PaymentIntent: #### Ruby ```ruby get '/update' do intent = Stripe::PaymentIntent.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Questo esempio mostra come aggiornare l’interfaccia utente in modo da vedere queste modifiche lato client: ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Inviare il pagamento a Stripe [Lato client] Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) per completare il pagamento con i dati di Payment Element. Fornisci a questa funzione un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) per indicare dove Stripe deve reindirizzare l’utente dopo il completamento del pagamento. L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, prima di essere reindirizzato al `return_url`. In caso di esito positivo, i pagamenti con carta vengono immediatamente reindirizzati al `return_url`. Se vuoi impedire il reindirizzamento per i pagamenti con carta una volta completato il pagamento, puoi impostare il [reindirizzamento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) su `if_required`. In questo modo vengono reindirizzati solo i clienti che utilizzano metodi di pagamento basati sul reindirizzamento. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = 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`. } }); ``` #### React Per chiamare [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) dal componente del modulo di pagamento, utilizza 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 utilizzare i componenti di classe tradizionali anziché gli hook, puoi utilizzare un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(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`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Assicurati che `return_url` corrisponda a una pagina del tuo sito web che fornisce lo stato del pagamento. Quando Stripe reindirizza il cliente a `return_url`, fornisce i seguenti parametri di ricerca dell’URL: | 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`. | > Se disponi di strumenti che tracciano la sessione del browser del cliente, potresti aver bisogno di aggiungere il dominio `stripe.com` all’elenco di esclusione dei referrer. I reindirizzamenti fanno sì che alcuni strumenti creino nuove sessioni, il che ti impedisce di tracciare la sessione completa. Utilizza uno dei parametri di ricerca per recuperare il PaymentIntent. Controlla lo [stato del PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) per decidere cosa mostrare ai tuoi clienti. Quando specifichi il `return_url`, puoi anche aggiungere i tuoi parametri di ricerca che verranno conservati durante la procedura di reindirizzamento. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## 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 lo [strumento webhook Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere questi eventi ed eseguire azioni come l’invio di una email per la conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione. Ascolta questi eventi invece di attendere una chiamata di ritorno dal client. Sul client, il cliente potrebbe chiudere la finestra del browser o uscire dall’app prima dell’esecuzione della chiamata di ritorno e i client malintenzionati potrebbero manipolare la risposta. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare [diversi tipi di modalità di pagamento](https://stripe.com/payments/payment-methods-guide) con una sola integrazione. Oltre alla gestione dell’evento `payment_intent.succeeded`, è consigliabile gestire altri eventi durante la riscossione di pagamenti tramite Payment Element: | Evento | Descrizione | Azione | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Inviato quando un cliente ha disposto 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.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Inviato quando un cliente ha correttamente disposto un pagamento che non è stato ancora completato. Questo evento viene di solito inviato quando il cliente dispone un addebito bancario. Sarà poi seguito da un evento `payment_intent.succeeded` o da un evento `payment_intent.payment_failed`. | Invia al cliente la conferma di un ordine che indica il pagamento in sospeso. Per i beni digitali, potresti voler evadere l’ordine senza attendere il completamento del pagamento. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Inviato quando il cliente ha tentato un pagamento che non è andato a buon fine. | Se un pagamento passa da `processing` a `payment_failed`, offri al cliente un altro tentativo di pagamento. | ## Esegui il test della tua integrazione Per testare l’integrazione dei pagamenti personalizzati: 1. Crea un Payment Intent e recupera la chiave privata client. 1. Compila i dettagli di pagamento con una delle modalità indicate nella tabella di seguito. - Inserisci una data di scadenza futura per la carta. - Inserisci un numero di 3 cifre per il CVC. - Inserisci un qualsiasi codice postale. 1. Invia il pagamento a Stripe. Verrai reindirizzato al tuo `return_url`. 1. Vai alla Dashboard e cerca il pagamento nella [pagina Transazioni](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se il pagamento è andato a buon fine, lo vedrai nell’elenco. 1. Fai clic sul pagamento per visualizzare ulteriori dettagli, come i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine. Scopri di più su come [testare la tua integrazione](https://docs.stripe.com/testing.md). #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Wallet | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Il tuo cliente paga correttamente usando un metodo di pagamento con reindirizzamento e [notifica immediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Addebito diretto BECS | Il tuo cliente paga correttamente con addebito diretto BECS. | Compila il modulo usando il numero di conto `900123456` e BSB `000000`. Il PaymentIntent confermato passerà inizialmente allo stato `processing` e, 3 minuti dopo, allo stato `succeeded`. | | Addebito diretto BECS | Il pagamento del tuo cliente non va a buon fine e restituisce un codice di errore `account_closed`. | Compila il modulo usando il numero di conto `111111113` e il BSB `000000`. | | Bancontact, EPS, iDEAL e Przelewy24 | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | #### Voucher | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Il tuo cliente paga con voucher Boleto oppure OXXO. | Seleziona Boleto oppure OXXO come modalità di pagamento e invia il pagamento. Chiudi la finestra di dialogo visualizzata. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ## Optional: Aggiungere altre modalità di pagamento Payment Element [supporta molti metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) per impostazione predefinita. Devi adottare misure aggiuntive per attivare e visualizzare alcuni metodi di pagamento. ### Affirm Per iniziare a usare Affirm, devi abilitarlo nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Quando crei un PaymentIntent con il metodo di pagamento Affirm, devi specificare un [indirizzo di spedizione](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Questo esempio suggerisce di indicare i dati relativi alla spedizione sul client dopo che il cliente ha [selezionato il metodo di pagamento](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Scopri ulteriori dettagli sull’utilizzo di [Affirm](https://docs.stripe.com/payments/affirm.md) con Stripe. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point is reached if there's an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) setErrorMessage(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`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ) }; export default CheckoutForm; ``` #### Testare Affirm Scopri come testare diversi scenari utilizzando la tabella seguente: | Scenario | Come eseguire il test | | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | Il tuo cliente paga correttamente con Affirm. | Compila il modulo (assicurati di inserire un indirizzo di spedizione) e autentica il pagamento. | | Il cliente non riesce a eseguire l’autenticazione con la pagina di reindirizzamento di Affirm. | Compila il modulo e fai clic su **Interrompi pagamento di test** nella pagina di reindirizzamento. | ### Afterpay (Clearpay) Quando crei un PaymentIntent con il metodo di pagamento Afterpay, devi specificare un [indirizzo di spedizione](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Scopri ulteriori dettagli sull’utilizzo di [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) con Stripe. Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina il reindirizzamento ai metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Nell’esempio che segue viene utilizzato l’attributo [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled), ma puoi elencare `afterpay_clearpay` con i [tipi di metodi di pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Nell’ultima versione dell’API, specificare il parametro `automatic_payment_methods` è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita. Indipendentemente dall’opzione scelta, assicurati di abilitare Afterpay Clearpay nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "shipping[name]=Jenny Rosen" \ -d "shipping[address][line1]=1234 Main Street" \ -d "shipping[address][city]=San Francisco" \ -d "shipping[address][state]=CA" \ -d "shipping[address][country]=US" \ -d "shipping[address][postal_code]=94111" ``` #### Testare Afterpay (Clearpay) Scopri come testare diversi scenari utilizzando la tabella seguente: | Scenario | Come eseguire il test | | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | | Il tuo cliente paga correttamente con Afterpay. | Compila il modulo (assicurati di inserire un indirizzo di spedizione) e autentica il pagamento. | | Il cliente non riesce a eseguire l’autenticazione con la pagina di reindirizzamento di Afterpay. | Compila il modulo e fai clic su **Interrompi pagamento di test** nella pagina di reindirizzamento. | ### Apple Pay e Google Pay Quando [abiliti i pagamenti con carta](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), mostriamo Apple Pay e Google Pay per i clienti il cui ambiente soddisfa le [condizioni di visualizzazione del wallet](https://docs.stripe.com/testing/wallets.md). Per accettare pagamenti da questi wallet, devi anche: - Abilitali nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods). Apple Pay è abilitato per impostazione predefinita. - Offri la tua applicazione su HTTPS in fase di sviluppo e produzione. - [Registra il tuo dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - [Recupera aggiornamenti dal server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) se aggiorni l’importo di un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) per mantenere sincronizzato il metodo di pagamento del wallet. > #### Test regionali > > Stripe Elements non supporta Google Pay o Apple Pay per gli account e i clienti Stripe in India. Pertanto, non è possibile testare l’integrazione con Google Pay o Apple Pay se l’indirizzo IP del tester è in India, anche se l’account Stripe si trova al di fuori dell’India. Ulteriori informazioni sull’utilizzo di [Apple Pay](https://docs.stripe.com/apple-pay.md) e [Google Pay](https://docs.stripe.com/google-pay.md) con Stripe. ### Addebito diretto ACH Quando usi Payment Element con l’addebito diretto ACH come modalità di pagamento, segui questa procedura: 1. Crea un [oggetto Customer](https://docs.stripe.com/api/customers.md). ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` 1. Specifica l’ID cliente durante la creazione del `PaymentIntent`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d setup_future_usage=off_session \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]=us_bank_account" ``` 1. Seleziona un [metodo di verifica](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method). Quando utilizzi la modalità di pagamento con addebito diretto ACH con Payment Element, puoi selezionare solo `automatic` o `instant`. Ulteriori informazioni sull’utilizzo dell’[Addebito diretto ACH](https://docs.stripe.com/payments/ach-direct-debit.md) con Stripe. #### Testare l’addebito diretto ACH | Scenario | Come eseguire il test | | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Il tuo cliente paga correttamente con un conto bancario statunitense usando la verifica istantanea. | Seleziona **Conto bancario statunitense** e compila il modulo. Fai clic sull’istituto di test. Segui le istruzioni nella finestra modale per collegare il tuo conto bancario. Fai clic sul pulsante di pagamento. | | Il tuo cliente paga correttamente con un conto bancario statunitense usando i microdepositi. | Seleziona **Conto bancario statunitense** e compila il modulo. Fai clic su **Inserisci le coordinate bancarie manualmente**. Segui le istruzioni nella finestra modale per collegare il tuo conto bancario. Puoi usare questi [numeri di conto di test](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Fai clic sul pulsante di pagamento. | | Il cliente non riesce a completare la procedura di collegamento del conto bancario. | Seleziona **Conto bancario statunitense** e fai clic sull’istituto di test oppure su **Inserisci le coordinate bancarie manualmente**. Chiudi la finestra modale senza completare l’operazione. | ### BLIK Quando si usa Payment Element con BLIK, l’utente può chiudere la finestra modale richiedendo di autorizzare il pagamento nella propria app bancaria. In tal modo l’utente verrà reindirizzato al tuo `return_url` e non tornerà alla pagina di pagamento. Scopri ulteriori dettagli sull’utilizzo di [BLIK](https://docs.stripe.com/payments/blik.md) con Stripe. Per gestire la chiusura della finestra modali da parte degli utenti, nel gestore lato server del tuo `return_url`, controlla la voce `status` del Payment Intent per sapere se è andato a buon fine, ovvero `succeeded`, o se sono necessarie ulteriori operazioni, ovvero `requires_action`, (vale a dire che l’utente ha chiuso la finestra modale senza autorizzazione), e comportati di conseguenza. ### Modalità di pagamento con codice QR Quando si usa Payment Element con una modalità di pagamento basata su codice QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), l’utente può chiudere la finestra modale del codice QR. In tal modo l’utente verrà reindirizzato al tuo `return_url` e non tornerà alla pagina di pagamento. Per gestire la chiusura delle finestre modali dei codici QR da parte dei clienti, nel gestore lato server del tuo `return_url`, controlla la voce `status` del Payment Intent per sapere se è andato a buon fine, ovvero `succeeded`, o se sono necessarie ulteriori operazioni, ovvero `requires_action`, (vale a dire che l’utente ha chiuso la finestra modale senza effettuare il pagamento), e comportati di conseguenza. In alternativa, impedisci il reindirizzamento automatico al tuo `return_url` specificando un parametro facoltativo avanzato [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), che blocca il reindirizzamento alla chiusura della finestra modale di un codice QR. ### Cash App Pay Payment Element restituisce un modulo dinamico in modo diverso nel web desktop o mobile poiché utilizza diversi metodi di autenticazione del cliente. Scopri ulteriori dettagli sull’utilizzo di [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) con Stripe. #### Elemento dell'app web per dispositivi mobili Cash App Pay è un metodo di pagamento con reindirizzamento su web mobile. Reindirizza il cliente a Cash App in modalità live o a una pagina di pagamento di test in un ambiente di test. Una volta completato il pagamento, il cliente viene reindirizzato al `return_url`, indipendentemente dal fatto che tu abbia impostato `redirect=if_required`. #### Elemento dell'app web per desktop Cash App Pay è una modalità di pagamento con codice QR per web desktop, in cui Payment Element restituisce una finestra modale con codice QR. Il cliente deve eseguire la scansione del codice QR tramite un’app di riconoscimento dei codici QR o attraverso l’app mobile Cash App. In modalità live, reindirizza il cliente al `return_url` non appena viene reindirizzato a Cash App. In ambienti di test, possono approvare o rifiutare il pagamento prima di essere reindirizzati al `return_url`. I clienti possono anche chiudere la finestra modale del codice QR prima di completare il pagamento, attivando così una pagina di reindirizzamento al tuo `return_url`. Assicurati che `return_url` corrisponda a una pagina presente sul tuo sito web per controllare lo `status` di Payment Intent, che può essere `succeeded`, `failed`, o `requires_action` (ad esempio, il cliente ha chiuso la finestra modale senza eseguire la scansione del codice QR). In alternativa, impedisci il reindirizzamento automatico al tuo `return_url` specificando un parametro facoltativo avanzato `redirect=if_required`, che blocca il reindirizzamento alla chiusura della finestra modale di un codice QR. ### PayPal Per utilizzare PayPal, assicurati di avere un [dominio registrato](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). ## 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 - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Configurare pagamenti futuri](https://docs.stripe.com/payments/save-and-reuse.md) - [Salvare i dati di pagamento durante il pagamento](https://docs.stripe.com/payments/save-during-payment.md) - [Calcolare l’imposta sulle vendite, la GST e l’IVA nel flusso di pagamento](https://docs.stripe.com/tax/custom.md) # Integrazione in-app per iOS > This is a Integrazione in-app per iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=ios. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integra l’interfaccia utente per i pagamenti preintegrata di Stripe nella procedura di pagamento della tua app iOS con la classe [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Consulta il nostro esempio di integrazione [su GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example). ## Configurare Stripe [Lato server] [Lato client] Innanzitutto, devi creare un account Stripe. [Registrati ora](https://dashboard.stripe.com/register). ### Lato server Per questa integrazione sono necessari endpoint sul server che comunicano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server: #### 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' ``` ### Lato client L’[SDK per iOS di Stripe](https://github.com/stripe/stripe-ios) è open source, [completamente documentato](https://stripe.dev/stripe-ios/index.html) e compatibile con le app che supportano iOS 13 o versioni successive. #### Swift Package Manager Per installare l’SDK, segui questi passaggi: 1. In Xcode, seleziona **File** > **Aggiungi dipendenze pacchetto…** e inserisci `https://github.com/stripe/stripe-ios-spm` come URL repository. 1. Seleziona il numero dell’ultima versione dalla nostra [pagina delle release](https://github.com/stripe/stripe-ios/releases). 1. Aggiungi il prodotto **StripePaymentSheet** al [target della tua app](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Se non l’hai ancora fatto, installa la versione più recente di [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Se non hai un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), esegui il seguente comando per crearne uno: ```bash pod init ``` 1. Aggiungi questa riga al tuo `Podfile`: ```podfile pod 'StripePaymentSheet' ``` 1. Esegui il seguente comando: ```bash pod install ``` 1. Ricordati di utilizzare d’ora in poi il file `.xcworkspace` per aprire il progetto in Xcode, anziché il file `.xcodeproj` file. 1. In futuro, per eseguire l’aggiornamento alla versione più recente dell’SDK, esegui questo comando: ```bash pod update StripePaymentSheet ``` #### Carthage 1. Se non l’hai ancora fatto, installa la versione più recente di [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Aggiungi questa riga al tuo `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Segui le [istruzioni per l’installazione di Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Assicurati di integrare tutti i framework necessari elencati [qui](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. In futuro, per eseguire l’aggiornamento alla versione più recente del nostro SDK, esegui il seguente comando: ```bash carthage update stripe-ios --platform ios ``` #### Framework manuale 1. Vai alla [pagina delle versioni di GitHub](https://github.com/stripe/stripe-ios/releases/latest) e scarica e decomprimi **Stripe.xcframework.zip**. 1. Trascina **StripePaymentSheet.xcframework** nella sezione **Embedded Binaries** (File binari incorporati) delle impostazioni **General** (Generali) nel tuo progetto Xcode. Assicurati che sia selezionato **Copy items if needed** (Copia elementi se necessario). 1. Ripeti il passaggio 2 per tutti i framework necessari elencati [qui](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. In futuro, per eseguire l’aggiornamento alla versione più recente del nostro SDK, ripeti i passaggi 1-3. > Per ulteriori informazioni sulla versione più recente e su quelle precedenti dell’SDK, consulta la pagina [Versioni](https://github.com/stripe/stripe-ios/releases) su GitHub. Per ricevere notifiche quando viene pubblicata una nuova versione, [guarda le versioni](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repository. ## Abilitare modalità di pagamento Visualizza le [impostazioni delle modalità di pagamento](https://dashboard.stripe.com/settings/payment_methods) e abilita le modalità di pagamento che vuoi accettare. Per creare un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) è necessario che sia abilitata almeno una modalità di pagamento. Per impostazione predefinita, Stripe abilita le carte e altri metodi di pagamento tra i più utilizzati per aiutarti a raggiungere più clienti. Detto ciò, ti consigliamo di attivare ulteriori metodi pertinenti per la tua attività e i tuoi clienti. Per ulteriori informazioni sul supporto di prodotti e metodi di pagamento, consulta la sezione [Supporto per il metodo di pagamento](https://docs.stripe.com/payments/payment-methods/payment-method-support.md). Per le commissioni consulta la nostra [pagina delle tariffe](https://stripe.com/pricing/local-payment-methods). ## Aggiungere un endpoint [Lato server] > #### Nota > > Per visualizzare il PaymentSheet prima di creare un PaymentIntent, consulta [Raccogliere i dati di pagamento prima di creare un intento](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). 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 integrazione utilizza tre oggetti dell’API Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utilizza 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 la procedura. 1. (Optional) [Customer](https://docs.stripe.com/api/customers.md): per configurare un metodo di pagamento per pagamenti futuri, devi associarlo a un oggetto *Customer* (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 cliente crea un account con la tua attività. Se il cliente effettua il pagamento come ospite, puoi creare un oggetto Customer prima del pagamento e associarlo successivamente alla tua rappresentazione interna dell’account del cliente. 1. (Facoltativo) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): l’oggetto Customer contiene informazioni sensibili che non possono essere recuperate direttamente da un’app. Una CustomerSession concede all’SDK l’accesso temporaneo all’oggetto Customer e fornisce altre opzioni di configurazione. Visualizza un elenco completo delle [opzioni di configurazione](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Se non salvi mai le carte in un oggetto Customer e non permetti ai clienti che ritornano di riutilizzare le carte salvate, puoi omettere gli oggetti Customer e CustomerSession nella tua integrazione. Per motivi di sicurezza, la tua app non può creare questi oggetti. Aggiungi invece un endpoint sul tuo server per: 1. Recuperare l’oggetto Customer o ne crea uno nuovo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) per il cliente. 1. Crea un PaymentIntent con i parametri [importo](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [valuta](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) e [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Restituisce la *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)) del Payment Intent, il `client_secret` della CustomerSession, l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente e la tua [chiave pubblicabile](https://dashboard.stripe.com/apikeys) alla tua app. I metodi di pagamento mostrati ai clienti durante il completamento della transazione sono inclusi anche nel PaymentIntent. Puoi consentire a Stripe di acquisire i metodi di pagamento dalle impostazioni della Dashboard oppure puoi elencarli manualmente. Indipendentemente dall’opzione che sceglierai, ricorda che la valuta specificata nel PaymentIntent filtra il metodo di pagamento mostrato al cliente. Ad esempio, se specifichi `eur` nel PaymentIntent e hai abilitato OXXO nella Dashboard, il cliente non vedrà OXXO perché questo metodo non supporta i pagamenti in `eur`. A meno che la tua integrazione non richieda un’opzione con codice per offrire i metodi di pagamento, Stripe consiglia l’opzione automatica. Ciò è dovuto al fatto che Stripe valuta le limitazioni dei metodi di pagamento, la valuta e altri parametri per determinare l’elenco dei metodi di pagamento accettati. I metodi di pagamento che migliorano la conversione e che sono più pertinenti alla valuta e alla posizione del cliente hanno la priorità. #### Gestire i metodi di pagamento dalla Dashboard Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina la restituzione dei metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Il PaymentIntent viene creato utilizzando i metodi di pagamento configurati nella Dashboard. Se non desideri utilizzare la Dashboard o se preferisci specificare manualmente i metodi di pagamento, puoi elencarli utilizzando l’attributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Elencare manualmente i metodi di pagamento #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Ogni metodo di pagamento deve accettare la valuta specificata nel PaymentIntent e la tua attività deve avere la sede in uno dei Paesi accettati dal metodo di pagamento. Per ulteriori informazioni sulle funzionalità supportate, consulta la pagina dedicata alle [opzioni di integrazione dei metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md). ## Acquisire i dati di pagamento [Lato client] Per visualizzare Payment Element per dispositivi mobili nella schermata di pagamento, assicurati di: - Mostrare i prodotti che il cliente sta acquistando insieme all’importo totale - Utilizza [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) per raccogliere dal cliente tutti i dati di spedizione richiesti - Aggiungere un pulsante di pagamento per visualizzare l’interfaccia utente di Stripe #### UIKit Nella schermata di checkout della tua app, recupera la chiave privata client PaymentIntent, il segreto client CustomerSession, l’ID cliente e la chiave pubblicabile dall’endpoint creato nel passaggio precedente. Utilizza `STPAPIClient.shared` per impostare la tua chiave pubblicabile e inizializzare [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Quando il cliente tocca il pulsante **Checkout**, chiama `present` per aprire il PaymentSheet. Dopo che il cliente ha completato il pagamento, Stripe chiude il PaymentSheet e chiama il blocco di completamento con [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Crea un modello `ObservableObject` per la tua schermata di pagamento. Questo modello pubblica un [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) e un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Recupera il segreto client PaymentIntent, la chiave privata client CustomerSession, l’ID cliente e la chiave pubblicabile dall’endpoint creato nel passaggio precedente. Utilizza `STPAPIClient.shared` per impostare la chiave pubblicabile e inizializzare [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Aggiungi un [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) alla tua `View`. Si comporta in modo simile a un `Button` di SwiftUI, che ti consente di personalizzarlo aggiungendo una `View`. Quando tocchi il pulsante, viene visualizzato il PaymentSheet. Una volta completato il pagamento, Stripe chiude il PaymentSheet e chiama il gestore `onCompletion` con un oggetto [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Se `PaymentSheetResult` risulta `.completed`, informa l’utente (ad esempio, visualizzando una schermata di conferma d’ordine). Impostare `allowsDelayedPaymentMethods` su true consente di utilizzare i metodi di pagamento con [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification) come i conti bancari degli Stati Uniti. Per questi metodi di pagamento, lo stato finale del pagamento non è noto al completamento di `PaymentSheet`, in quanto va a buon fine o meno in un secondo momento. Se supporti questi tipi di metodi di pagamento, informa il cliente che il suo ordine è confermato e procedi all’evasione (ad esempio alla spedizione del prodotto), spedisci il suo prodotto) solo quando avrai ricevuto il pagamento. ## Configurare un URL di ritorno [Lato client] Il cliente potrebbe uscire dalla tua app per autenticarsi (ad es. in Safari o nell’app della banca). Per consentirgli di tornare automaticamente alla tua app dopo l’autenticazione, devi [configurare uno schema URL personalizzato](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) e impostare la classe AppDelegate per l’inoltro di URL all’SDK Stripe. Stripe non supporta i [link universali](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Devi inoltre impostare il [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) nel tuo oggetto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sull’URL della tua app. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## 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 lo [strumento webhook Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere questi eventi ed eseguire azioni come l’invio di una email per la conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione. Ascolta questi eventi invece di attendere una chiamata di ritorno dal client. Sul client, il cliente potrebbe chiudere la finestra del browser o uscire dall’app prima dell’esecuzione della chiamata di ritorno e i client malintenzionati potrebbero manipolare la risposta. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare [diversi tipi di modalità di pagamento](https://stripe.com/payments/payment-methods-guide) con una sola integrazione. Oltre alla gestione dell’evento `payment_intent.succeeded`, è consigliabile gestire altri eventi durante la riscossione di pagamenti tramite Payment Element: | Evento | Descrizione | Azione | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Inviato quando un cliente ha disposto 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.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Inviato quando un cliente ha correttamente disposto un pagamento che non è stato ancora completato. Questo evento viene di solito inviato quando il cliente dispone un addebito bancario. Sarà poi seguito da un evento `payment_intent.succeeded` o da un evento `payment_intent.payment_failed`. | Invia al cliente la conferma di un ordine che indica il pagamento in sospeso. Per i beni digitali, potresti voler evadere l’ordine senza attendere il completamento del pagamento. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Inviato quando il cliente ha tentato un pagamento che non è andato a buon fine. | Se un pagamento passa da `processing` a `payment_failed`, offri al cliente un altro tentativo di pagamento. | ## Testare l'integrazione #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ## Optional: Abilita Link Abilita Link nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods) per consentire ai tuoi clienti di salvare e riutilizzare in tutta sicurezza i propri dati di pagamento tramite il pulsante di checkout rapido con un solo clic di Link. ### Specificare l’indirizzo email del cliente in Mobile Payment Element Link effettua l’autenticazione di un cliente utilizzando il suo indirizzo email. Stripe consiglia di precompilare il maggior numero possibile di informazioni per semplificare la procedura di pagamento. Per precompilare il nome, l’indirizzo email e il numero di telefono del cliente, specifica una proprietà `defaultBillingDetails` con le informazioni del cliente dopo l’inizializzazione di `PaymentSheet.Configuration`. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.name = "Jenny Rosen" configuration.defaultBillingDetails.email = "jenny.rosen@example.com" configuration.defaultBillingDetails.phone = "888-888-8888" ``` ## Optional: Abilitare Apple Pay > Se nella tua schermata di pagamento è presente un **pulsante Apple Pay** dedicato, segui le istruzioni indicate nella [guida di Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) e usa `ApplePayContext` per riscuotere il pagamento tramite il pulsante Apple Pay. Puoi usare `PaymentSheet` per gestire altri metodi di pagamento. ### Registra un nuovo ID esercente Apple Ottieni un ID esercente Apple [effettuando la registrazione di un nuovo identificativo](https://developer.apple.com/account/resources/identifiers/add/merchant) sul sito web degli sviluppatori Apple. Compila il modulo con una descrizione e un identificativo. La descrizione è un promemoria per te e potrai modificarla in futuro. Stripe consiglia di utilizzare il nome dell’app come identificativo (ad esempio, `merchant.com.{{YOUR_APP_NAME}}`). ### Crea un nuovo certificato di Apple Pay Crea un certificato per la tua app per crittografare i dati di pagamento. Vai su [Impostazioni certificato iOS](https://dashboard.stripe.com/settings/ios_certificates) nella Dashboard, fai clic su **Aggiungi nuova applicazione** e segui la guida. Scarica un file con richiesta di firma certificato (CSR) per ottenere da Apple un certificato sicuro che ti consentirà di utilizzare Apple Pay. Un file CSR deve essere utilizzato per emettere un solo certificato. Se cambi il tuo ID esercente Apple, devi andare su [Impostazioni certificato iOS](https://dashboard.stripe.com/settings/ios_certificates) nella Dashboard per ottenere un nuovo CSR e un nuovo certificato. ### Effettua l’integrazione con Xcode Aggiungi la funzionalità Apple Pay alla tua app. In Xcode, apri le impostazioni di progetto, fai clic nella scheda **Signing & Capabilities** (Firma e funzionalità), poi aggiungi la funzionalità **Apple Pay**. A questo punto il sistema potrebbe chiederti di effettuare l’accesso al tuo account di sviluppatore. Seleziona l’ID esercente che hai creato e la tua app sarà pronta ad accettare Apple Pay. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Abilita la funzionalità Apple Pay in Xcode ### Aggiungi Apple Pay #### Pagamento una tantum Per aggiungere Apple Pay a PaymentSheet, imposta [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) dopo l’inizializzazione di `PaymentSheet.Configuration` con il tuo ID esercente Apple e il [codice Paese della tua attività](https://dashboard.stripe.com/settings/account). #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Pagamenti ricorrenti Per aggiungere Apple Pay a PaymentSheet, imposta [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) dopo l’inizializzazione di `PaymentSheet.Configuration` con il tuo ID esercente Apple e il [codice Paese della tua attività](https://dashboard.stripe.com/settings/account). Secondo le [linee guida di Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) per i pagamenti ricorrenti, devi impostare anche altri attributi in `PKPaymentRequest`. Aggiungi un gestore in [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) per configurare [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) con l’importo che intendi addebitare (ad esempio, 9,95 USD al mese). Puoi anche adottare i [token dell’esercente](https://developer.apple.com/apple-pay/merchant-tokens/) impostando le proprietà `recurringPaymentRequest` o `automaticReloadPaymentRequest` su `PKPaymentRequest`. Per ulteriori informazioni su come utilizzare i pagamenti ricorrenti con Apple Pay, consulta [la documentazione di PassKit di Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Monitoraggio degli ordini Per aggiungere informazioni sulla [tracciabilità degli ordini](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) in iOS 16 o versioni successive, configura un [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) nel tuo `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe chiama la tua implementazione dopo che il pagamento è stato completato, ma prima che iOS chiuda il foglio di Apple Pay. Nell’implementazione dell’`authorizationResultHandler`, recupera i dettagli dell’ordine completato dal server. Aggiungi i dettagli al [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) fornito e restituisci il risultato modificato. Per ulteriori informazioni sul monitoraggio degli ordini, consulta la [Documentazione sugli ordini in Apple Wallet](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Abilitare la scansione delle carte Per abilitare il supporto alla scansione delle carte per iOS, imposta `NSCameraUsageDescription` (**Privacy - Descrizione dell’utilizzo della fotocamera**) nel file `Info.plist` della tua applicazione e fornisci un motivo per l’accesso alla fotocamera (ad esempio, “Per scansionare le carte”). ## Optional: Abilita i pagamenti ACH Per abilitare i pagamenti con addebito ACH, includi `StripeFinancialConnections` come dipendenza per la tua app. L’[SDK per iOS di Stripe](https://github.com/stripe/stripe-ios) è open source, [completamente documentato](https://stripe.dev/stripe-ios/index.html) e compatibile con le app che supportano iOS 13 o versioni successive. #### Swift Package Manager Per installare l’SDK, segui questi passaggi: 1. In Xcode, seleziona **File** > **Aggiungi dipendenze pacchetto…** e inserisci `https://github.com/stripe/stripe-ios-spm` come URL repository. 1. Seleziona il numero dell’ultima versione dalla nostra [pagina delle release](https://github.com/stripe/stripe-ios/releases). 1. Aggiungi il prodotto **StripeFinancialConnections** al [target della tua app](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Se non l’hai ancora fatto, installa la versione più recente di [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Se non hai un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), esegui il seguente comando per crearne uno: ```bash pod init ``` 1. Aggiungi questa riga al tuo `Podfile`: ```podfile pod 'StripeFinancialConnections' ``` 1. Esegui il seguente comando: ```bash pod install ``` 1. Ricordati di utilizzare d’ora in poi il file `.xcworkspace` per aprire il progetto in Xcode, anziché il file `.xcodeproj` file. 1. In futuro, per eseguire l’aggiornamento alla versione più recente dell’SDK, esegui questo comando: ```bash pod update StripeFinancialConnections ``` #### Carthage 1. Se non l’hai ancora fatto, installa la versione più recente di [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Aggiungi questa riga al tuo `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Segui le [istruzioni per l’installazione di Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Assicurati di integrare tutti i framework necessari elencati [qui](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. In futuro, per eseguire l’aggiornamento alla versione più recente del nostro SDK, esegui il seguente comando: ```bash carthage update stripe-ios --platform ios ``` #### Framework manuale 1. Vai alla [pagina delle versioni di GitHub](https://github.com/stripe/stripe-ios/releases/latest) e scarica e decomprimi **Stripe.xcframework.zip**. 1. Trascina **StripeFinancialConnections.xcframework** nella sezione **Embedded Binaries** (File binari incorporati) delle impostazioni **General** (Generali) nel tuo progetto Xcode. Assicurati che sia selezionato **Copy items if needed** (Copia elementi se necessario). 1. Ripeti il passaggio 2 per tutti i framework necessari elencati [qui](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. In futuro, per eseguire l’aggiornamento alla versione più recente del nostro SDK, ripeti i passaggi 1-3. > Per ulteriori informazioni sulla versione più recente e su quelle precedenti dell’SDK, consulta la pagina [Versioni](https://github.com/stripe/stripe-ios/releases) su GitHub. Per ricevere notifiche quando viene pubblicata una nuova versione, [guarda le versioni](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repository. ## Optional: Personalizzare la scheda Tutte le personalizzazioni vengono configurate utilizzando l’oggetto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html). ### Aspetto Personalizza i colori, i caratteri e molto altro ancora in base all’aspetto della tua app utilizzando l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Layout del metodo di pagamento Configura il layout dei metodi di pagamento nel foglio utilizzando [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Puoi visualizzarli orizzontalmente, verticalmente o lasciare che Stripe ne ottimizzi il layout automaticamente. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic ``` ### Acquisire gli indirizzi degli utenti Acquisisci gli indirizzi di spedizione o fatturazione locali e internazionali dai tuoi clienti utilizzando il componente [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Nome visualizzato dell’esercente Specifica un nome dell’attività per il cliente impostando [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). Per impostazione predefinita, viene utilizzato il nome della tua app. #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc." ``` ### Modalità scura Il `PaymentSheet` si adatta automaticamente alle impostazioni di visualizzazione del sistema dell’utente (modalità chiara o scura). Se la tua app non supporta la modalità scura, puoi impostare lo [stile](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) sulla modalità `alwaysLight` o `alwaysDark`. ```swift var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight ``` ## Optional: Gestire la disconnessione dell'utente `PaymentSheet` memorizza localmente alcune informazioni per ricordare se un utente ha utilizzato Link in un’app. Per cancellare lo stato interno di `PaymentSheet`, chiama il metodo `PaymentSheet.resetCustomer()` quando l’utente si disconnette. ```swift import UIKit import StripePaymentSheet class MyViewController: UIViewController { @objc func didTapLogoutButton() { PaymentSheet.resetCustomer() // Other logout logic required by your app } } ``` ## Optional: Completare il pagamento nell'interfaccia utente Puoi visualizzare il Payment Sheet solo per raccogliere i dati relativi alla modalità di pagamento e chiamare una modalità `confirm` in un secondo momento per completare il pagamento nell’interfaccia utente dell’app. Questa opzione è utile se disponi di un pulsante personalizzato per l’acquisto o se occorrono passaggi aggiuntivi dopo che hai acquisito i dati di pagamento. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Completare il pagamento nell’interfaccia utente dell’app #### UIKit I seguenti passaggi ti illustrano come completare il pagamento nell’interfaccia utente della tua app. Consulta il nostro esempio di integrazione su [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift). 1. Innanzitutto, inizializza [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) invece di `PaymentSheet` e aggiorna la tua interfaccia utente con la sua proprietà `paymentOption`. Questa proprietà contiene un’immagine e un’etichetta che rappresentano la modalità di pagamento predefinita, inizialmente selezionata dal cliente. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Poi chiama `presentPaymentOptions` per raccogliere i dati relativi al pagamento. Al termine, aggiorna di nuovo la tua interfaccia utente con la proprietà `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Infine, chiama `confirm`. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI I seguenti passaggi ti illustrano come completare il pagamento nell’interfaccia utente della tua app. Consulta il nostro esempio di integrazione su [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift). 1. Innanzitutto, inizializza [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) invece di `PaymentSheet`. La sua proprietà `paymentOption` contiene un’immagine e un’etichetta che rappresentano la modalità di pagamento attualmente selezionata dal cliente, che puoi utilizzare nella tua interfaccia utente. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Utilizza [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) per includere il pulsante che determina l’apertura della scheda per raccogliere i dati di pagamento. Quando `PaymentSheet.FlowController` chiama l’argomento `onSheetDismissed`, `paymentOption` per l’istanza `PaymentSheet.FlowController` indica il metodo di pagamento selezionato al momento. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Utilizza [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) per includere il pulsante che conferma il pagamento. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Impostare `allowsDelayedPaymentMethods` su true consente di utilizzare i metodi di pagamento con [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification) come i conti bancari degli Stati Uniti. Per questi metodi di pagamento, lo stato finale del pagamento non è noto al completamento di `PaymentSheet`, in quanto va a buon fine o meno in un secondo momento. Se supporti questi tipi di metodi di pagamento, informa il cliente che il suo ordine è confermato e procedi all’evasione (ad esempio alla spedizione del prodotto), spedisci il suo prodotto) solo quando avrai ricevuto il pagamento. ## Optional: Abilita la nuova raccolta del CVC al momento della conferma Le seguenti istruzioni per raccogliere nuovamente il CVC di una carta salvata durante la conferma del PaymentIntent presuppongono che l’integrazione includa quanto segue: - Creare i PaymentIntent prima di raccogliere i dati di pagamento ### Aggiornare i parametri della creazione dell’intento Per raccogliere nuovamente il CVC alla conferma del pagamento, includi `require_cvc_recollection` durante la creazione del PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-03-25.dahlia" \ -H "Stripe-Account: 2026-03-25.dahlia" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Integrazione in-app per Android > This is a Integrazione in-app per Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=android. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) Integra l’interfaccia utente per i pagamenti preintegrata di Stripe nella procedura di pagamento della tua app Android con la classe [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html). ## Configurare Stripe [Lato server] [Lato client] Innanzitutto, devi creare un account Stripe. [Registrati ora](https://dashboard.stripe.com/register). ### Lato server Per questa integrazione sono necessari endpoint sul server che comunicano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server: #### 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' ``` ### Lato client L’[SDK per Android di Stripe](https://github.com/stripe/stripe-android) è open source e [completamente documentato](https://stripe.dev/stripe-android/). Per installare l’SDK, aggiungi `stripe-android` al blocco `dependencies` del tuo file [app/build.gradle](https://developer.android.com/studio/build/dependencies): #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.0") } ``` > Per ulteriori informazioni sulla versione più recente e su quelle precedenti dell’SDK, consulta la pagina [Releases](https://github.com/stripe/stripe-android/releases) su GitHub. Per ricevere una notifica quando viene pubblicata una nuova versione, [imposta il controllo delle versioni per il repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Abilitare modalità di pagamento Visualizza le [impostazioni delle modalità di pagamento](https://dashboard.stripe.com/settings/payment_methods) e abilita le modalità di pagamento che vuoi accettare. Per creare un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) è necessario che sia abilitata almeno una modalità di pagamento. Per impostazione predefinita, Stripe abilita le carte e altri metodi di pagamento tra i più utilizzati per aiutarti a raggiungere più clienti. Detto ciò, ti consigliamo di attivare ulteriori metodi pertinenti per la tua attività e i tuoi clienti. Per ulteriori informazioni sul supporto di prodotti e metodi di pagamento, consulta la sezione [Supporto per il metodo di pagamento](https://docs.stripe.com/payments/payment-methods/payment-method-support.md). Per le commissioni consulta la nostra [pagina delle tariffe](https://stripe.com/pricing/local-payment-methods). ## Aggiungere un endpoint [Lato server] > #### Nota > > Per visualizzare il PaymentSheet prima di creare un PaymentIntent, consulta [Raccogliere i dati di pagamento prima di creare un intento](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). 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 integrazione utilizza tre oggetti dell’API Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utilizza 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 la procedura. 1. (Optional) [Customer](https://docs.stripe.com/api/customers.md): per configurare un metodo di pagamento per pagamenti futuri, devi associarlo a un oggetto *Customer* (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 cliente crea un account con la tua attività. Se il cliente effettua il pagamento come ospite, puoi creare un oggetto Customer prima del pagamento e associarlo successivamente alla tua rappresentazione interna dell’account del cliente. 1. (Facoltativo) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): l’oggetto Customer contiene informazioni sensibili che non possono essere recuperate direttamente da un’app. Una CustomerSession concede all’SDK l’accesso temporaneo all’oggetto Customer e fornisce altre opzioni di configurazione. Visualizza un elenco completo delle [opzioni di configurazione](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Se non salvi mai le carte in un oggetto Customer e non permetti ai clienti che ritornano di riutilizzare le carte salvate, puoi omettere gli oggetti Customer e CustomerSession nella tua integrazione. Per motivi di sicurezza, la tua app non può creare questi oggetti. Aggiungi invece un endpoint sul tuo server per: 1. Recuperare l’oggetto Customer o ne crea uno nuovo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) per il cliente. 1. Crea un PaymentIntent con i parametri [importo](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [valuta](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) e [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Restituisce la *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)) del Payment Intent, il `client_secret` della CustomerSession, l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente e la tua [chiave pubblicabile](https://dashboard.stripe.com/apikeys) alla tua app. I metodi di pagamento mostrati ai clienti durante il completamento della transazione sono inclusi anche nel PaymentIntent. Puoi consentire a Stripe di acquisire i metodi di pagamento dalle impostazioni della Dashboard oppure puoi elencarli manualmente. Indipendentemente dall’opzione che sceglierai, ricorda che la valuta specificata nel PaymentIntent filtra il metodo di pagamento mostrato al cliente. Ad esempio, se specifichi `eur` nel PaymentIntent e hai abilitato OXXO nella Dashboard, il cliente non vedrà OXXO perché questo metodo non supporta i pagamenti in `eur`. A meno che la tua integrazione non richieda un’opzione con codice per offrire i metodi di pagamento, Stripe consiglia l’opzione automatica. Ciò è dovuto al fatto che Stripe valuta le limitazioni dei metodi di pagamento, la valuta e altri parametri per determinare l’elenco dei metodi di pagamento accettati. I metodi di pagamento che migliorano la conversione e che sono più pertinenti alla valuta e alla posizione del cliente hanno la priorità. #### Gestire i metodi di pagamento dalla Dashboard Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina la restituzione dei metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Il PaymentIntent viene creato utilizzando i metodi di pagamento configurati nella Dashboard. Se non desideri utilizzare la Dashboard o se preferisci specificare manualmente i metodi di pagamento, puoi elencarli utilizzando l’attributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Elencare manualmente i metodi di pagamento #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Ogni metodo di pagamento deve accettare la valuta specificata nel PaymentIntent e la tua attività deve avere la sede in uno dei Paesi accettati dal metodo di pagamento. Per ulteriori informazioni sulle funzionalità supportate, consulta la pagina dedicata alle [opzioni di integrazione dei metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md). ## Acquisire i dati di pagamento [Lato client] Prima di visualizzare Payment Element per dispositivi mobili, la tua pagina di pagamento dovrebbe: - Mostrare i prodotti acquistati e l’importo totale - Raccogliere tutti i dati di spedizione richiesti utilizzando [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android) - Includere un pulsante di pagamento per visualizzare l’interfaccia utente di Stripe #### Jetpack Componi [Inizializza](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) un’istanza di `PaymentSheet` in `onCreate` dell’Attività di pagamento, specificando un metodo per gestire il risultato. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Quindi, recupera la chiave privata client del PaymentIntent, la chiave privata client Customer Session, l’ID cliente e la chiave pubblicabile dall’endpoint creato nel passaggio precedente. Imposta la chiave pubblicabile utilizzando `PaymentConfiguration` e memorizza le altre per usarle quando visualizzi l’istanza di PaymentSheet. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Quando il cliente tocca il pulsante di pagamento, chiama [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) per aprire la scheda di pagamento. Non appena il cliente completa il pagamento, la scheda si chiude e [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) viene chiamata con un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Viste (classiche) [Inizializza](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) un’istanza di `PaymentSheet` in `onCreate` dell’Activity del pagamento, specificando un metodo per gestire il risultato. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Quindi, recupera la chiave privata client del PaymentIntent, la chiave privata client Customer Session, l’ID cliente e la chiave pubblicabile dall’endpoint creato nel passaggio precedente. Imposta la chiave pubblicabile utilizzando `PaymentConfiguration` e memorizza le altre per usarle quando visualizzi l’istanza di PaymentSheet. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Quando il cliente tocca il pulsante di pagamento, chiama [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) per aprire la scheda di pagamento. Non appena il cliente completa il pagamento, la scheda si chiude e [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) viene chiamata con un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Impostare `allowsDelayedPaymentMethods` su true consente di utilizzare i metodi di pagamento con [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification) come i conti bancari degli Stati Uniti. Per questi metodi di pagamento, lo stato finale del pagamento non è noto al completamento di `PaymentSheet`, in quanto va a buon fine o meno in un secondo momento. Se supporti questi tipi di metodi di pagamento, informa il cliente che il suo ordine è confermato e procedi all’evasione (ad esempio alla spedizione del prodotto), spedisci il suo prodotto) solo quando avrai ricevuto il pagamento. ## 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 lo [strumento webhook Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere questi eventi ed eseguire azioni come l’invio di una email per la conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione. Ascolta questi eventi invece di attendere una chiamata di ritorno dal client. Sul client, il cliente potrebbe chiudere la finestra del browser o uscire dall’app prima dell’esecuzione della chiamata di ritorno e i client malintenzionati potrebbero manipolare la risposta. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare [diversi tipi di modalità di pagamento](https://stripe.com/payments/payment-methods-guide) con una sola integrazione. Oltre alla gestione dell’evento `payment_intent.succeeded`, è consigliabile gestire altri eventi durante la riscossione di pagamenti tramite Payment Element: | Evento | Descrizione | Azione | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Inviato quando un cliente ha disposto 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.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Inviato quando un cliente ha correttamente disposto un pagamento che non è stato ancora completato. Questo evento viene di solito inviato quando il cliente dispone un addebito bancario. Sarà poi seguito da un evento `payment_intent.succeeded` o da un evento `payment_intent.payment_failed`. | Invia al cliente la conferma di un ordine che indica il pagamento in sospeso. Per i beni digitali, potresti voler evadere l’ordine senza attendere il completamento del pagamento. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Inviato quando il cliente ha tentato un pagamento che non è andato a buon fine. | Se un pagamento passa da `processing` a `payment_failed`, offri al cliente un altro tentativo di pagamento. | ## Testare l'integrazione #### Carte | Numero di carta | Scenario | Come eseguire il test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Il pagamento con carta ha esito positivo e non richiede l’autenticazione. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000002500003155 | Il pagamento con carta richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 4000000000009995 | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | | 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre. | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. | #### Reindirizzamenti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata. | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. | | Pay by Bank | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita. | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. | | BLIK | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Addebiti bancari | Modalità di pagamento | Scenario | Come eseguire il test | | --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA. | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. | | Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`. | Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md). ## Optional: Abilita Link Abilita Link nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods) per consentire ai tuoi clienti di salvare e riutilizzare in tutta sicurezza i propri dati di pagamento tramite il pulsante di checkout rapido con un solo clic di Link. ### Specificare l’indirizzo email del cliente in Mobile Payment Element Link effettua l’autenticazione di un cliente utilizzando il suo indirizzo email. Stripe consiglia di precompilare il maggior numero possibile di informazioni per semplificare la procedura di pagamento. Per precompilare il nome, l’indirizzo email e il numero di telefono del cliente, specifica una proprietà `defaultBillingDetails` con le informazioni del cliente durante l’inizializzazione di `PaymentSheet.Configuration`. #### Kotlin ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.") .defaultBillingDetails( PaymentSheet.BillingDetails( name = "Jenny Rosen", email = "jenny.rosen@example.com", phone = "888-888-8888" ) ) .build() ``` ## Optional: Abilitare Google Pay ### Configura la tua integrazione Per usare Google Pay, prima di tutto abilita l’API di Google Pay aggiungendo quanto segue al tag `` del tuo **AndroidManifest.xml**: ```xml ... ``` Per ulteriori informazioni, consulta la pagina [Set up Google Pay API](https://developers.google.com/pay/api/android/guides/setup) (Configurazione dell’API di Google Pay) di Google Pay per Android. ### Aggiungi Google Pay Per aggiungere Google Pay alla tua integrazione, specifica una [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) con il tuo ambiente Google Pay (produzione o test) e il [codice paese della tua azienda](https://dashboard.stripe.com/settings/account) all’inizializzazione di [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Testare Google Pay Google consente di effettuare pagamenti di test tramite la sua [suite di carte di test](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). La suite di test supporta l’utilizzo di [carte di test](https://docs.stripe.com/testing.md) Stripe. Devi testare Google Pay utilizzando un dispositivo Android fisico anziché un dispositivo simulato in un Paese in cui è supportato Google Pay. Accedi a un account Google sul tuo dispositivo di test con una carta reale salvata su Google Wallet. ## Optional: Abilitare la scansione delle carte Per abilitare l’assistenza alla scansione delle carte, [richiedi l’accesso di produzione](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) all’API Google Pay dalla [Console Google Pay & Wallet](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite). - Se hai abilitato Google Pay, la funzione di scansione delle carte è automaticamente disponibile nella nostra interfaccia utente sui dispositivi idonei. Per ulteriori informazioni sui dispositivi idonei, consulta i [vincoli dell’API Google Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition) - **Importante:** la funzione di scansione della carta è disponibile solo nelle build firmate con la stessa chiave di firma registrata nella [Console Google Pay & Wallet](https://pay.google.com/business/console). Le build di test o debug che utilizzano chiavi di firma diverse (ad esempio, le build distribuite tramite Firebase App Tester) non mostreranno l’opzione **Scansiona carta**. Per testare la scansione della carta nelle build pre-release, è necessario: - Firmare le build di test con la tua chiave di firma di produzione - Aggiungere l’impronta della chiave di firma di test alla Console Google Pay e Wallet ## Optional: Abilita i pagamenti ACH Per abilitare i pagamenti con addebito ACH, includi Financial Connections come dipendenza per la tua app. L’[SDK per Android di Stripe](https://github.com/stripe/stripe-android) è open source e [completamente documentato](https://stripe.dev/stripe-android/). Per installare l’SDK, aggiungi `financial-connections` al blocco `dependencies` del tuo file [app/build.gradle](https://developer.android.com/studio/build/dependencies): #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.2.0") } ``` > Per ulteriori informazioni sulla versione più recente e su quelle precedenti dell’SDK, consulta la pagina [Releases](https://github.com/stripe/stripe-android/releases) su GitHub. Per ricevere una notifica quando viene pubblicata una nuova versione, [imposta il controllo delle versioni per il repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Optional: Personalizzare la scheda Tutte le personalizzazioni vengono configurate utilizzando l’oggetto [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Aspetto Personalizza i colori, i caratteri e molto altro in base all’aspetto della tua app utilizzando l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### Layout del metodo di pagamento Configura il layout dei metodi di pagamento nel foglio utilizzando [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Puoi visualizzarli orizzontalmente, verticalmente o lasciare che Stripe ne ottimizzi il layout automaticamente. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### Acquisire gli indirizzi degli utenti Acquisisci gli indirizzi di spedizione o fatturazione locali e internazionali dai tuoi clienti utilizzando il componente [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). ### Nome attività da visualizzare Specifica un nome dell’attività per il cliente impostando [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Per impostazione predefinita, viene utilizzato il nome della tua app. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Modalità scura Per impostazione predefinita, il `PaymentSheet` si adatta automaticamente alle impostazioni di visualizzazione del sistema dell’utente (modalità chiara o scura). Puoi modificare questa impostazione configurando la modalità chiara o scura nella tua app: #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ## Optional: Gestire la disconnessione dell'utente `PaymentSheet` memorizza localmente alcune informazioni per ricordare se un utente ha utilizzato Link in un’app. Per cancellare lo stato interno di `PaymentSheet`, chiama il metodo `PaymentSheet.resetCustomer()` quando l’utente si disconnette. #### Kotlin ```kotlin class MyActivity: Activity { fun onLogoutButtonClicked() { PaymentSheet.resetCustomer(this) // Other logout logic required by your app } } ``` ## Optional: Completare il pagamento nell'interfaccia utente Puoi visualizzare il Payment Sheet solo per raccogliere i dati relativi alla modalità di pagamento e completare il pagamento nell’interfaccia utente dell’app. Questa opzione è utile se disponi di un pulsante personalizzato per l’acquisto o se occorrono passaggi aggiuntivi dopo la raccolta dei dati di pagamento. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Un esempio di integrazione è [disponibile sul nostro GitHub](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Innanzitutto, inizializza [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) invece di `PaymentSheet` usando uno dei metodi di [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html). #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. Poi chiama `configureWithPaymentIntent` con le chiavi degli oggetti Stripe recuperate dal tuo back-end e aggiorna la tua interfaccia utente nella callback con [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Contiene un’immagine e un’etichetta che rappresentano il metodo di pagamento selezionato al momento dal cliente. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. Poi chiama [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) per raccogliere i dati del pagamento. Quando il cliente termina l’operazione, la scheda si chiude e viene chiamata la [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) specificata in precedenza in `create`. Esegui questo metodo per aggiornare la tua interfaccia utente con la `paymentOption` restituita. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Infine, chiama [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) per completare il pagamento. Quando il cliente termina l’operazione, la scheda si chiude e viene chiamata la [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) specificata in precedenza in `create`. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Impostare `allowsDelayedPaymentMethods` su true consente di utilizzare i metodi di pagamento con [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification) come i conti bancari degli Stati Uniti. Per questi metodi di pagamento, lo stato finale del pagamento non è noto al completamento di `PaymentSheet`, in quanto va a buon fine o meno in un secondo momento. Se supporti questi tipi di metodi di pagamento, informa il cliente che il suo ordine è confermato e procedi all’evasione (ad esempio alla spedizione del prodotto), spedisci il suo prodotto) solo quando avrai ricevuto il pagamento. ## Optional: Abilita la nuova raccolta del CVC al momento della conferma Le seguenti istruzioni per raccogliere nuovamente il CVC di una carta salvata durante la conferma del PaymentIntent presuppongono che l’integrazione includa quanto segue: - Creare i PaymentIntent prima di raccogliere i dati di pagamento ### Aggiornare i parametri della creazione dell’intento Per raccogliere nuovamente il CVC alla conferma del pagamento, includi `require_cvc_recollection` durante la creazione del PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-03-25.dahlia" \ -H "Stripe-Account: 2026-03-25.dahlia" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Integrazione in-app per React Native > This is a Integrazione in-app per React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=react-native. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Questa integrazione combina tutti i passaggi necessari per pagare, inclusa la raccolta dei dettagli del pagamento e la conferma del pagamento, in un unico foglio che viene visualizzato sopra la tua app. ## Configurare Stripe [Lato server] [Lato client] Innanzitutto, devi creare un account Stripe. [Registrati ora](https://dashboard.stripe.com/register). ### Lato server Per questa integrazione sono necessari endpoint sul server che comunicano con l’API Stripe. Utilizza le nostre librerie ufficiali per accedere all’API Stripe dal tuo server: #### 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' ``` ### Lato client L’[SDK React Native](https://github.com/stripe/stripe-react-native) è open source e completamente documentato. Internamente, utilizza SDK [iOS nativi](https://github.com/stripe/stripe-ios) e [Android](https://github.com/stripe/stripe-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 ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Poi, installa alcune altre dipendenze necessarie: - Per iOS, vai alla directory **ios** ed esegui `pod install` per garantire di installare anche le dipendenze native richieste. - Per Android, non ci sono più dipendenze da installare. > Per aggiungere l’assistenza di TypeScript, ti consigliamo di consultare e seguire le indicazioni incluse nella [guida ufficiale di TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project). ### 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](https://docs.stripe.com/keys.md#obtain-api-keys) dell’API in `publishableKey`. L’esempio seguente spiega come inizializzare Stripe utilizzando il componente `StripeProvider`. ```jsx 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 ( {/* Your app code here */} ); } ``` > Usa le [chiavi di test](https://docs.stripe.com/keys.md#obtain-api-keys) dell’API durante i test e le attività di sviluppo e le chiavi della [modalità live](https://docs.stripe.com/keys.md#test-live-modes) quando pubblichi l’app. ## Abilitare modalità di pagamento Visualizza le [impostazioni delle modalità di pagamento](https://dashboard.stripe.com/settings/payment_methods) e abilita le modalità di pagamento che vuoi accettare. Per creare un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) è necessario che sia abilitata almeno una modalità di pagamento. Per impostazione predefinita, Stripe abilita le carte e altri metodi di pagamento tra i più utilizzati per aiutarti a raggiungere più clienti. Detto ciò, ti consigliamo di attivare ulteriori metodi pertinenti per la tua attività e i tuoi clienti. Per ulteriori informazioni sul supporto di prodotti e metodi di pagamento, consulta la sezione [Supporto per il metodo di pagamento](https://docs.stripe.com/payments/payment-methods/payment-method-support.md). Per le commissioni consulta la nostra [pagina delle tariffe](https://stripe.com/pricing/local-payment-methods). ## Aggiungere un endpoint [Lato server] > #### Nota > > Per visualizzare il PaymentSheet prima di creare un PaymentIntent, consulta [Raccogliere i dati di pagamento prima di creare un intento](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). 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 integrazione utilizza tre oggetti dell’API Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utilizza 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 la procedura. 1. (Optional) [Customer](https://docs.stripe.com/api/customers.md): per configurare un metodo di pagamento per pagamenti futuri, devi associarlo a un oggetto *Customer* (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 cliente crea un account con la tua attività. Se il cliente effettua il pagamento come ospite, puoi creare un oggetto Customer prima del pagamento e associarlo successivamente alla tua rappresentazione interna dell’account del cliente. 1. (Facoltativo) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): l’oggetto Customer contiene informazioni sensibili che non possono essere recuperate direttamente da un’app. Una CustomerSession concede all’SDK l’accesso temporaneo all’oggetto Customer e fornisce altre opzioni di configurazione. Visualizza un elenco completo delle [opzioni di configurazione](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Se non salvi mai le carte in un oggetto Customer e non permetti ai clienti che ritornano di riutilizzare le carte salvate, puoi omettere gli oggetti Customer e CustomerSession nella tua integrazione. Per motivi di sicurezza, la tua app non può creare questi oggetti. Aggiungi invece un endpoint sul tuo server per: 1. Recuperare l’oggetto Customer o ne crea uno nuovo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) per il cliente. 1. Crea un PaymentIntent con i parametri [importo](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [valuta](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) e [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Restituisce la *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)) del Payment Intent, il `client_secret` della CustomerSession, l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente e la tua [chiave pubblicabile](https://dashboard.stripe.com/apikeys) alla tua app. I metodi di pagamento mostrati ai clienti durante il completamento della transazione sono inclusi anche nel PaymentIntent. Puoi consentire a Stripe di acquisire i metodi di pagamento dalle impostazioni della Dashboard oppure puoi elencarli manualmente. Indipendentemente dall’opzione che sceglierai, ricorda che la valuta specificata nel PaymentIntent filtra il metodo di pagamento mostrato al cliente. Ad esempio, se specifichi `eur` nel PaymentIntent e hai abilitato OXXO nella Dashboard, il cliente non vedrà OXXO perché questo metodo non supporta i pagamenti in `eur`. A meno che la tua integrazione non richieda un’opzione con codice per offrire i metodi di pagamento, Stripe consiglia l’opzione automatica. Ciò è dovuto al fatto che Stripe valuta le limitazioni dei metodi di pagamento, la valuta e altri parametri per determinare l’elenco dei metodi di pagamento accettati. I metodi di pagamento che migliorano la conversione e che sono più pertinenti alla valuta e alla posizione del cliente hanno la priorità. #### Gestire i metodi di pagamento dalla Dashboard Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina la restituzione dei metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Il PaymentIntent viene creato utilizzando i metodi di pagamento configurati nella Dashboard. Se non desideri utilizzare la Dashboard o se preferisci specificare manualmente i metodi di pagamento, puoi elencarli utilizzando l’attributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Elencare manualmente i metodi di pagamento #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Ogni metodo di pagamento deve accettare la valuta specificata nel PaymentIntent e la tua attività deve avere la sede in uno dei Paesi accettati dal metodo di pagamento. Per ulteriori informazioni sulle funzionalità supportate, consulta la pagina dedicata alle [opzioni di integrazione dei metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md). ## Acquisire i dati di pagamento [Lato client] Prima di visualizzare Payment Element per dispositivi mobili, la tua pagina di pagamento dovrebbe: - Mostrare i prodotti acquistati e l’importo totale - Acquisire le eventuali informazioni richieste per la spedizione - Includere un pulsante di pagamento per aprire l’interfaccia utente di Stripe Nella procedura di pagamento della tua app, invia una richiesta di rete all’endpoint di back-end che hai creato nella fase precedente e chiama `initPaymentSheet` dall’hook `useStripe`. ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer } = await response.json(); return { paymentIntent, ephemeralKey, customer, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business can handle payment //methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (