Stripe Elements

Attraktive und intelligente Bezahlvorgänge erstellen

Stripe Elements sind vordefinierte UI-Komponenten, mit denen Sie Ihre eigenen, pixelgenauen Bezahlvorgänge auf Desktop- und Mobilgeräten erstellen können.

Jetzt testen Dokumentation im Detail

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

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.

  • Echtzeit-Validierung

    Geben Sie automatisch und in Echtzeit Feedback, während der Kunde/die Kundin Eingaben vornimmt, damit Fehler so früh wie möglich erkannt werden.

  • Lokalisierung

    Erkennen Sie dynamisch, welche Eingaben für das Land erforderlich sind, in dem die Karte ausgestellt wurde, und lokalisieren sie diese entsprechend.

  • Formatierung und Maskierung

    Machen Sie die Eingabe für Benutzer/innen einfacher und übersichtlicher, da die gleiche Formatierung verwendet wird wie auf der eigentlichen Karte.

Kartennummer
MM / JJ
CVC
PLZ
Visa 5556 04 / 21
Amex 98431 07 / 19
Kaufen mit
  • Apple Pay und Payment Request

    Bieten Sie eine einzige Integration für Apple Pay und die Payment Request API.

  • Automatisches Ausfüllen

    Stellen Sie sicher, dass die Funktion zum automatischen Ausfüllen auf allen Plattformen und in allen Browsern einheitlich funktioniert, damit Ihre Kunden/Kundinnen schneller bezahlen können.

  • Reaktionsfähigkeit

    Passen Sie Ihr Formular an unterschiedliche Bildschirmgrößen an (von Desktop bis Mobil) und blenden bei Bedarf die numerische Tastatur ein.

Kartennummer
MM / JJ
CVC
PLZ
Visa 5556 04 / 21
Amex 98431 07 / 19
Kaufen mit
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.

Formatierung
// 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);
});
Validierung
// 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;
}
Fehlerbehebung
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Lokalisierung
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)'
    }
  }
});

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 anhand von react-stripe-elements.
  • Komplett anpassbare Stile
    Erstellen Sie genau das gewünschte Formular mit dem Bausteinprinzip und anpassbaren Stilen von Elements.
You’re viewing our website for Ireland, but it looks like you’re in the United States. Switch to the United States site