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 ?

Cette option est obligatoire pour les clients de l'Espace économique européen (EEE) afin d'être conforme à l'exigence d'authentification forte du client (SCA) de la DSP2. Si vous tentez des achats uniques ou initiaux entre pays de l'EEE par le biais de votre caisse et que cette option n'est pas activée, la transaction ne sera probablement pas autorisée par la banque de votre client.

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.  Cochez la case située à côté de "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.  Cochez la case située à côté de "Activer les champs hébergés / 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

Étant donné que les champs 3D Secure sont intégrés à votre page de paiement via une iFrame du fournisseur de paiement choisi, les styles CSS de votre site (police, hauteur et largeur des champs, etc.) ne s'appliqueront pas à ces champs. ) ne s'appliqueront pas à ces champs. Au contraire, tout style doit être appliqué aux conteneurs (divs) dans lesquels chaque champ est chargé.  

MemberMouse a appliqué quelques feuilles de style CSS pour rendre le style des champs aussi compatible que possible avec plusieurs thèmes et navigateurs, mais il y aura des différences. Nous vous conseillons donc de revoir les formulaires de paiement de votre site et d'ajuster les styles que vous jugez nécessaires.  

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. Dans la fenêtre de votre navigateur, cliquez avec le bouton droit de la souris sur l'élément de la page de paiement pour lequel vous souhaitez localiser le style, puis cliquez sur "Inspecter" en bas du menu pour ouvrir l'inspecteur. Le champ e-mail fonctionne bien pour les styles de champ de texte.

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. Cette section présente les styles calculés. Elle est très détaillée et il peut être difficile d'en extraire ce que l'on cherche. Mais si vous ne parvenez pas à trouver le style appliqué dans la première section, il s'agit d'une autre façon de localiser le style actif d'un élément.

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 a inclus une feuille de style CSS pour que la hauteur et la largeur correspondent le plus possible à la taille du champ dans la plupart des thèmes, mais si vous constatez que la taille ne convient pas à votre thème, vous pouvez les ajuster à l'aide des règles ci-dessous pour qu'elles soient mieux adaptées.

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.

La hauteur des champs est ainsi fixée à 2,5 fois la taille de la police de la page, qui est l'unité de mesure de base en CSS. Vous pouvez augmenter ou diminuer la valeur pour que le champ soit plus grand ou plus petit, ou vous pouvez changer le type de mesure utilisé.

.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 pour obtenir des informations sur d'autres options. En ajoutant "inset" après le jeu de couleurs, l'ombre apparaîtra à l'intérieur de la boîte plutôt qu'à l'extérieur.

<.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

De par leur nature, les styles de police ne peuvent pas être appliqués aux conteneurs div, ce qui signifie que la famille de police, la taille et d'autres caractéristiques ne peuvent pas être modifiées dans les champs Stripe/Braintree. Les champs Stripe et Braintree tirent les valeurs de propriété du navigateur sur lequel ils sont affichés, et ces propriétés ont tendance à être assez cohérentes. Si la police de votre thème est très différente, vous pouvez envisager d'ajouter des règles personnalisées pour modifier la police de votre thème sur cette page afin qu'elle corresponde mieux aux champs intégrés, afin que la police de votre page de paiement corresponde à l'ensemble des champs.

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.

Cette fonction permet de faire correspondre la police de votre page de paiement MemberMouse aux propriétés du navigateur moyen. La première valeur est le poids, les nombres les plus élevés rendant la police plus épaisse. La deuxième valeur est la taille, et la troisième est la famille de polices.. :

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