Stripe Elements
Crea procedure di pagamento 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.
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.
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.
// 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);
});
// 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]) }
}
// 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; }
Stripe.card.createToken(payload, (status, res) => {
if (res.error) {
window.scrollTo(0, 0);
$('.ui.form').form('add errors', [res.error.message]);
}
stripeResponseHandler(res);
});
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'] }] };
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
Convalida i dati inseriti dai clienti segnalando 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.js.
-
Stili completamente personalizzabili
Grazie al design modulare e agli stili personalizzabili di Elements, puoi creare esattamente il modulo che desideri.