Passa al contenuto
Crea account
o
Accedi
Il logo della documentazione Stripe
/
Chiedi all'IA
Crea un account
Accedi
Inizia
Pagamenti
Automazione finanziaria
Per piattaforme e marketplace
Gestione del denaro
Strumenti di sviluppo
Inizia
Pagamenti
Automazione finanziaria
Inizia
Pagamenti
Automazione finanziaria
Per piattaforme e marketplace
Gestione del denaro
PanoramicaExplore all products
Start building
Avviare lo sviluppo
Progetti di esempio
Informazioni sulle API
    Presentazione dell'API
    API Payment Intents
    API Setup Intents
    Modalità di pagamento
    Prodotti e prezzi
    API precedenti
      Addebiti
        Migrare alle nuove API
        Accettare un pagamento con carta
        Salvare una carta
        Bloccare un importo su una carta
        Charges e Connect
      Origini
    Fasi di rilascio
Build with LLMs
Utilizza Stripe senza dover scrivere codice
Configura Stripe
Crea un account
Dashboard per il web
Dashboard per dispositivi mobili
Passare a Stripe
Gestire il rischio di frode
Informazioni sulle frodi
Protezione contro le frodi di Radar
Gestisci le contestazioni
Verificare l'identità
Pagina inizialeIniziaAbout the APIsOlder APIsCharges

Accettare un pagamento utilizzando Stripe Elements e l'API ChargesAPI Charges

Accetta pagamenti online da clienti statunitensi e canadesi.

Copia pagina

API precedente

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

L’API Charges non supporta le seguenti funzionalità, molte delle quali sono necessarie per la conformità delle carte di credito:

  • Esercenti in India
  • Bank requests for card authentication
  • Strong Customer Authentication

Usa Stripe Elements, i nostri componenti di interfaccia utente preconfigurati, per creare un modulo di pagamento che ti consenta di raccogliere in modo sicuro i dati della carta di un cliente senza manipolare dati sensibili. I dati della carta vengono quindi convertiti in un token rappresentativo che puoi inviare in tutta sicurezza ai tuoi server. Il tuo server può utilizzare questo token per creare un addebito.

Configurare Stripe

Innanzitutto, devi creare un account Stripe. Registrati ora.

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

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Creare il modulo di pagamento
Lato client

Per raccogliere in modo sicuro i dati delle carte dai tuoi clienti, Stripe Elements crea per te componenti di interfaccia utente in hosting su Stripe, che vengono quindi inseriti nel tuo modulo di pagamento senza che tu debba crearli direttamente.

Configurare Stripe Elements

Per integrare Elements nella tua pagina web, aggiungi questo tag di script nella sezione head della tua pagina HTML:

payment.html
<script src="https://js.stripe.com/v3/"></script>

Questo script deve essere sempre caricato direttamente da https://js.stripe.com.

Crea un’istanza di Elements con il seguente JavaScript nella pagina di pagamento:

client.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(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const elements = stripe.elements();

Una volta caricato Elements, puoi creare un contenitore DOM vuoto con ID univoco nel tuo modulo di pagamento ovunque vuoi che Elements aggiunga il proprio campo di immissione. Ti consigliamo di collocare questo contenitore all’interno di un tag <label> o accanto a un tag <label> con un attributo forche corrisponda all’id univoco del contenitore di Elements. In tal modo, l’elemento diventa automaticamente attivo quando il cliente fa clic sull’etichetta corrispondente.

Ad esempio:

payment.html
<form action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- A Stripe Element will be inserted here. --> </div> <!-- Used to display Element errors. --> <div id="card-errors" role="alert"></div> </div> <button>Submit Payment</button> </form>

Una volta caricato il modulo, crea un’istanza di un elemento card e montala sul contenitore di Elements creato sopra:

client.js
// Custom styling can be passed to options when creating an Element. const style = { base: { // Add your base input styles here. For example: fontSize: '16px', color: '#32325d', }, }; // Create an instance of the card Element. const card = elements.create('card', {style}); // Add an instance of the card Element into the `card-element` <div>. card.mount('#card-element');

card Element semplifica il modulo e riduce al minimo il numero di campi obbligatori inserendo un unico campo di immissione flessibile che raccoglie in modo sicuro tutti i dati necessari relativi alla carta.

In alternativa, combina cardNumber Element, cardExpiry Element e cardCvc Element per creare un modulo flessibile con più campi di immissione per la carta.

Nota

Acquisisci sempre il codice postale per aumentare i tassi di accettazione delle carte e ridurre le frodi.

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

Consulta la nostra documentazione di riferimento su Stripe.js per un elenco completo dei tipi di componenti Elements supportati.

Creare un token
Lato client

Aggiungi un listener di eventi che rilevi quando il cliente invia i dati della sua carta e utilizza stripe.createToken(card) per tokenizzare tali dati:

client.js
// Create a token or display an error when the form is submitted. const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {token, error} = await stripe.createToken(card); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('card-errors'); errorElement.textContent = error.message; } else { // Send the token to your server. stripeTokenHandler(token); } });

createToken accetta anche un secondo parametro facoltativo (non utilizzato in questo esempio) contenente informazioni supplementari sulla carta del cliente. La funzione restituisce un parametro Promise che viene risolto con un oggetto result. Questo oggetto può generare le seguenti risposte:

  • result.token: un token è stato creato correttamente.
  • result.error: si è verificato un errore. Sono inclusi gli errori di convalida lato client. Consulta la documentazione di riferimento dell’API per conoscere tutti gli errori possibili.

Se l’oggetto contiene un result.token, invialo al tuo server. In caso contrario, mostra al cliente un errore.

Inviare il token al tuo server
Lato client

Invia il token al tuo server con tutte le informazioni supplementari raccolte:

client.js
const stripeTokenHandler = (token) => { // Insert the token ID into the form so it gets submitted to the server const form = document.getElementById('payment-form'); const hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

Creare un addebito con il token
Lato server

Una volta che il client ha pubblicato il token sul tuo server, puoi utilizzarlo per creare un addebito. Sul server, cattura il token Stripe nei parametri POST inviati dal tuo modulo. A questo punto, è sufficiente una chiamata API per effettuare un addebito sulla carta:

Command Line
curl
curl https://api.stripe.com/v1/charges \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -d "amount"=999 \ -d "currency"="usd" \ -d "description"="Example charge" \ -d "source"="tok_visa"

La risposta alla creazione di un addebito sarà un addebito o un errore con un codice di errore. Se la risposta ha esito positivo, evadi l’ordine del cliente e mostra una pagina indicante che l’addebito è riuscito. In caso contrario, mostra una pagina di errore.


Verificare l’integrazione

Se riesci a inserire correttamente il numero di una carta di test nel tuo modulo HTML, invialo al server e verifica che abbia creato l’addebito. La tua integrazione è così terminata.

Complimenti! Hai completato un’integrazione base per pagamenti con l’API Charges. Questa API non supporta l’espansione delle aziende o clienti al di fuori di Stati Uniti e Canada. Per pagamenti più sicuri e globali, scopri come accettare un pagamento con l’API Payment Intents.

Vedi anche

Puoi ottenere maggiori informazioni su Elements e su come salvare le carte con l’API Charges.

  • Ulteriori informazioni su Stripe Elements
  • Salvare le carte con l’API Charges
Questa pagina è stata utile?
SìNo
Hai bisogno di aiuto? Contatta l'assistenza clienti.
Partecipa al nostro programma di accesso anticipato.
Dai un'occhiata al nostro registro delle modifiche.
Domande? Contattaci.
LLM? Leggi llms.txt.
Realizzato da Markdoc