Aktivieren des 3D-Secure-Kassenvorgangs für die starke Kundenauthentifizierung (SCA)

Für MM 2.4.0+ ist 3D Secure 2.0 für Stripe und Braintree standardmäßig aktiviert.

Für Händler, die im Europäischen Wirtschaftsraum ansässig sind (EEA) und die an Kunden verkaufen, die ebenfalls im EWR ansässig sind, können Sie damit die Anforderungen der starken Kundenauthentifizierung (SCA), die in der überarbeiteten Richtlinie über Zahlungsdienste (PSD2). Dies wird am 14. September 2019 in Kraft treten. Offsite-Zahlungsabwickler, wie z. B. PayPal, bieten ein eigenes Verfahren zur Einhaltung des SCA an.

Warum eine 3D Secure-Kasse aktivieren?

Dies ist für Kunden im Europäischen Wirtschaftsraum (EWR) obligatorisch, um die Anforderungen der PSD2 für die starke Kundenauthentifizierung (SCA) zu erfüllen. Wenn Sie versuchen, einmalige oder erste Käufe von EWR zu EWR über Ihre Kasse zu tätigen und dies nicht aktiviert ist, wird die Transaktion wahrscheinlich nicht von der Bank Ihres Kunden autorisiert.

Wenn diese Funktion aktiviert ist, wird Ihr Kunde aufgefordert, an der Kasse einen zusätzlichen Schritt auszuführen, bei dem er von seiner Bank aufgefordert wird, zusätzliche Informationen einzugeben (z. B. einen einmaligen Code, der an sein Telefon gesendet wird), bevor die Zahlung verarbeitet wird. Die Kreditkartenfelder für die Eingabe von Zahlungsinformationen erscheinen auf Ihrer Kassenseite, werden aber von Stripe oder Braintree (über iFrame) eingebettet. Infolgedessen können sich Händler für eine weniger strenge PCI-DSS SAQ durch Aktivierung der 3D-Secure-Kasse (SAQ A-EP/A gegenüber SAQ D).

Für Händler außerhalb des EWR ist es ebenfalls von Vorteil, diese Funktion zu aktivieren, und wir empfehlen dies dringend. Es kann dazu beitragen, die Sicherheit für Ihre Kunden zu erhöhen, betrügerische Abbuchungen zu reduzieren und sich für einen Bonus zu qualifizieren. weniger strenge PCI-DSS SAQ durch Aktivierung der 3D-Secure-Kasse (SAQ A-EP/A gegenüber SAQ D).

Es ist erwähnenswert, dass feste wiederkehrende Abonnements und Transaktionen sind ausgenommen von der SCA-Verordnung. Solange der Zahlungsbetrag gleich bleibt, ist für künftige Transaktionen keine SCA erforderlich. Wenn sich der Zahlungsbetrag ändert, ist eine zusätzliche SCA-Authentifizierung erforderlich. Dies gilt auch rückwirkend für alle wiederkehrenden Abonnements, die vor dem 14. September 2019 erstellt wurden.

Einige andere bemerkenswerte Ausnahmen sind: Vom Händler initiierte Transaktionen (Zahlungen mit gespeicherten Karten) und Transaktionen unter 30 €

WICHTIG! Stripe.js und Stripe Elements können nur an der Kasse verwendet werden. Jegliche API-Transaktionen sind untokenized und diese Praxis führt zu höheren PCI-Compliance SAQ-Anforderungen. Siehe die CreateMember API-Aufruf Artikel für weitere Informationen.

Aktivieren von Stripe-Elementen (Streifen)

Folgen Sie diesem Verfahren, wenn Sie Stripe bereits auf Ihrer Website konfiguriert haben und lediglich Stripe-Elemente aktivieren möchten. 

Wenn Sie Stripe konfigurieren müssen, lesen Sie bitte diesen Artikel für eine vollständige Konfigurationsanleitung.

1. Gehen Sie in Ihrem WordPress Dashboard zu MemberMouse > Zahlungseinstellungen und klicken Sie auf das Zahlungsarten Registerkarte. Unter Zahlungsmethode vor Ortauswählen Streifen. Daraufhin werden die Stripe-Konfigurationsoptionen angezeigt.
   
   
2.  Aktivieren Sie das Kontrollkästchen neben "Stripe-Elemente aktivieren".
   
   
3. Klicken Sie auf die Zahlungsarten speichern Taste.

Aktivieren von 3D Secure 2.0 (Braintree)

Gehen Sie wie folgt vor, wenn Sie Braintree bereits auf Ihrer Website konfiguriert haben und lediglich 3D Secure 2 aktivieren möchten. 

Wenn Sie Braintree konfigurieren müssen, lesen Sie bitte diesen Artikel über die Konfiguration von Braintree.

1. Gehen Sie in Ihrem WordPress Dashboard zu MemberMouse > Zahlungseinstellungen und klicken Sie auf das Zahlungsarten tab.
   
   
2. Unter Zahlungsmethode vor Ortauswählen Braintree. Daraufhin werden die Braintree-Konfigurationsoptionen angezeigt.
   
   
3.  Aktivieren Sie das Kontrollkästchen neben "Hosted Fields / 3D Secure 2 aktivieren".
   
   
   
   
4. Klicken Sie auf die Zahlungsarten speichern Taste

Testen der 3D-Secure-Kasse

Sowohl Stripe als auch Braintree haben spezielle Testdaten zum Testen von Zahlungen erstellt, für die eine starke Kundenauthentifizierung erforderlich ist. Sie finden diese Informationen sowie allgemeine Details über den Testprozess für jeden Zahlungsanbieter in den unten stehenden Artikeln.

Testen mit Stripe

Testen mit Braintree

Formatierung der Kasse

Da 3D Secure-Felder über einen iFrame des gewählten Zahlungsanbieters in Ihre Kassenseite eingebettet werden, werden die CSS-Stile Ihrer Website (Schriftart, Feldhöhe und -breite usw.) nicht auf diese Felder angewendet. Stattdessen müssen alle Stile auf die Container (Divs) angewendet werden, in die jedes Feld geladen wird.  

MemberMouse hat CSS angewendet, um die Gestaltung der Felder so kompatibel wie möglich mit verschiedenen Themen und Browsern zu machen, aber es wird Unterschiede geben. Wir empfehlen daher, die Kassenformulare Ihrer Website zu überprüfen und die Stile anzupassen, wenn Sie dies für notwendig halten.  

Wir haben einige grundlegende Anweisungen beigefügt, um Sie bei der Anpassung der Stile zu unterstützen, die angepasst werden können und in allen Kassen unterschiedlich sind. Wenn Sie Unterstützung bei weiteren Anpassungen benötigen und keinen Designer oder Entwickler zur Verfügung haben, haben wir eine Liste von Qualifizierte Auftragnehmer die Erfahrung in der Arbeit mit MemberMouse haben.

Auffinden von Stilen

Wir fügen einige grundlegende Anleitungen zum Auffinden der Feldklassen sowie aller bereits vorhandenen Stile und zum Hinzufügen neuer eigener Stile bei. Alle Anweisungen hier beziehen sich auf den Desktop-Browser Chrome. Die meisten anderen gängigen Browser verfügen über ähnliche Tools, mit denen sich die gleichen Ergebnisse erzielen lassen.

1. Klicken Sie in Ihrem Browserfenster mit der rechten Maustaste auf das Element auf der Kassenseite, für das Sie den Stil suchen, und klicken Sie unten im Menü auf "Prüfen", um den Inspektor zu öffnen. Das E-Mail-Feld eignet sich gut für Textfeldstile.

2. Wenn sich der Inspektor öffnet, sehen Sie mehrere Abschnitte (Ihr Layout kann anders aussehen).

I. Der HTML-Code für das Element, auf das Sie mit der rechten Maustaste geklickt haben, wird im Inspektor hervorgehoben.

II. Die für dieses Element aktiven Stile werden in hellen Farben angezeigt.

Die CSS-Regeln bestehen aus drei Abschnitten.

Selektor {style:value}

Jede Regel beginnt mit dem Selektor, für den die Regel gilt. Weitere Informationen finden Sie in diesem Artikel über CSS-Selektoren.

- Elementtypen wie input, p, button werden im Klartext aufgelistet. Stile, die auf einen Elementtyp angewendet werden, gelten für alle entsprechenden Elemente auf der Seite.

- Den Klassen wird ein Punkt (.) vorangestellt. Stile, die auf Klassen angewendet werden, werden auch auf jedes Element angewendet, dem diese Klasse hinzugefügt wurde.

- Den IDs wird eine Raute vorangestellt (#). Die ID für jedes Element sollte eindeutig sein, so dass Stile, die auf eine ID angewendet werden, nur für diese Instanz dieses Elements gelten.

In geschweiften Klammern steht dann der Stiltyp, gefolgt von einem Doppelpunkt und dem Stilwert.

Zum Beispiel haben alle Eingabeelemente auf dieser Seite einen 2 Pixel breiten, durchgehenden Rahmen mit der Farbe #d4d0ba.

Oben rechts in diesem Abschnitt sehen Sie die Datei oder den Speicherort, aus dem das CSS geladen wurde.

III. Stile können durch CSS-Regeln überschrieben werden, die später auf der Seite geladen werden. Stile, die angewendet worden wären, aber überschrieben wurden, erscheinen als durchgestrichener Text.

IV. Dieser Abschnitt zeigt die berechneten Stile. Er ist sehr detailliert, so dass es schwierig sein kann, das zu extrahieren, wonach Sie suchen. Aber wenn Sie den angewandten Stil im ersten Abschnitt nicht finden können, ist dies eine weitere Möglichkeit, den aktiven Stil für ein Element zu finden.

Wechselnde Stile

Sobald Sie diese gefunden haben, können Sie beliebige CSS-Stilregeln in das Feld Zusätzliches CSS Ihres Themes unter WordPress > Erscheinungsbild > Anpassen > Zusätzliches CSS hinzufügen. Die unten aufgeführten Regeln decken die meisten der Stilunterschiede ab, die zwischen den gehosteten Feldern und den anderen Feldern auf Ihrer Kassenseite auftreten können. Sobald Sie den Stilwert für die Art des Elements, das Sie nachahmen möchten, gefunden haben, können Sie damit die unten aufgeführten Regeln anpassen, damit die gehosteten Felder besser mit den anderen Stilen auf Ihrer Seite übereinstimmen. 

Feldgröße

MemberMouse hat CSS eingefügt, um die Höhe und Breite so weit wie möglich an die Feldgröße in den meisten Themen anzupassen. Wenn Sie jedoch feststellen, dass die Größe für Ihr Thema nicht geeignet ist, können Sie sie mit den unten stehenden Regeln anpassen, damit sie besser passt.

Höhe - Bestimmt, wie hoch ein Element ist. Kann in mehreren Maßtypen aufgeführt werden. Siehe den verlinkten Artikel für weitere Informationen.

Damit wird die Höhe der Felder auf das 2,5-fache der Schriftgröße der Seite festgelegt, was als grundlegende Maßeinheit in CSS verwendet wird. Sie können den Wert höher oder niedriger einstellen, um das Feld größer oder kleiner zu machen, oder Sie können die Art der verwendeten Messung ändern.

.StripeElement, .mm-braintree-hosted-field {height: 2.5em;}

Breite - Bestimmt, wie breit ein Element ist. Kann in mehreren Maßtypen aufgeführt werden. Weitere Informationen finden Sie in dem verlinkten Artikel. Da die Eingabefelder verschiedene Arten von Informationen enthalten, möchten Sie vielleicht, dass sie unterschiedlich breit sind. Die Regeln für die Breite gelten daher für jeden Feldtyp einzeln.

Damit wird die Breite der Kreditkartenfelder als Prozentsatz des übergeordneten Elements (Container Rechnungsdetails) festgelegt. Sie können den Wert höher oder niedriger einstellen, um das Feld breiter oder schmaler zu machen, oder Sie können die Art der verwendeten Messung ändern.

##mm_braintree_cc_number, #mm_field_cc_number_div {width: 50%;}

Diese Regel legt die Breite für die Textfelder CVV und Verfall in Prozent des übergeordneten Elements (Container Rechnungsdetails) fest.

#mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width: 25%;}

Dies wird die mit für die Kreditkarte Ablauf Monat und Jahr Dropdown-Selektoren in Braintree als Prozentsatz des übergeordneten Elements (Billing Details Container).

#mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width: 25%;}

Grenze

MemberMouse enthält einen einfachen Rahmen für einige Felder. Sie können die unten stehende Regel mit Werten aus einem beliebigen Texteingabefeld der MemberMouse ändern, um die gehosteten Felder an Ihr Design anzupassen.

Grenze - Die Eigenschaft border ist eine Kurzform für die Eigenschaften border-width, border-style und border-color. Wenn sie in Ihrem Design separat aufgeführt sind, können Sie sie in einer einzigen Regel kombinieren, um sie auf die gehosteten Felder anzuwenden.

Diese Regel wendet einen gepunkteten Rahmen von 2 Pixeln mit dem Farbwert #d55c9f an.

.StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border: 2px dotted #d55c9f;}

Box-Styling

Das Browser-Stylesheet für die Eigenschaften border-radius und box-shadow ändert sich in der Regel zwischen Desktop- und Mobilgeräten. Sie sollten Ihre Seite in verschiedenen Browsern und auf verschiedenen Geräten anzeigen, um zu entscheiden, ob Sie diese Stile explizit so einstellen möchten, dass sie zu Ihrem Design (falls vorhanden) oder zu einem der Browsertypen passen.

Sie können das folgende CSS im Feld Zusätzliches CSS Ihres Designs (WordPress > Erscheinungsbild > Anpassen > Zusätzliches CSS) verwenden, um diese Eigenschaften für die MemberMouse-Eingabe und die eingebetteten Zahlungsfelder festzulegen. Detaillierte Anweisungen zu jeder Eigenschaft erhalten Sie, wenn Sie auf den verlinkten Eigenschaftsnamen klicken.

Radius der Grenze - legt die Kurve der Feldecken fest. Gilt nur für Felder mit festgelegten Grenzen.

Für abgerundete Ränder. Erhöhen Sie die Pixelgröße für größere Kurven, verringern Sie sie für spitzere Ecken..:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: 5px;}

So entfernen Sie das Rahmenelement bei allen Feldern:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: none;}

Box Schatten - Fügt einem Element einen Schatten hinzu. Kann auf eine beliebige Richtung, innen oder außen, eingestellt werden.

Dadurch wird ein leichter dunkelgrauer Schatten nach unten und leicht nach rechts gesetzt.  

Die erste Zahl ist die vertikale Ausrichtung. Erhöhen Sie die Zahl, um sie weiter nach rechts oder negativ nach links zu verschieben.  

Die zweite Zahl ist die horizontale Ausrichtung. Höhere Zahlen verschieben es weiter nach unten, negative Zahlen verschieben es über das Feld.  

Die dritte Zahl ist die Unschärfe. Höhere Werte lassen den Schatten weniger scharf erscheinen.  

Der letzte Satz ist die Farbe. Sie können die HTML-Farben Seite für Informationen über weitere Optionen. Wenn Sie nach dem Farbsatz "einfügen" hinzufügen, wird der Schatten innerhalb des Rahmens statt außerhalb erscheinen.

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {box-shadow: 1px 1px 5px rgb(120,120,120);}

Dadurch wird der Schatten von allen Feldern entfernt

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {keine;}

Schriftarten

Schriftstile können naturgemäß nicht auf die div-Container angewendet werden, was bedeutet, dass die Schriftfamilie, die Größe und andere Merkmale in den Stripe/Braintree-Feldern nicht geändert werden können. Sowohl die Stripe- als auch die Braintree-Felder ziehen die Eigenschaftswerte aus dem Browser, in dem sie angezeigt werden, und diese Eigenschaften sind in der Regel ziemlich einheitlich. Wenn die Schriftart Ihres Themes sehr unterschiedlich ist, sollten Sie, damit die Schriftart auf Ihrer Kassenseite durchgängig übereinstimmt, in Betracht ziehen, benutzerdefinierte Regeln hinzuzufügen, um die Schriftart Ihres Themes auf dieser Seite so zu ändern, dass sie besser zu den eingebetteten Feldern passt.

Schriftart - Legt Eigenschaften wie Schriftstärke, Schriftgröße und Schriftfamilie fest.

Damit wird die Schriftart Ihrer MemberMouse Checkout-Seite an die durchschnittlichen Browsereigenschaften angepasst. Der erste Wert ist weight (Gewicht), größere Zahlen machen die Schrift dicker. Der zweite ist die Größe und der dritte die Schriftfamilie..:

.mm-textField, .mm-selectList {font: 400 13px sans-serif;}