{"id":8316,"date":"2023-08-16T06:18:37","date_gmt":"2023-08-16T13:18:37","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&amp;p=8316"},"modified":"2023-08-16T06:18:37","modified_gmt":"2023-08-16T13:18:37","slug":"activer-le-processus-de-paiement-securise-3d-pour-une-authentification-forte-du-client-sca","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/fr\/documents-3-2\/activer-le-processus-de-paiement-securise-3d-pour-une-authentification-forte-du-client-sca\/","title":{"rendered":"Activation du processus de paiement 3D Secure pour l'authentification forte du client (SCA)"},"content":{"rendered":"<p><strong><em>Pour MM 2.4.0+ , 3D Secure 2.0 est activ\u00e9 par d\u00e9faut pour Stripe et Braintree.<\/em><\/strong><\/p>\n\n\n\n<p>Pour les commer\u00e7ants situ\u00e9s dans l'Espace \u00e9conomique europ\u00e9en (<a href=\"https:\/\/en.wikipedia.org\/wiki\/European_Economic_Area\" target=\"_blank\" rel=\"noreferrer noopener\">EEE<\/a>) et qui vendent \u00e0 des clients \u00e9galement situ\u00e9s dans l'EEE, cela vous permet de r\u00e9pondre \u00e0 la norme Strong Customer Authentication (<a href=\"https:\/\/stripe.com\/guides\/strong-customer-authentication\" target=\"_blank\" rel=\"noreferrer noopener\">SCA<\/a>) pr\u00e9vue par la directive r\u00e9vis\u00e9e sur les services de paiement (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Payment_Services_Directive#Revised_Directive_on_Payment_Services_(PSD2\" target=\"_blank\" rel=\"noreferrer noopener\">DSP2<\/a>). Cette mesure entrera en vigueur le 14 septembre 2019. Les processeurs de paiement hors site, tels que PayPal, vous emm\u00e8nent hors site et fournissent leur propre processus de conformit\u00e9 \u00e0 l'ACS.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Pourquoi activer un syst\u00e8me de paiement 3D Secure ?<\/strong><br><\/h5>\n\n\n\n<p>Cette option est obligatoire pour les clients de l'Espace \u00e9conomique europ\u00e9en (EEE) afin d'\u00eatre conforme \u00e0 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\u00e9e, la transaction ne sera probablement pas autoris\u00e9e par la banque de votre client. <\/p>\n\n\n\n<p>Lorsque cette option est activ\u00e9e, votre client est invit\u00e9 \u00e0 effectuer une \u00e9tape suppl\u00e9mentaire lors du paiement, au cours de laquelle sa banque lui demande de fournir des informations suppl\u00e9mentaires (par exemple, un code \u00e0 usage unique envoy\u00e9 sur son t\u00e9l\u00e9phone) avant que le paiement ne soit pris en compte. Les champs de saisie des informations relatives \u00e0 la carte de cr\u00e9dit apparaissent sur votre page de paiement, mais sont int\u00e9gr\u00e9s \u00e0 partir de Stripe ou Braintree (via iFrame). Par cons\u00e9quent, les commer\u00e7ants peuvent b\u00e9n\u00e9ficier d'une\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.pcicomplianceguide.org\/pci-saq-3-1-e-commerce-options-explained\/\" target=\"_blank\">le SAQ PCI-DSS moins rigoureux<\/a>\u00a0en activant la caisse 3D Secure (SAQ A-EP\/A vs SAQ D).<\/p>\n\n\n\n<p>Pour les commer\u00e7ants situ\u00e9s en dehors de l'EEE, il vous sera \u00e9galement utile d'activer cette fonction et nous vous le recommandons vivement. Elle peut contribuer \u00e0 renforcer la s\u00e9curit\u00e9 de vos clients, \u00e0 r\u00e9duire les frais frauduleux et peut vous permettre de b\u00e9n\u00e9ficier d'une subvention de l'Union europ\u00e9enne.&nbsp;<a href=\"https:\/\/www.pcicomplianceguide.org\/pci-saq-3-1-e-commerce-options-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">le SAQ PCI-DSS moins rigoureux<\/a>&nbsp;en activant la caisse 3D Secure (SAQ A-EP\/A vs SAQ D).<\/p>\n\n\n\n<p>Il convient de noter que&nbsp;<strong>les abonnements et transactions r\u00e9currents fixes sont exempt\u00e9s<\/strong>&nbsp;du r\u00e8glement SCA. Tant que le montant du paiement reste le m\u00eame, les transactions futures n'auront pas besoin de l'ACS. Si le montant du paiement change, l'authentification SCA suppl\u00e9mentaire sera n\u00e9cessaire. Cette mesure s'applique \u00e9galement r\u00e9troactivement \u00e0 tous les abonnements r\u00e9currents cr\u00e9\u00e9s avant le 14 septembre 2019.<\/p>\n\n\n\n<p>D'autres exemptions notables sont :&nbsp;<strong>Transactions \u00e0 l'initiative du commer\u00e7ant<\/strong>&nbsp;(paiements effectu\u00e9s avec des cartes enregistr\u00e9es) et&nbsp;<strong>Transactions inf\u00e9rieures \u00e0 30 euros<\/strong><\/p>\n\n\n\n<p><strong>IMPORTANT :&nbsp;<\/strong>Stripe.js et Stripe Elements ne peuvent \u00eatre utilis\u00e9s qu'au moment du paiement.  Toute transaction API est non s\u00e9curis\u00e9e et cette pratique entra\u00eene des exigences plus \u00e9lev\u00e9es en mati\u00e8re de conformit\u00e9 PCI SAQ. Voir la page<a href=\"https:\/\/membermouse.com\/fr\/documents-3-2\/appel-a-lapi-createmember\/\" target=\"_blank\" rel=\"noreferrer noopener\">&nbsp;Appel API CreateMember<\/a>&nbsp;pour plus d'informations.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Activation des \u00e9l\u00e9ments de Stripe<em>&nbsp;(Rayure)<\/em><\/strong><\/h5>\n\n\n\n<p><em>Suivez cette proc\u00e9dure si vous avez d\u00e9j\u00e0 configur\u00e9 Stripe sur votre site et que vous souhaitez simplement activer Stripe Elements.&nbsp;<\/em><\/p>\n\n\n\n<p><em>Si vous devez configurer Stripe, veuillez vous r\u00e9f\u00e9rer \u00e0&nbsp;<\/em><em><a href=\"https:\/\/membermouse.com\/fr\/documents-3-2\/configuration-du-stripe\/\">cet article pour des instructions de configuration compl\u00e8tes.<\/a><\/em><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Depuis votre tableau de bord WordPress, allez dans\u00a0<em>SourisMembre &gt; Param\u00e8tres de paiement<\/em>\u00a0et cliquez sur l'ic\u00f4ne\u00a0<em>Modes de paiement<\/em>\u00a0onglet. Sous l'onglet\u00a0<em>Mode de paiement sur place<\/em>, s\u00e9lectionner\u00a0<em>Rayure<\/em>. Les options de configuration de Stripe s'affichent.<br><br><\/li>\n\n\n\n<li>\u00a0Cochez la case situ\u00e9e \u00e0 c\u00f4t\u00e9 de \"Enable Stripe Elements\".<br><br><\/li>\n\n\n\n<li>Cliquez sur le bouton&nbsp;<em>Sauvegarder les modes de paiement&nbsp;<\/em>bouton.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Activation de 3D Secure 2.0&nbsp;<em>(Braintree)<\/em><\/strong><\/h5>\n\n\n\n<p><em>Suivez cette proc\u00e9dure si Braintree est d\u00e9j\u00e0 configur\u00e9 sur votre site et que vous souhaitez simplement activer 3D Secure 2.&nbsp;<\/em><\/p>\n\n\n\n<p><em>Si vous devez configurer Braintree, veuillez vous r\u00e9f\u00e9rer \u00e0&nbsp;<\/em><em><a href=\"https:\/\/membermouse.com\/fr\/documents-3-2\/configuration-de-braintree\/\">cet article sur la configuration de Braintree.<\/a><\/em><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Depuis votre tableau de bord WordPress, allez dans\u00a0<em>SourisMembre &gt; Param\u00e8tres de paiement<\/em>\u00a0et cliquez sur l'ic\u00f4ne\u00a0<em>Modes de paiement<\/em>\u00a0tabulation.<br><br><\/li>\n\n\n\n<li>Sous\u00a0<em>Mode de paiement sur place<\/em>, s\u00e9lectionner\u00a0<em>Braintree<\/em>. Les options de configuration de Braintree s'affichent.<br><br><\/li>\n\n\n\n<li>\u00a0Cochez la case situ\u00e9e \u00e0 c\u00f4t\u00e9 de \"Activer les champs h\u00e9berg\u00e9s \/ 3D Secure 2\".<br><br><img decoding=\"async\" class=\"wp-image-10646\" style=\"width: 600px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/59b37a23-tzxbvbwq6qosq262wqcr1ib9psws6kgkoa.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Cliquez sur le bouton&nbsp;<em>Sauvegarder les modes de paiement&nbsp;<\/em>bouton<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"format\"><strong>Test de la caisse 3D Secure<\/strong><\/h5>\n\n\n\n<p>Stripe et Braintree ont tous deux cr\u00e9\u00e9 des donn\u00e9es de test sp\u00e9cifiques pour tester les paiements n\u00e9cessitant une authentification forte du client. Vous trouverez ces informations ainsi que des d\u00e9tails g\u00e9n\u00e9raux sur le processus de test pour chaque fournisseur de paiement dans les articles ci-dessous.<\/p>\n\n\n\n<p><a href=\"https:\/\/membermouse.com\/fr\/documents-3-2\/test-avec-bande\/\">Test avec Stripe<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/membermouse.com\/fr\/documents-3-2\/test-avec-braintree\/\">Test avec Braintree<\/a><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"format\"><strong>Formatage de la caisse<\/strong><\/h5>\n\n\n\n<p>\u00c9tant donn\u00e9 que les champs 3D Secure sont int\u00e9gr\u00e9s \u00e0 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 \u00e0 ces champs.  ) ne s'appliqueront pas \u00e0 ces champs. Au contraire, tout style doit \u00eatre appliqu\u00e9 aux conteneurs (divs) dans lesquels chaque champ est charg\u00e9. \u00a0<\/p>\n\n\n\n<p>MemberMouse a appliqu\u00e9 quelques feuilles de style CSS pour rendre le style des champs aussi compatible que possible avec plusieurs th\u00e8mes et navigateurs, mais il y aura des diff\u00e9rences. Nous vous conseillons donc de revoir les formulaires de paiement de votre site et d'ajuster les styles que vous jugez n\u00e9cessaires. \u00a0<\/p>\n\n\n\n<p>Nous avons inclus quelques instructions de base pour vous aider \u00e0 ajuster les styles qui peuvent l'\u00eatre et qui seront diff\u00e9rents 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\u00e9veloppeur \u00e0 votre disposition, nous avons dress\u00e9 une liste des personnes suivantes\u00a0<a href=\"http:\/\/activating%20the%203d%20secure%20checkout%20process%20for%20strong%20customer%20authentication%20%28sca%29\/\">Entrepreneurs qualifi\u00e9s<\/a>\u00a0qui ont de l'exp\u00e9rience avec MemberMouse.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Localisation des styles<\/h6>\n\n\n\n<p>Nous incluons quelques instructions de base pour localiser les classes de champs, ainsi que les styles d\u00e9j\u00e0 en place, et comment ajouter de nouveaux styles.  Toutes les instructions donn\u00e9es ici concernent le navigateur Chrome.  La plupart des autres grands navigateurs disposent d'outils similaires permettant d'obtenir les m\u00eames r\u00e9sultats.<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>1. Dans la fen\u00eatre de votre navigateur, cliquez avec le bouton droit de la souris sur l'\u00e9l\u00e9ment 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.<br><br><img decoding=\"async\" class=\"wp-image-10647\" style=\"width: 350px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/b44b1ae2-myg8bj7nzewstkoiyzmj0p4h0gbyobmvvw.png\" alt=\"\"><br><br><\/p>\n\n\n\n<p>2. Lorsque l'inspecteur s'ouvre, vous voyez plusieurs sections (votre pr\u00e9sentation peut \u00eatre diff\u00e9rente).<br><br><img decoding=\"async\" class=\"wp-image-10648\" style=\"width: 550px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/3a485884-rbsfnkfdec_pd0cju1yoq99vdzh1xib2wq.png\" alt=\"\"><br><br><\/p>\n\n\n\n<p><strong>I.<\/strong>\u00a0Le code HTML de l'\u00e9l\u00e9ment sur lequel vous avez cliqu\u00e9 avec le bouton droit de la souris est mis en \u00e9vidence dans l'inspecteur.<br><\/p>\n\n\n\n<p><strong>II.<\/strong>\u00a0Les styles actifs sur cet \u00e9l\u00e9ment sont affich\u00e9s en couleurs vives.<\/p>\n\n\n\n<p>Les r\u00e8gles CSS se divisent en trois parties.<\/p>\n\n\n\n<p>selector {style:value}<\/p>\n\n\n\n<p>Chaque r\u00e8gle commence par le s\u00e9lecteur auquel elle s'applique. Pour plus d'informations, voir cet article sur&nbsp;<a href=\"https:\/\/www.w3schools.com\/css\/css_selectors.asp\" target=\"_blank\" rel=\"noreferrer noopener\">S\u00e9lecteurs CSS<\/a>.<\/p>\n\n\n\n<p>- Les types d'\u00e9l\u00e9ments tels que input, p, button seront list\u00e9s en texte brut. Les styles appliqu\u00e9s \u00e0 un type d'\u00e9l\u00e9ment s'appliqueront \u00e0 tout \u00e9l\u00e9ment correspondant sur la page.<\/p>\n\n\n\n<p>- Les classes sont pr\u00e9c\u00e9d\u00e9es d'un point (.). Les styles appliqu\u00e9s aux classes seront \u00e9galement appliqu\u00e9s \u00e0 tout \u00e9l\u00e9ment auquel cette classe a \u00e9t\u00e9 ajout\u00e9e.<\/p>\n\n\n\n<p>- Les identifiants seront pr\u00e9c\u00e9d\u00e9s d'un di\u00e8se (#).  L'identifiant de chaque \u00e9l\u00e9ment doit \u00eatre unique, de sorte que les styles appliqu\u00e9s \u00e0 un identifiant ne s'appliqueront qu'\u00e0 cette instance de l'\u00e9l\u00e9ment.<\/p>\n\n\n\n<p>Ensuite, entre crochets, vous verrez le type de style suivi de deux points et de la valeur du style.<\/p>\n\n\n\n<p>Par exemple, tous les \u00e9l\u00e9ments de saisie de cette page auront une bordure de 2 pixels de large, unie, avec une couleur hexagonale de #d4d0ba.<\/p>\n\n\n\n<p>Dans la partie sup\u00e9rieure droite de cette section, vous verrez le fichier ou l'emplacement \u00e0 partir duquel le CSS a \u00e9t\u00e9 charg\u00e9.<br><br><\/p>\n\n\n\n<p><strong>III.<\/strong>\u00a0Les styles peuvent \u00eatre remplac\u00e9s par des r\u00e8gles CSS charg\u00e9es ult\u00e9rieurement dans la page. Les styles qui auraient \u00e9t\u00e9 appliqu\u00e9s, mais qui ont \u00e9t\u00e9 remplac\u00e9s, apparaissent en texte barr\u00e9.<br><br><\/p>\n\n\n\n<p><strong>IV.<\/strong>&nbsp;Cette section pr\u00e9sente les styles calcul\u00e9s. Elle est tr\u00e8s d\u00e9taill\u00e9e et il peut \u00eatre difficile d'en extraire ce que l'on cherche. Mais si vous ne parvenez pas \u00e0 trouver le style appliqu\u00e9 dans la premi\u00e8re section, il s'agit d'une autre fa\u00e7on de localiser le style actif d'un \u00e9l\u00e9ment.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Changer de style<\/h6>\n\n\n\n<p>Une fois localis\u00e9, vous pouvez ajouter n'importe quelle r\u00e8gle de style CSS dans la bo\u00eete Additional CSS de votre th\u00e8me situ\u00e9e dans WordPress &gt; Appearance &gt; Customize &gt; Additional CSS. Les r\u00e8gles \u00e9num\u00e9r\u00e9es ci-dessous couvrent la plupart des diff\u00e9rences de style que vous pouvez observer entre les champs h\u00e9berg\u00e9s et les autres champs de votre page de paiement.  Une fois que vous avez localis\u00e9 la valeur de style pour le type d'\u00e9l\u00e9ment que vous souhaitez imiter, vous pouvez l'utiliser pour ajuster les r\u00e8gles ci-dessous afin que les champs h\u00e9berg\u00e9s correspondent mieux aux autres styles de votre page.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Taille du champ<\/strong><\/h6>\n\n\n\n<p>MemberMouse a inclus une feuille de style CSS pour que la hauteur et la largeur correspondent le plus possible \u00e0 la taille du champ dans la plupart des th\u00e8mes, mais si vous constatez que la taille ne convient pas \u00e0 votre th\u00e8me, vous pouvez les ajuster \u00e0 l'aide des r\u00e8gles ci-dessous pour qu'elles soient mieux adapt\u00e9es.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_dim_height.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Hauteur<\/a>&nbsp;- D\u00e9termine la hauteur d'un \u00e9l\u00e9ment. Peut \u00eatre list\u00e9 dans plusieurs types de mesures.  Voir l'article en lien pour plus d'informations.<\/p>\n\n\n\n<p>La hauteur des champs est ainsi fix\u00e9e \u00e0 2,5 fois la taille de la police de la page, qui est l'unit\u00e9 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\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, .mm-braintree-hosted-field {height : 2.5em;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_dim_width.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Largeur<\/a>&nbsp;- D\u00e9termine la largeur d'un \u00e9l\u00e9ment. Peut \u00eatre list\u00e9 dans plusieurs types de mesures.  Voir l'article en lien pour plus d'informations.  \u00c9tant donn\u00e9 que les champs de saisie contiennent diff\u00e9rents types d'informations, il se peut que vous souhaitiez qu'ils aient des largeurs diff\u00e9rentes. Les r\u00e8gles relatives \u00e0 la largeur s'appliquent donc \u00e0 chaque type de champ individuellement.<\/p>\n\n\n\n<p>Cette option permet de d\u00e9finir la largeur des champs relatifs aux cartes de cr\u00e9dit en pourcentage de l'\u00e9l\u00e9ment parent (conteneur D\u00e9tails de facturation). Vous pouvez augmenter ou diminuer la valeur pour rendre le champ plus large ou plus \u00e9troit, ou vous pouvez changer le type de mesure utilis\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>##mm_braintree_cc_number, #mm_field_cc_number_div {width : 50%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Cette r\u00e8gle d\u00e9finit la largeur des champs de texte CVV et Expiration en pourcentage de l'\u00e9l\u00e9ment parent (conteneur D\u00e9tails de la facturation).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>#mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width : 25%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Cela permet de d\u00e9finir le pourcentage de l'\u00e9l\u00e9ment parent (conteneur des d\u00e9tails de facturation) pour les s\u00e9lecteurs d\u00e9roulants du mois et de l'ann\u00e9e d'expiration de la carte de cr\u00e9dit dans Braintree.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>#mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width : 25%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Fronti\u00e8re<\/strong><\/h6>\n\n\n\n<p>MemberMouse inclut une bordure de base pour certains champs. Vous pouvez modifier la r\u00e8gle ci-dessous en utilisant les valeurs de n'importe quel champ de saisie de texte de MemberMouse pour adapter les champs h\u00e9berg\u00e9s \u00e0 votre th\u00e8me.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_border.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Fronti\u00e8re<\/a>&nbsp;- La propri\u00e9t\u00e9 border est une abr\u00e9viation des propri\u00e9t\u00e9s border-width, border-style et border-color.  Si ces propri\u00e9t\u00e9s sont r\u00e9pertori\u00e9es s\u00e9par\u00e9ment dans votre th\u00e8me, vous pouvez les combiner en une seule r\u00e8gle pour les appliquer aux champs h\u00e9berg\u00e9s.<\/p>\n\n\n\n<p>Cette r\u00e8gle applique une bordure pointill\u00e9e de 2 pixels dont la valeur de couleur est #d55c9f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border : 2px dotted #d55c9f;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Style de la bo\u00eete<\/strong><\/h6>\n\n\n\n<p>La feuille de style du navigateur pour les propri\u00e9t\u00e9s border-radius et box-shadow tend \u00e0 changer entre les ordinateurs de bureau et les appareils mobiles.  Vous pouvez visualiser votre page dans diff\u00e9rents navigateurs et appareils afin de d\u00e9cider si vous souhaitez d\u00e9finir ces styles de mani\u00e8re explicite pour qu'ils correspondent \u00e0 votre th\u00e8me (le cas \u00e9ch\u00e9ant) ou \u00e0 l'un des types de navigateurs.<\/p>\n\n\n\n<p>Vous pouvez utiliser la feuille de style CSS suivante dans la zone CSS suppl\u00e9mentaire de votre th\u00e8me (WordPress &gt; Apparence &gt; Personnaliser &gt; CSS suppl\u00e9mentaire) pour d\u00e9finir ces caract\u00e9ristiques sur les champs de saisie MemberMouse et les champs de paiement int\u00e9gr\u00e9s. Pour obtenir des instructions d\u00e9taill\u00e9es sur une propri\u00e9t\u00e9, cliquez sur le nom de la propri\u00e9t\u00e9 li\u00e9e.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Rayon de la bordure<\/a>&nbsp;- d\u00e9finit la courbe des coins du champ. Ne s'applique qu'aux champs dont les bordures sont d\u00e9finies.<\/p>\n\n\n\n<p>Pour les bordures arrondies.  Augmentez la taille des pixels pour des courbes plus larges, diminuez-la pour des coins plus pointus.. :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius : 5px;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Pour supprimer l'\u00e9l\u00e9ment de bordure sur tous les champs :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius : none;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Bo\u00eete d'ombres<\/a>&nbsp;- Ajoute une ombre \u00e0 un \u00e9l\u00e9ment.  Peut \u00eatre d\u00e9fini dans n'importe quelle direction, \u00e0 l'int\u00e9rieur ou \u00e0 l'ext\u00e9rieur.<\/p>\n\n\n\n<p>Cela cr\u00e9era une l\u00e9g\u00e8re ombre gris fonc\u00e9 en bas et l\u00e9g\u00e8rement \u00e0 droite. \u00a0<\/p>\n\n\n\n<p>Le premier chiffre est l'alignement vertical.  Augmentez le nombre pour d\u00e9placer le texte vers la droite ou le n\u00e9gatif vers la gauche. \u00a0<\/p>\n\n\n\n<p>Le deuxi\u00e8me nombre est l'alignement horizontal. Les nombres plus \u00e9lev\u00e9s le d\u00e9placent vers le bas, les nombres n\u00e9gatifs le d\u00e9placent vers le haut de la bo\u00eete. \u00a0<\/p>\n\n\n\n<p>Le troisi\u00e8me chiffre correspond au flou. Des nombres plus \u00e9lev\u00e9s rendront l'ombre moins nette. \u00a0<\/p>\n\n\n\n<p>Le dernier ensemble est la couleur.  Vous pouvez utiliser la couleur\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/html\/html_colors.asp\" target=\"_blank\">Couleurs HTML<\/a>\u00a0pour obtenir des informations sur d'autres options.  En ajoutant \"inset\" apr\u00e8s le jeu de couleurs, l'ombre appara\u00eetra \u00e0 l'int\u00e9rieur de la bo\u00eete plut\u00f4t qu'\u00e0 l'ext\u00e9rieur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {box-shadow : 1px 1px 5px rgb(120,120,120);}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Cela supprimera l'ombre de tous les champs<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {none;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Polices de caract\u00e8res<\/strong><\/h6>\n\n\n\n<p>De par leur nature, les styles de police ne peuvent pas \u00eatre appliqu\u00e9s aux conteneurs div, ce qui signifie que la famille de police, la taille et d'autres caract\u00e9ristiques ne peuvent pas \u00eatre modifi\u00e9es dans les champs Stripe\/Braintree.  Les champs Stripe et Braintree tirent les valeurs de propri\u00e9t\u00e9 du navigateur sur lequel ils sont affich\u00e9s, et ces propri\u00e9t\u00e9s ont tendance \u00e0 \u00eatre assez coh\u00e9rentes. Si la police de votre th\u00e8me est tr\u00e8s diff\u00e9rente, vous pouvez envisager d'ajouter des r\u00e8gles personnalis\u00e9es pour modifier la police de votre th\u00e8me sur cette page afin qu'elle corresponde mieux aux champs int\u00e9gr\u00e9s, afin que la police de votre page de paiement corresponde \u00e0 l'ensemble des champs.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_font_font.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Police<\/a>&nbsp;- D\u00e9finit des propri\u00e9t\u00e9s telles que le poids de la police, la taille de la police et la famille de la police.<\/p>\n\n\n\n<p>Cette fonction permet de faire correspondre la police de votre page de paiement MemberMouse aux propri\u00e9t\u00e9s du navigateur moyen.  La premi\u00e8re valeur est le poids, les nombres les plus \u00e9lev\u00e9s rendant la police plus \u00e9paisse.  La deuxi\u00e8me valeur est la taille, et la troisi\u00e8me est la famille de polices.. :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.mm-textField, .mm-selectList {font : 400 13px sans-serif;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Pour MM 2.4.0+ , 3D Secure 2.0 est activ\u00e9 par d\u00e9faut pour Stripe et Braintree. Pour les commer\u00e7ants situ\u00e9s dans l'Espace \u00e9conomique europ\u00e9en (EEE) et qui vendent...<\/p>","protected":false},"author":9645,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[201],"ht-kb-tag":[],"class_list":["post-8316","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-sca"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb\/8316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/users\/9645"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/comments?post=8316"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb\/8316\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media?parent=8316"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb-category?post=8316"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb-tag?post=8316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}