{"id":14063,"date":"2022-10-04T07:11:21","date_gmt":"2022-10-04T14:11:21","guid":{"rendered":"https:\/\/membermouse.com\/?p=14063"},"modified":"2023-11-10T16:23:24","modified_gmt":"2023-11-10T21:23:24","slug":"paiement-en-deux-etapes","status":"publish","type":"post","link":"https:\/\/membermouse.com\/fr\/support-stories\/two-step-checkout\/","title":{"rendered":"Comment cr\u00e9er une caisse en deux \u00e9tapes ? Deux m\u00e9thodes \u00e9l\u00e9gantes r\u00e9v\u00e9l\u00e9es"},"content":{"rendered":"Dans cet \u00e9pisode du HelpDesk, l'un des membres de notre \u00e9quipe r\u00e9v\u00e8le une m\u00e9thode \u00e9l\u00e9gante pour cr\u00e9er un paiement en deux \u00e9tapes. Tout d'abord, il explique comment cr\u00e9er deux pages distinctes, comme le font la plupart des processus de paiement en deux \u00e9tapes. Ensuite, il pr\u00e9sente une m\u00e9thode qui permet d'afficher d'abord le formulaire d'informations sur le compte, puis les informations sur le paiement dans une deuxi\u00e8me \u00e9tape distincte, mais sur la m\u00eame page. Veuillez noter que cette deuxi\u00e8me option implique l'utilisation de HTML et de quelques scripts de base.\n\n
\n\nCurieux d'en savoir plus sur les caisses enregistreuses ?<\/strong>\n\n\"I was wondering if there is an easy way to separate the core checkout page into two separate pages. I want to have a page that asks for customer account info (name, email, etc..) , and then go to a page to enter payment info after their account is created.\"\n\n
\n\n
John de MemberMouse a r\u00e9pondu :<\/strong>\n\n\"There are two approaches to this. The first one works exactly as you described, where there are two independent checkout pages in series. We have a detailed description of how to build this process in our support article Cr\u00e9er un paiement en deux \u00e9tapes<\/a>. I'll include the essentials below too.\n\nThe first step is to create a new page for the first checkout step, and place a Formulaire d'adh\u00e9sion gratuite<\/a> on the page.\n\nNext, you create a Page de confirmation sp\u00e9cifique au produit<\/a> pour les adh\u00e9sions gratuites, et sur cette page de confirmation, vous placez une copie de l'avis d'appel d'offres pour les adh\u00e9sions gratuites. Checkout Core Page Template<\/a> en modifiant le code Formulaire SmartTag<\/a> slightly so that a specific product is offered. Since anyone who reaches this page is a logged-in member, the Account Details section of the checkout is automatically hidden, and we don't prompt for that information again. At this point, the member would be able to fill out payment information and finish the checkout process.\n\nThe main drawback of this approach is that it can be difficult to provide two-step checkout for multiple products on the same site. All members who sign up on the free membership level we created will be offered the product we specified. To offer multiple products this way, one option would be to place a Interrupteur de produit<\/a> \u00e0 la deuxi\u00e8me \u00e9tape de la commande. Une autre solution consiste \u00e0 cr\u00e9er un niveau d'adh\u00e9sion gratuite distinct pour chaque produit vendu et \u00e0 cr\u00e9er un niveau d'adh\u00e9sion gratuite pour chaque produit vendu. D\u00e9cision du membre SmartTag<\/a> to switch between the checkout code for each one at the second step.\n\nThe second approach is to fake two pages using scripting. With this method, there aren't really two pages, and members are not really created until they complete the entire process. Instead, you're just hiding and showing sections of the page, and providing buttons to advance through them. This creates the experience of two-step checkout without an intermediary free membership being created.\n\nThis is more like an intermediate-level page-building activity, but if you're interested and somewhat comfortable with HTML and basic scripts, you can follow the demonstration implementation below to see how it can be done.\n

<\/i> D\u00e9monstration d'une caisse \u00e9l\u00e9gante en 2 \u00e9tapes<\/strong><\/h3>\n
<\/div>\nTout d'abord, jetez un coup d'\u0153il \u00e0 la Mod\u00e8le de page de paiement<\/a> et vous verrez que toutes les différentes sections sont déjà présentées sous la forme de <div> blocks and our section auto-hiding is a separate system that surrounds them, so that's really convenient for us. We'll start by opening the checkout page in the editor and viewing it as HTML.\n\nThe first change we need to make is to add some CSS so that when the page loads it will be in the desired configuration. There's a bunch of different ways to do this, ultimately it might be better to have it in your theme's Additional CSS section, but for now we'll just add some code to the very top of the checkout page:\n
#mm-billing-information-section, #mm-shipping-information-section,\n#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display : none;}\n<\/pre>\nJuste en dessous, nous ajouterons quelques scripts pour nos fonctions d'affichage et de masquage des pages :\n
<script>\nfunction showPageOne() {\n  jQuery( \".mm-purchaseSection\" ).hide();\n  jQuery( \"#mm-account-information-section\" ).show();\n  jQuery( \"#mm-billing-information-section\" ).hide();\n  jQuery( \"#mm-shipping-information-section\" ).hide();\n  jQuery( \"#mm-coupon-block\" ).hide();\n  jQuery( \"#page-nav-back\" ).hide();\n  jQuery( \"#page-nav-forward\" ).show();\n}\n\nfunction showPageTwo() {\n  jQuery( \".mm-purchaseSection\" ).show();\n  jQuery( \"#mm-account-information-section\" ).hide();\n  jQuery( \"#mm-billing-information-section\" ).show();\n  jQuery( \"#mm-shipping-information-section\" ).show();\n  jQuery( \"#mm-coupon-block\" ).show();\n  jQuery( \"#page-nav-forward\" ).hide();\n  jQuery( \"#page-nav-back\" ).show();\n}\n<\/script>\n<\/pre>\nIl nous faut maintenant cr\u00e9er les boutons de navigation de notre page et les gestionnaires de clics associ\u00e9s. J'ai choisi de les placer dans la colonne de droite, je ne suis pas s\u00fbr que ce soit la meilleure d\u00e9cision de mise en page, et j'ai juste emprunt\u00e9 le style des boutons de MemberMouse, mais vous pouvez changer ces choses comme vous le souhaitez. Dans la section Checkout Core Page Template<\/a> il serait inséré entre les lignes 144 et 145, c'est-à-dire juste au-dessus de la ligne <div class="mm-purchaseSection"> étiquette :\n
<div id="page-nav-forward">\n<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">\nInformations sur le paiement →<\/div>\n<\/div>\n<div id="page-nav-back">\n<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">\n← Informations sur le compte<\/div>\n<p> <\/p>\n<\/div>\n\n<script>\njQuery( "#page-nav-forward-button" ).click(function() {\n  showPageTwo();\n});\njQuery( "#page-nav-back-button" ).click(function() {\n  showPageOne();\n});\n<\/script>\n<\/pre>\nYou can certainly use your own buttons or images, they just need to have the correct IDs so that the script can pick them up.\n\nGive this a try and please let me know if you have any questions.<\/blockquote>\n\n
\n\nCurieux d'en savoir plus sur les caisses a r\u00e9pondu :<\/strong>\n\n\"This resolved my issue. Thanks so much for taking the time to give me a detailed response with all the information I needed!\"","protected":false},"excerpt":{"rendered":"
Avez-vous d\u00e9j\u00e0 souhait\u00e9 pouvoir cr\u00e9er un syst\u00e8me de paiement en deux \u00e9tapes pour votre site d'adh\u00e9sion ? Bonne nouvelle ! Vous pouvez le faire. Dans cet article, nous allons vous montrer comment faire.<\/p>","protected":false},"author":20918,"featured_media":14093,"comment_status":"open","ping_status":"closed","sticky":false,"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,"_strive_checklists":"\"\"","_strive_active_checklist":"","_strive_post_notes":"","footnotes":""},"categories":[117,120],"tags":[],"class_list":["post-14063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mm-dash","category-support-stories"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts\/14063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/posts\/14063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media\/14093"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/categories?post=14063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}