Activation du processus de paiement 3D Secure pour l'authentification forte du client (SCA)

Pour MM 2.4.0+ , 3D Secure 2.0 est activé par défaut pour Stripe et Braintree.

Pour les commerçants situés dans l'Espace économique européen (EEE) et qui vendent à des clients également situés dans l'EEE, cela vous permet de répondre à la norme Strong Customer Authentication (SCA) prévue par la directive révisée sur les services de paiement (DSP2). Cette mesure entrera en vigueur le 14 septembre 2019. Les processeurs de paiement hors site, tels que PayPal, vous emmènent hors site et fournissent leur propre processus de conformité à l'ACS.

Pourquoi activer un système de paiement 3D Secure ?

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.

Lorsque cette option est activée, votre client est invité à effectuer une étape supplémentaire lors du paiement, au cours de laquelle sa banque lui demande de fournir des informations supplémentaires (par exemple, un code à usage unique envoyé sur son téléphone) avant que le paiement ne soit pris en compte. Les champs de saisie des informations relatives à la carte de crédit apparaissent sur votre page de paiement, mais sont intégrés à partir de Stripe ou Braintree (via iFrame). Par conséquent, les commerçants peuvent bénéficier d'une le SAQ PCI-DSS moins rigoureux en activant la caisse 3D Secure (SAQ A-EP/A vs SAQ D).

Pour les commerçants situés en dehors de l'EEE, il vous sera également utile d'activer cette fonction et nous vous le recommandons vivement. Elle peut contribuer à renforcer la sécurité de vos clients, à réduire les frais frauduleux et peut vous permettre de bénéficier d'une subvention de l'Union européenne. le SAQ PCI-DSS moins rigoureux en activant la caisse 3D Secure (SAQ A-EP/A vs SAQ D).

Il convient de noter que les abonnements et transactions récurrents fixes sont exemptés du règlement SCA. Tant que le montant du paiement reste le même, les transactions futures n'auront pas besoin de l'ACS. Si le montant du paiement change, l'authentification SCA supplémentaire sera nécessaire. Cette mesure s'applique également rétroactivement à tous les abonnements récurrents créés avant le 14 septembre 2019.

D'autres exemptions notables sont : Transactions à l'initiative du commerçant (paiements effectués avec des cartes enregistrées) et Transactions inférieures à 30 euros

IMPORTANT : Stripe.js et Stripe Elements ne peuvent être utilisés qu'au moment du paiement. Toute transaction API est non sécurisée et cette pratique entraîne des exigences plus élevées en matière de conformité PCI SAQ. Voir la page Appel API CreateMember pour plus d'informations.

Activation des éléments de Stripe (Rayure)

Suivez cette procédure si vous avez déjà configuré Stripe sur votre site et que vous souhaitez simplement activer Stripe Elements. 

Si vous devez configurer Stripe, veuillez vous référer à cet article pour des instructions de configuration complètes.

1. Depuis votre tableau de bord WordPress, allez dans SourisMembre > Paramètres de paiement et cliquez sur l'icône Modes de paiement onglet. Sous l'onglet Mode de paiement sur place, sélectionner Rayure. Les options de configuration de Stripe s'affichent.
   
   
2.  Select the checkbox next to ‘Enable Stripe Elements’.
   
   
3. Cliquez sur le bouton Sauvegarder les modes de paiement bouton.

Activation de 3D Secure 2.0 (Braintree)

Suivez cette procédure si Braintree est déjà configuré sur votre site et que vous souhaitez simplement activer 3D Secure 2. 

Si vous devez configurer Braintree, veuillez vous référer à cet article sur la configuration de Braintree.

1. Depuis votre tableau de bord WordPress, allez dans SourisMembre > Paramètres de paiement et cliquez sur l'icône Modes de paiement tabulation.
   
   
2. Sous Mode de paiement sur place, sélectionner Braintree. Les options de configuration de Braintree s'affichent.
   
   
3.  Select the checkbox next to ‘Enable Hosted Fields / 3D Secure 2’.
   
   
   
   
4. Cliquez sur le bouton Sauvegarder les modes de paiement bouton

Test de la caisse 3D Secure

Stripe et Braintree ont tous deux créé des données de test spécifiques pour tester les paiements nécessitant une authentification forte du client. Vous trouverez ces informations ainsi que des détails généraux sur le processus de test pour chaque fournisseur de paiement dans les articles ci-dessous.

Test avec Stripe

Test avec Braintree

Formatage de la caisse

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.  

Nous avons inclus quelques instructions de base pour vous aider à ajuster les styles qui peuvent l'être et qui seront différents dans toutes les caisses. Si vous avez besoin d'aide pour effectuer d'autres ajustements et que vous n'avez pas de concepteur ou de développeur à votre disposition, nous avons dressé une liste des personnes suivantes Entrepreneurs qualifiés qui ont de l'expérience avec MemberMouse.

Localisation des styles

Nous incluons quelques instructions de base pour localiser les classes de champs, ainsi que les styles déjà en place, et comment ajouter de nouveaux styles. Toutes les instructions données ici concernent le navigateur Chrome. La plupart des autres grands navigateurs disposent d'outils similaires permettant d'obtenir les mêmes résultats.

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. Lorsque l'inspecteur s'ouvre, vous voyez plusieurs sections (votre présentation peut être différente).

I. Le code HTML de l'élément sur lequel vous avez cliqué avec le bouton droit de la souris est mis en évidence dans l'inspecteur.

II. Les styles actifs sur cet élément sont affichés en couleurs vives.

Les règles CSS se divisent en trois parties.

selector {style:value}

Chaque règle commence par le sélecteur auquel elle s'applique. Pour plus d'informations, voir cet article sur Sélecteurs CSS.

- Les types d'éléments tels que input, p, button seront listés en texte brut. Les styles appliqués à un type d'élément s'appliqueront à tout élément correspondant sur la page.

- Les classes sont précédées d'un point (.). Les styles appliqués aux classes seront également appliqués à tout élément auquel cette classe a été ajoutée.

- Les identifiants seront précédés d'un dièse (#). L'identifiant de chaque élément doit être unique, de sorte que les styles appliqués à un identifiant ne s'appliqueront qu'à cette instance de l'élément.

Ensuite, entre crochets, vous verrez le type de style suivi de deux points et de la valeur du style.

Par exemple, tous les éléments de saisie de cette page auront une bordure de 2 pixels de large, unie, avec une couleur hexagonale de #d4d0ba.

Dans la partie supérieure droite de cette section, vous verrez le fichier ou l'emplacement à partir duquel le CSS a été chargé.

III. Les styles peuvent être remplacés par des règles CSS chargées ultérieurement dans la page. Les styles qui auraient été appliqués, mais qui ont été remplacés, apparaissent en texte barré.

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.

Changer de style

Une fois localisé, vous pouvez ajouter n'importe quelle règle de style CSS dans la boîte Additional CSS de votre thème située dans WordPress > Appearance > Customize > Additional CSS. Les règles énumérées ci-dessous couvrent la plupart des différences de style que vous pouvez observer entre les champs hébergés et les autres champs de votre page de paiement. Une fois que vous avez localisé la valeur de style pour le type d'élément que vous souhaitez imiter, vous pouvez l'utiliser pour ajuster les règles ci-dessous afin que les champs hébergés correspondent mieux aux autres styles de votre page. 

Taille du champ

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.

Hauteur - Détermine la hauteur d'un élément. Peut être listé dans plusieurs types de mesures. Voir l'article en lien pour plus d'informations.

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;}

Largeur - Détermine la largeur d'un élément. Peut être listé dans plusieurs types de mesures. Voir l'article en lien pour plus d'informations. Étant donné que les champs de saisie contiennent différents types d'informations, il se peut que vous souhaitiez qu'ils aient des largeurs différentes. Les règles relatives à la largeur s'appliquent donc à chaque type de champ individuellement.

Cette option permet de définir la largeur des champs relatifs aux cartes de crédit en pourcentage de l'élément parent (conteneur Détails de facturation). Vous pouvez augmenter ou diminuer la valeur pour rendre le champ plus large ou plus étroit, ou vous pouvez changer le type de mesure utilisé.

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

Cette règle définit la largeur des champs de texte CVV et Expiration en pourcentage de l'élément parent (conteneur Détails de la facturation).

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

Cela permet de définir le pourcentage de l'élément parent (conteneur des détails de facturation) pour les sélecteurs déroulants du mois et de l'année d'expiration de la carte de crédit dans Braintree.

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

Frontière

MemberMouse inclut une bordure de base pour certains champs. Vous pouvez modifier la règle ci-dessous en utilisant les valeurs de n'importe quel champ de saisie de texte de MemberMouse pour adapter les champs hébergés à votre thème.

Frontière - La propriété border est une abréviation des propriétés border-width, border-style et border-color. Si ces propriétés sont répertoriées séparément dans votre thème, vous pouvez les combiner en une seule règle pour les appliquer aux champs hébergés.

Cette règle applique une bordure pointillée de 2 pixels dont la valeur de couleur est #d55c9f.

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

Style de la boîte

La feuille de style du navigateur pour les propriétés border-radius et box-shadow tend à changer entre les ordinateurs de bureau et les appareils mobiles. Vous pouvez visualiser votre page dans différents navigateurs et appareils afin de décider si vous souhaitez définir ces styles de manière explicite pour qu'ils correspondent à votre thème (le cas échéant) ou à l'un des types de navigateurs.

Vous pouvez utiliser la feuille de style CSS suivante dans la zone CSS supplémentaire de votre thème (WordPress > Apparence > Personnaliser > CSS supplémentaire) pour définir ces caractéristiques sur les champs de saisie MemberMouse et les champs de paiement intégrés. Pour obtenir des instructions détaillées sur une propriété, cliquez sur le nom de la propriété liée.

Rayon de la bordure - définit la courbe des coins du champ. Ne s'applique qu'aux champs dont les bordures sont définies.

Pour les bordures arrondies. Augmentez la taille des pixels pour des courbes plus larges, diminuez-la pour des coins plus pointus.. :

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

Pour supprimer l'élément de bordure sur tous les champs :

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

Boîte d'ombres - Ajoute une ombre à un élément. Peut être défini dans n'importe quelle direction, à l'intérieur ou à l'extérieur.

Cela créera une légère ombre gris foncé en bas et légèrement à droite.  

Le premier chiffre est l'alignement vertical. Augmentez le nombre pour déplacer le texte vers la droite ou le négatif vers la gauche.  

Le deuxième nombre est l'alignement horizontal. Les nombres plus élevés le déplacent vers le bas, les nombres négatifs le déplacent vers le haut de la boîte.  

Le troisième chiffre correspond au flou. Des nombres plus élevés rendront l'ombre moins nette.  

Le dernier ensemble est la couleur. Vous pouvez utiliser la couleur Couleurs HTML 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);}

Cela supprimera l'ombre de tous les champs

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

Polices de caractères

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.

Police - Définit des propriétés telles que le poids de la police, la taille de la police et la famille de la police.

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;}