Stripe Elements
Attraktive und intelligente Bezahlvorgänge erstellen
Stripe Elements sind vordefinierte Komponenten der Nutzeroberfläche, mit denen Sie Ihre eigenen pixelgenauen Bezahlvorgänge für Desktop- und Mobilgeräte erstellen können.
Das beste Zahlungserlebnis für Ihre Kunden und Kundinnen
Stripe Elements basieren auf der gemeinsamen Erfahrung der Front-End-, Design- und Analytikteams von Stripe. Elements helfen Ihren Kunden/Kundinnen, die erforderlichen Informationen schnell und korrekt einzugeben. So werden Benutzerfehler minimiert und erfolgreiche Zahlungen maximiert.
var style = {
base: {
color: '#303238',
fontSize: '16px',
fontFamily: '"Open Sans", sans-serif',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#CFD7DF',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
Von uns gebaut, von Ihnen gestaltet
Stripe Elements können so angepasst werden, dass sie sich perfekt in Ihre Bezahlungsseite integrieren. Elements machen gehostete Zahlungsseiten überflüssig und geben Ihnen alle erforderlichen Bausteine zur Erstellung eines eigenen Bezahlformulars.
Probieren Sie es selbst aus! Passen Sie das Style-Objekt im Editor an den Stil Ihres Formulars an. Sie können die meisten CSS-Eigenschaften verwenden.
Zahlungsangaben sicher erfassen
Stripe Elements machen die Erfassung von Zahlungsangaben sicherer und helfen, den Diebstahl sensibler Informationen zu verhindern. Wir generieren einen sicheren iframe und isolieren sensible Informationen von Ihrer Website. Dadurch werden zahlreiche Angriffe von vornherein ausgeschlossen und Sie haben weiterhin volle visuelle Kontrolle.
PCI-Konformität leicht gemacht
Stripe Elements sind die einfachste Methode, mit den aktuellen PCI-Bestimmungen Schritt zu halten – keine sensiblen Daten gelangen auf Ihren Server. Sie qualifizieren sich für die einfachste Form der PCI-Konformität, bei der keine aufwendigen und zeitkritischen Überprüfungen erforderlich sind. Wir generieren sogar den Selbstbeurteilungs-Fragebogen (SBF A) automatisch.
Weniger Code. Weniger Grenzfälle.
Stripe Elements bieten eingebaute Funktionen für Eingabevalidierung, Formatierung, Maskierung, Gestaltung und Fehlerbehandlung. So verbringen Sie weniger Zeit mit der Pflege von Bezahlungs-Code und der Lösung von Grenzfällen und können ein besseres Zahlungserlebnis schaffen.
// 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)'
}
}
});
Sie konzentrieren sich auf Ihr Produkt, wir erledigen den Rest
Es ist nicht einfach, ein Online-Geschäft zu betreiben. Mit Stripe Elements können Sie die gemeinsame Erfahrung von Stripe in den Bereichen Sicherheit und Erstellung/Optimierung von Bezahl-Erlebnissen nutzen, damit Sie sich auf Ihr Produkt konzentrieren können.
-
Browserunterstützung für automatisches Ausfüllen
Machen Sie Ihr Formular kompatibel mit der Funktion zum automatischen Ausfüllen von Zahlungen in allen gängigen Desktop- und Mobil-Browsern.
-
Unterstützung für automatisches Ausfüllen in Software von Drittanbietern
Machen Sie Ihr Formular kompatibel mit der Funktion zum automatischen Ausfüllen für Zahlungen in gängigen AutoFill-Programmen von Drittanbietern (z. B. 1Password, LastPass).
-
Identifizierung des Kartentyps
Validieren Sie Kundeneingaben durch automatische Erkennung des Kartentyps, damit Formatierung und Eingabevalidierung automatisch angepasst werden (Beispiel: bei American Express-Karten werden nur 4-stellige CVC-Nummern akzeptiert).
-
Kartenspezifische CVC-Hilfe
Zeigen Sie Ihren Kunden, wo sich der CVC/CVV-Code auf der jeweiligen Karte befindet, um Fehler zu minimieren.
-
Eingabemaskierung
Nutzen Sie die eingebaute Eingabemaskierung, um Fehler zu minimieren.
-
Formatierung
Sorgen Sie dafür, dass Informationen während der Eingabe automatisch so formatiert werden, wie es Ihre Kundinnen und Kunden erwarten.
-
Lokalisierte Fehlermeldungen
Sprechen Sie die Sprache Ihrer Kunden mit Fehlermeldungen in 15 Sprachen.
-
Lokalisierte Platzhalter
Zeigen Sie Kunden/Kundinnen Platzhalter für das jeweilige Land (z. B. „ZIP“ in den USA, aber „Postal Code“ in Großbritannien und „Postleitzahl“ in Deutschland).
-
Einfache PCI-Konformität (SBF A)
Minimieren Sie Ihren PCI-Aufwand – mit Elements können Sie die einfachste Form der PCI-Konformitätsvalidierung nutzen (SBF A).
-
Unterstützung für Web-Fonts
Verwenden Sie Ihre gewünschten Web-Fonts.
-
Unterstützung für linksläufige Sprachen
Unterstützen Sie die Eingabe von rechts nach links und damit linksläufige Sprachen.
-
Echtzeit-Eingabevalidierung
Validieren Sie Kundeneingaben in Echtzeit, um Fehler und die Abwanderung von Kunden/Kundinnen zu minimieren.
-
Payment Request API
Unterstützen Sie Zahlungsmethoden über die neue Payment Request API des W3C mit einem einzigen Element, das automatisch die beste Zahlungsoption für den Kunden ermittelt.
-
Google Pay
Bieten Sie Unterstützung für Google Pay mit einem einzigen Element.
-
Microsoft Pay
Bieten Sie Unterstützung für Microsoft Pay mit einem einzigen Element.
-
Apple Pay
Bieten Sie Unterstützung für Apple Pay mit einem einzigen Element.
-
Smart-Click-Ziele
Nutzen Sie sichere Eingabefelder, die mit dem Rest Ihres Formulars kompatibel sind – Elements verwandelen Labels und Füllzeichen automatisch in anklickbare Ziele.
-
Mobilgerätefreundliche Eingaben
Zeigen Sie immer die richtige mobile Tastatur an, um Ihren Kunden/Kundinnen die Eingabe zu erleichtern (z. B. die numerische Tastatur bei der Eingabe von Zahlen).
-
Mobilgerätefreundliche Navigation
Geben Sie Ihren Kunden/Kundinnen die Möglichkeit, mit den Navigationspfeilen auf ihrem Mobilgerät zwischen Eingabefeldern zu wechseln.
-
Barrierefreiheit (ARIA)
Erfüllen Sie die W3C-ARIA-Standards, um die Barrierefreiheit zu verbessern und den Anforderungen aller Kunden entgegenzukommen.
-
Dynamische Erfassung von Postleitzahlen
Fragen Sie nur nach der Postleitzahl, wenn es auch nötig ist: Elements bestimmen dynamisch, ob die Erfassung der Postleitzahl die Wahrscheinlichkeit einer erfolgreichen Transaktion erhöht bzw. die Betrugsgefahr minimiert.
-
Unterstützung für Ziffern in voller Breite/CJK-Ziffern
Bieten Sie Unterstützung für CJK-Ziffern, die häufig in chinesischen, japanischen und koreanischen Softwaretastaturen verwendet werden.
-
Responsives Layout
Sorgen Sie dafür, dass Ihr Formular unabhängig von der Display-Größe immer gut aussieht – Elements passen das Layout automatisch an, damit auch bei kleinen Displays die Eingabe so einfach wie möglich ist.
-
React-Bindungen
Integrieren Sie Elements mit React mithilfe von React Stripe.js.
-
Komplett anpassbare Stile
Erstellen Sie genau das gewünschte Formular mit dem Bausteinprinzip und anpassbaren Stilen von Elements.