Kaartbetalingen met MOTO

Mail Order/Telephone Order (MOTO) betalingen

De JS library wordt ook geleverd met Mail Order & Telephone Order support (MOTO). MOTO stelt onze verkopers in staat om betaalkaartgegevens via de telefoon of e-mail te accepteren en te beheren wanneer de kaart van de klant niet fysiek aanwezig is.

Voordat u aan de slag gaat met MOTO, moet u ervoor zorgen dat u een acquiring merchant ID hebt die MOTO ondersteunt en dat uw sitereference is geconfigureerd met een MOTO account. Neem bij twijfel contact op met ons supportteam voor meer informatie.

MOTO betalingen accepteren

Om te beginnen met het accepteren van MOTO betalingen, moet je onze JS library's kaartcomponenten integreren. Let op: Dit zijn dezelfde kaartcomponenten die worden gebruikt door winkeliers die e-commerce (ECOM) betalingen accepteren.

JS-kaartonderdelen toevoegen aan je betaalpagina

Volg de onderstaande stappen om kaartcomponenten toe te voegen aan je betaalpagina:

Betalingsformulier toevoegen

Begin met het toevoegen van ons betalingsformulier in je HTML. Bijvoorbeeld:

<html>
  <head>
  </head>
  <body>
    <form id="st-form" action="https://www.example.com" method="POST">
      <div id="st-card-number"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code"></div>
      <button type="submit">Pay securely</button>
    </form>
  </body>
</html>

Als je het formulier-id wilt wijzigen in iets anders dan "st-form", kun je onze configuratiegids raadplegen en zoeken naar formId. De containerid's van de kaartcomponenten, bijv. st-card-number hetzelfde zijn als in het voorbeeld hierboven.

Initialiseer de JS en roep de methode Components op

Om de kaartcomponenten te renderen, moet je onze bibliotheek ophalen van de Trust Payments CDN en in een anonieme functie een instantie van SecureTrading maken. De SecureTrading constructor accepteert een configuratieobject dat een jwt-sleutel moet bevatten, met een ondertekende JSON Web Token (JWT)-waarde die is aangemaakt op je verkopersserver. De jwt payload bevat alle informatie met betrekking tot de betalingstransactie, bijv. bedrag, facturering, levering en rekeningtype, bijv. MOTO, enz.

Door st.Components, waarbij st verwijst naar je instantie van SecureTrading, zal de bibliotheek elke kaartcomponent (pan, vervaldatum, cvv) insluiten op het betalingsformulier binnen de hoofdcontainers, bijv. st-card-number zal de pan invoercomponent bevatten.

Bijvoorbeeld:

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com" method="POST">
      <div id="st-card-number"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code" data-st-input-optional="true"></div>
      <button type="submit">Pay securely</button>
    </form>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script>
      (function() {
        var st = SecureTrading({
          jwt : 'A signed JWT created on the merchant server'
        });
        st.Components();
    })();
    </script>
  </body>
</html>

Wanneer u de Content Delivery Network (CDN) gebruikt om te verwijzen naar de st.js library, wees u er dan van bewust dat de CDN verzoeken van uw localhost/127.0.0.1 omgeving zal blokkeren. Om uw applicatie lokaal te testen met CDN, moet u uw testapplicatie draaien met uw IPv4 adres in plaats van localhost. Na het uitvoeren van een lookup van uw IPv4-adres, moet u localhost in uw browser vervangen door het opgehaalde IP-adres.

MOTO betalingen zonder CVV accepteren

Voor Mail Order/Telephone Order-betalingen (MOTO) hebt u de Kaartverificatiewaarde (CVV) niet altijd nodig of beschikbaar en daarom kunt u op JS library het CVV-veld als optioneel configureren in ons betalingsformulier. Volg de onderstaande stappen om de CVV als optioneel te configureren:

Gegevensattribuut toevoegen aan CVV-basiscontainer

Door de naam van het gegevensattribuut data-st-input-optional="true" in te stellen op de CVV rootcontainer, d.w.z. st-security-code wordt ervoor gezorgd dat het betalingsformulier kan worden verzonden zonder eerst een waarde te hebben ingevoerd in de CVV-invoer.

Let op: Zelfs na het instellen van het gegevenseigenschap, als een gedeeltelijke of ongeldige CVV wordt ingevoerd, zal de standaard CVV-veldvalidatie worden afgedwongen.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com" method="POST">
      <div id="st-card-number"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code" data-st-input-optional="true"></div>
      <button type="submit">Pay securely</button>
    </form>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script>
      (function() {
        var st = SecureTrading({
          jwt : 'A signed JWT created on the merchant server'
        });
        st.Components();
    })();
    </script>
  </body>
</html>

Verberg sterretje van CVV-label (optioneel)

Optioneel kun je ervoor kiezen om het sterretje naast het CVV-invoerlabel te verwijderen om aan te geven dat de CVV niet vereist is. Volg de onderstaande stappen om te voorkomen dat er een sterretje wordt weergegeven:

Werk je Styles-configuratie bij:

Met behulp van de stijlenopties die beschikbaar zijn in onze JS, kun je "display-asterisk" expliciet als false instellen op securityCode en dit verwijdert het sterretje alleen naast het CVV-veldlabel en de andere kaartinvoerlabels blijven ongewijzigd.

Vermijd het gelijktijdig instellen van de stijlen API color-asterisk & display-asterisk .

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com" method="POST">
      <div id="st-card-number"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code" data-st-input-optional="true"></div>
      <button type="submit">Pay securely</button>
    </form>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script>
      (function() {
        var st = SecureTrading({
          jwt : 'A signed JWT created on the merchant server',
          "styles": { 
            "defaultStyles": { 
            }, 
            "cardNumber": { 
            }, 
            "expirationDate": { 
            }, 
            "securityCode": { 
              "display-asterisk": false, 
          },
        });
        st.Components();
    })();
    </script>
  </body>
</html>

Voordat u live gaat

Net als bij het verwerken van kaartbetalingen voor e-commerce, raden we je aan om webhooks te configureren om je systeem op de hoogte te stellen van elke nieuwe transactie die wordt verwerkt.
Als je betaalpagina een Content Security Policy gebruikt, bekijk dan onze CSP beleidslijst en pas deze aan.
Bekijk tot slot onze go live controles voordat u uw oplossing publiceert voor productie.

Meer lezen over dit onderwerp