Stripe Elements

Fantastische, slimme afrekenflows bouwen

Stripe Elements zijn veelzijdige, kant-en-klare UI-componenten waarmee je zelf tot op de pixel perfecte afrekenflows maakt voor desktop en mobiel.

Uitproberen Bekijk de documentatie

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

De beste betaalervaring voor je klanten

Bij de ontwikkeling van Stripe Elements hebben we gebruikgemaakt van de collectieve ervaring van de front-end-, design- en analyseteams van Stripe. Door je klanten te helpen informatie snel en correct in te voeren, zorgen Elements voor minder gebruikersfouten en een toename van het aantal succesvolle betalingen.

  • Realtime validatie

    Geef automatisch realtime feedback terwijl je klant iets typt om fouten meteen te ondervangen.

  • Lokalisatie

    Op basis van het land van de creditcard detecteer je dynamisch welke invoer vereist is, waarna je de juiste lokalisatie kunt aanbieden.

  • Opmaak en maskering

    Zorg dat je klanten makkelijker gegevens kunnen invoeren door de opmaak af te stemmen op wat ze op hun creditcard zien.

Kaartnummer
MM / JJ
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Kopen met
  • Apple Pay en Payment Request

    Na een eenmalige integratie kun je gebruikmaken van Apple Pay en de Payment Request-API (inclusief Google Pay).

  • Automatisch invullen

    Zorg dat automatisch invullen consistent werkt op alle platforms en in alle browsers, zodat je klanten sneller kunnen afrekenen.

  • Responsiviteit

    Zorg voor aanpassing aan verschillende schermformaten (van desktop tot mobiel) en roep waar nodig het numerieke toetsenbord op.

Kaartnummer
MM / JJ
CVC
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
Kopen met
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

Gebouwd door ons, ontworpen door jou

Stripe Elements kunnen zodanig worden aangepast dat alles perfect op je afrekenpagina past. Met Elements heb je geen gehoste betaalpagina's nodig. Je beschikt over alle bouwstenen om je eigen afrekenformulier te maken.

Probeer het zelf! Bewerk het stijlobject in de editor en pas het aan de stijl van je formulier aan. Je kunt werken met de meeste CSS-eigenschappen.

Veilig betaalgegevens verzamelen

Met Stripe Elements verloopt het verzamelen van betaalgegevens veiliger en voorkom je dat kwaadwillenden gevoelige informatie stelen. We genereren een veilig iframe en isoleren gevoelige informatie van je site. Zo ondervang je allerlei soorten aanvallen terwijl je toch de volledige visuele controle houdt.

Eenvoudige PCI-naleving

Met Stripe Elements zorg je eenvoudig voor naleving van de huidige PCI-regelgeving, want er komen geen gevoelige gegevens op je servers terecht. Je komt in aanmerking voor de eenvoudigste vorm van PCI-naleving, waardoor kostbare, tijdrovende audits je bespaard blijven. Zelfs de documentatie voor de vragenlijst voor zelfbeoordeling (Self Assessment Questionnaire/SAQ A) wordt automatisch gegenereerd.

Minder code. Minder problemen.

Met Stripe Elements beschik je over geïntegreerde invoervalidatie, opmaak, maskering, vormgeving en foutafhandeling. Hierdoor ben je minder tijd kwijt aan het onderhoud van de afrekencode en het oplossen van lastige problemen, en bied je klanten tegelijkertijd een betere betaalervaring.

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

Houd je aandacht bij je product - wij doen de rest

Het valt niet mee om een online bedrijf te leiden. Met Stripe Elements profiteer je van de collectieve kennis die Stripe heeft opgedaan op het gebied van afrekenbeveiliging en -optimalisatie. Hierdoor kun jij je volledig concentreren op je product.

  • Automatisch invullen in browsers
    Maak je formulier compatibel met de automatische invulfunctionaliteit voor betalingen in alle populaire desktopbrowsers en mobiele browsers.
  • Ondersteuning van automatisch invulling door derden
    Maak je formulier compatibel met de automatische invulfunctionaliteit voor betalingen zoals die wordt gebruikt in de populairste software voor automatische invulling van derden (bijvoorbeeld: 1Password, LastPass).
  • Herkenning van kaartmerk
    Valideer de invoer van klanten door automatische detectie van het creditcardmerk, waardoor indeling- en invoervalidatie mogelijk wordt (bijvoorbeeld: alleen acceptatie van een viercijferige CVC voor American Express-creditcards).
  • Kaartspecifieke CVC-hints
    Beperk fouten door je klanten te laten zien waar de CVC/CVV staat.
  • Invoermaskering
    Beperk fouten dankzij geïntegreerde invoermaskering.
  • Opmaak
    Geef de invoer van je klanten automatisch weer in de indeling die ze verwachten, direct terwijl ze typen.
  • Gelokaliseerde foutberichten
    Spreek de taal van je klanten met foutberichten in 15 verschillende talen.
  • Gelokaliseerde tijdelijke aanduidingen
    Laat je klanten een gelokaliseerde tijdelijke aanduiding zien (bijvoorbeeld: 'ZIP' in de Verenigde Staten of 'Postcode' in het Verenigd Koninkrijk).
  • Eenvoudige PCI-naleving (SAQ A)
    Zorg voor minimale PCI-inspanningen, omdat je met Elements in aanmerking komt voor de eenvoudigste vorm van validatie van PCI-naleving: SAQ A.
  • Ondersteuning van weblettertypen
    Gebruik de weblettertypen die je zelf wilt.
  • Ondersteuning voor van rechts naar links geschreven talen
    Ondersteun invoer in talen die van rechts naar links worden geschreven.
  • Realtime invoervalidatie
    Valideer invoer in realtime om fouten te beperken en het aantal afhakers te verminderen.
  • Payment Request-API
    Ondersteun betaalmethoden via de nieuwe Payment Request-API van W3C, met één Element dat automatisch de beste betaaloptie voor je klant detecteert.
  • Google Pay
    Ondersteun Google Pay met één Element.
  • Microsoft Pay
    Ondersteun Microsoft Pay met één Element.
  • Apple Pay
    Ondersteun Apple Pay met één Element.
  • Slimme klikdoelen
    Gebruik veilige invoervelden die compatibel zijn met de rest van het formulier, omdat je met Elements automatisch klikdoelen definieert voor labels en opvulling.
  • Mobielvriendelijke invoer
    Laat je klanten het juiste mobiele toetsenbord zien om invoer gemakkelijker te maken. Laat ze bijvoorbeeld het numerieke toetsenbord zien wanneer ze alleen maar cijfers hoeven in te voeren.
  • Mobielvriendelijke navigatie
    Laat je klanten met native mobiele-navigatiepijlen door invoervelden bladeren.
  • Toegankelijkheid (ARIA)
    Voldoe aan de W3C ARIA-standaarden, waardoor de toegankelijkheid van je site verbetert en je voorziet in de behoeften van al je klanten.
  • Dynamische verzameling van postcodes
    Verzamel postcodes alleen wanneer nodig. Met Elements wordt dynamisch bepaald of door het verzamelen van postcodes de kans op een succesvolle transactie of minder fraude toeneemt.
  • Ondersteuning van volledige breedte/CJK-cijfers
    Ondersteun CJK-cijfers, die veel worden gebruikt op Chinese, Japanse en Koreaanse softwarematige toetsenborden.
  • Responsieve lay-out
    Stripe Elements wijzigen automatisch de lay-out, zodat alles perfect in de beschikbare ruimte op het scherm van je klant past. Zo wordt invoer op kleine schermen een stuk eenvoudiger.
  • React-bindingen
    Integreer Elements met React door gebruik te maken van React Stripe.js.
  • Volledig aanpasbare stijlen
    Maak precies het formulier dat je voor ogen had, dankzij de modulaire opbouw en aanpasbare stijlen van Elements.
You’re viewing our website for Germany, but it looks like you’re in the United States.