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?

This is mandatory for customers in the European Economic Area (EEA) in order to be compliant with the Strong Customer Authentication (SCA) requirement of the PSD2. If you are attempting EEA to EEA, one-time or initial purchases through your checkout and this is not enabled, the transaction will likely not be authorized by your customer’s bank.

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.  Select the checkbox next to ‘Enable Stripe Elements’.
   
   
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.  Select the checkbox next to ‘Enable Hosted Fields / 3D Secure 2’.
   
   
   
   
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

Since 3D Secure fields are embedded on your checkout page via iFrame from your chosen payment vendor, your site’s CSS styles (font, field height and width, etc) will not apply to these fields.  Instead, any styling must be applied to the containers (divs) that each field is loaded into.  

MemberMouse has applied some CSS to make the field styling as compatible as possible with multiple themes and browsers, but there will be differences. So, we suggest reviewing your site’s checkout forms, and adjusting any styles you find necessary.  

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. In your browser window, right click the element on the checkout page you want to locate the style for, and cIlick ‘Inspect’ at the bottom of the menu to open the Inspector.  The email field works well for text field styles.

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. This section shows computed styles. It is very detailed, so it can be difficult to extract what you are looking for. But, if you can’t find the applied style in the first section, this is another way to locate the active style for an element.

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 has included CSS to match the height and width as closely as possible to the field size in most themes, but if you find the size doesn’t work for your theme, you can adjust them using the rules below to better fit.

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

This will set the height of the fields to 2.5 times the page’s font size, which is used as the basic unit of measurement in CSS. You can set the value higher or lower to make the field taller or shorter, or you can change the type of measurement used.

.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 page for information on more options.  Adding ‘inset’ after the color set will make the shadow appear inside the box instead of out.

.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

By their nature, font styles cannot be applied to the div containers, meaning that the font family, size, and other characteristics cannot be altered in the Stripe/Braintree fields.  Both the Stripe and Braintree fields pull the property values from the browser it is being displayed on, and these properties tend to be fairly consistent. If your theme’s font is very different, in order to get the font on your checkout page to match throughout, you may want to consider adding custom rules to change your theme’s font on that page to better match the embedded fields instead.

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

This will match your MemberMouse Checkout page’s font to the average browser’s properties.  The first value is weight, larger numbers will make the font thicker.  The second is size, and the third is the font family.:

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