Stripe Elements

Crea procedure di completamento delle transazioni intelligenti e accattivanti

Stripe Elements offre un'ampia scelta di componenti di interfaccia preconfigurati in grado di aiutarti a creare procedure di completamento delle transazioni personalizzate e ad alta risoluzione per dispositivi mobili e desktop.

Provalo Consulta la documentazione

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

La migliore esperienza di pagamento per i tuoi clienti

Alla base di Stripe Elements c'è l'esperienza collettiva dei team di front-end, progettazione e analisi di Stripe. Aiutando i tuoi clienti a inserire i dati richiesti in modo rapido e corretto, Elements favorisce una notevole riduzione degli errori e un incremento dei pagamenti andati a buon fine.

  • Convalida in tempo reale

    Viene fornito un feedback in tempo reale mentre il cliente immette i dati, in modo da rilevare tempestivamente eventuali errori.

  • Localizzazione

    I dati che è necessario inserire vengono rilevati in base al paese della carta e vengono localizzati in modo appropriato.

  • Formattazione e mascheramento

    L'inserimento dei dati da parte degli utenti è semplificato grazie all'uso dello stesso tipo di formattazione della carta di pagamento.

Numero carta
MM / AA
CVC
CAP
Visa 5556 04 / 21
Amex 98431 07 / 19
Compra con
  • Apple Pay e Payment Request

    Un'unica integrazione per Apple Pay e l'API Payment Request (incluso Google Pay).

  • Compilazione automatica

    La compilazione automatica funziona in modo uniforme su tutte le piattaforme e browser, consentendo ai clienti di svolgere più rapidamente le procedure di completamento delle transazioni.

  • Reattività

    Il sistema si adatta a vari formati di schermo (dai desktop ai dispositivi mobili) e richiama il tastierino numerico quando necessario.

Numero carta
MM / AA
CVC
CAP
Visa 5556 04 / 21
Amex 98431 07 / 19
Compra con
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

Creato da noi, progettato da te

Stripe Elements può essere personalizzato per adattarsi alla perfezione alla tua pagina di completamento delle transazioni. Elements elimina la necessità di gestire in hosting le pagine di pagamento, offrendoti tutti gli elementi di base per creare il tuo modulo di completamento della transazione.

Provalo! Modifica l'oggetto relativo allo stile nell'editor per adattarlo allo stile del tuo modulo. Puoi usare la maggior parte delle proprietà CSS.

Acquisizione sicura dei dati di pagamento

Stripe Elements rende ancora più sicura la raccolta dei dati di pagamento e aiuta a impedire a malintenzionati di rubare informazioni sensibili. Generiamo un iframe sicuro e isoliamo i dati sensibili dal tuo sito, eliminando intere categorie di attacchi, pur consentendoti di mantenere il pieno controllo visivo.

Conformità PCI semplificata

Stripe Elements è il sistema più semplice per garantire il rispetto della conformità PCI: nessun dato sensibile viene memorizzato sui tuoi server. Puoi usufruire della forma più semplice di conformità PCI, evitando di incorrere in procedure di revisione spesso costose e con tempistiche lunghe. Noi possiamo anche generare automaticamente la documentazione per il questionario di autovalutazione (SAQ A).

Meno codice. Meno casi limite.

Elements presenta funzionalità integrate di convalida, formattazione e mascheramento dei dati inseriti, così come di applicazione di stili e gestione degli errori. In questo modo, avrai meno codice da gestire in fase di completamento delle transazioni e meno casi limite da risolvere, pur continuando a offrire ai tuoi clienti un'esperienza di pagamento ottimizzata.

Formattazione
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
Convalida
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
Payload
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
Gestione degli errori
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Localizzazione
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

Concentrati sui tuoi prodotti e lascia a noi tutto il resto

Gestire un'attività online non è semplice. Con Stripe Elements potrai sfruttare i processi di apprendimento collettivo di Stripe in ambito di sicurezza e creazione/ottimizzazione dell'esperienza di completamento delle transazioni, per poterti concentrare completamente sui tuoi prodotti.

  • Supporto della compilazione automatica nel browser
    Rendi il tuo modulo di pagamento compatibile con la modalità di compilazione automatica di tutti i principali browser desktop e mobili.
  • Supporto della compilazione automatica per moduli di terze parti
    Rendi il tuo modulo di pagamento compatibile con i moduli a compilazione automatica di tutti i principali software di parti terze (ad es., 1Password, LastPass).
  • Identificazione del marchio della carta
    I moduli segnalano ai clienti il rilevamento automatico del marchio della carta utilizzata, formattando i campi di conseguenza e convalidando i dati durante la digitazione (ad es. per le carte American Express, vengono accettati solo codici CVC a 4 cifre).
  • Informazioni sui codici CVC specifiche per la carta
    Riduci gli errori mostrando ai clienti dove si trova il codice CVC/CVV.
  • Mascheramento della digitazione
    Riduzione degli errori grazie alla funzionalità integrata di mascheramento dei dati inseriti.
  • Formattazione
    Formattazione automatica dei dati inseriti dai clienti durante la digitazione, in risposta alle loro aspettative.
  • Messaggi di errore nella lingua dell'utente
    Parla la stessa lingua dei tuoi clienti, con messaggi di errore in 15 lingue diverse.
  • Marcatori di posizione nella lingua dell'utente
    Mostra ai tuoi clienti i marcatori di posizione nella loro lingua di preferenza (ad es., ZIP per gli Stati Uniti e CAP per l'Italia).
  • Conformità PCI semplificata (SAQ A)
    Riduci al minimo l'ambito di applicazione delle norme PCI grazie al modulo SAQ A di Elements, che ti consente di usufruire della forma più semplice di verifica della conformità PCI.
  • Supporto dei web font
    Usa i web font che preferisci.
  • Supporto della scrittura da destra a sinistra
    Supporto della digitazione da destra a sinistra e delle lingue che la utilizzano.
  • Convalida in tempo reale dei dati inseriti
    Convalida dei dati inseriti in tempo reale, per ridurre gli errori e aumentare le probabilità che le transazioni vadano a buon fine.
  • API Payment Request
    Supporta più modalità di pagamento tramite la nuova API Payment Request W3C, con un solo componente di Elements in grado di rilevare automaticamente la migliore opzione di pagamento per il cliente.
  • Google Pay
    Supporto di Google Pay con un solo componente di Elements.
  • Microsoft Pay
    Supporto di Microsoft Pay con un solo componente di Elements.
  • Apple Pay
    Supporto di Apple Pay con un solo componente di Elements.
  • Obbiettivi di clic intelligenti
    Uso di campi di digitazione sicuri, compatibili con il resto del modulo, dal momento che Elements imposta automaticamente gli obiettivi di clic per etichette e padding.
  • Digitazione ottimizzata per i dispositivi mobili
    Mostra ai clienti la tastiera mobile più adatta al tipo di dati da inserire (ad es., il tastierino numerico quando è necessario inserire solo numeri).
  • Navigazione ottimizzata per i dispositivi mobili
    Assicurati che i clienti possano utilizzare le frecce di navigazione native dei dispositivi mobili per spostarsi da un campo dati all'altro.
  • Accessibilità (ARIA)
    Migliora l'accessibilità nel rispetto degli standard ARIA W3C, per venire incontro alle esigenze di tutti i clienti.
  • Acquisizione dinamica dei codici postali
    Il codice postale viene acquisito solo quando serve, dal momento che Elements è in grado di determinare in modo dinamico se l'acquisizione del codice postale può ridurre i rischi di frode o incrementare le probabilità che la transazione vada a buon fine.
  • Supporto di caratteri a larghezza intera e numeri CJK
    Supporto dei numeri CJK, comunemente utilizzati nelle tastiere software cinesi, giapponesi e coreane.
  • Layout dinamico
    Elements adatta automaticamente il proprio layout alle dimensioni dello schermo del cliente, semplificando l'inserimento dei dati anche su schermi molto piccoli.
  • Associazione con React
    Integra Elements con React utilizzando react-stripe-elements.
  • Stili completamente personalizzabili
    Grazie al design modulare e agli stili personalizzabili di Elements, puoi creare esattamente il modulo che desideri.
You’re viewing our website for Italy, but it looks like you’re in the United States. Switch to the United States site