{"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":"pago-en-dos-pasos","status":"publish","type":"post","link":"https:\/\/membermouse.com\/es\/support-stories\/two-step-checkout\/","title":{"rendered":"\u00bfC\u00f3mo puedo crear un pago en 2 pasos? Dos elegantes m\u00e9todos revelados"},"content":{"rendered":"En esta entrega del HelpDesk, uno de los miembros de nuestro equipo revela un m\u00e9todo elegante para crear un proceso de pago en dos pasos. En primer lugar, explica una forma que crea dos p\u00e1ginas separadas, como la mayor\u00eda de los procesos de pago en dos pasos. Luego, tambi\u00e9n muestra un m\u00e9todo para mostrar primero s\u00f3lo el formulario de informaci\u00f3n de detalles de la cuenta y luego la informaci\u00f3n de pago como un segundo paso separado, pero en la misma p\u00e1gina. Tenga en cuenta que esta segunda opci\u00f3n implica HTML y algunas secuencias de comandos b\u00e1sicas.\n\n
\n\nPreguntado por las cajas:<\/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 respondi\u00f3:<\/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 Crear un pago en 2 pasos<\/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 Formulario de inscripci\u00f3n gratuita<\/a> on the page.\n\nNext, you create a P\u00e1gina de confirmaci\u00f3n de productos espec\u00edficos<\/a> para las afiliaciones gratuitas, y en esta p\u00e1gina de confirmaci\u00f3n se coloca una copia del Checkout Core Page Template<\/a> modificando el Formulario 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 Cambio de producto<\/a> en el segundo paso de la compra. Como alternativa, necesitar\u00eda un nivel de afiliaci\u00f3n gratuito distinto para cada producto que venda, y un Decisi\u00f3n de los miembros 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> Elegante demostraci\u00f3n de pago en 2 pasos<\/strong><\/h3>\n
<\/div>\nEn primer lugar, eche un vistazo al Plantilla de p\u00e1gina de pago<\/a> y verás que las diferentes secciones ya están dispuestas como <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-secci\u00f3n-factura-informaci\u00f3n, #mm-secci\u00f3n-env\u00edo-informaci\u00f3n,\n#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}\n<\/pre>\nJusto debajo, a\u00f1adiremos algunos scripts para nuestras funciones que muestran y ocultan las p\u00e1ginas:\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>\nAhora tenemos que crear nuestros botones de navegaci\u00f3n de la p\u00e1gina, y los controladores de clic asociados. He elegido ponerlos en la columna de la derecha, no estoy seguro de que esta sea la mejor decisi\u00f3n de dise\u00f1o, y acabo de tomar prestado algo del estilo de los botones de MemberMouse, pero puedes cambiar estas cosas como prefieras. En la columna Checkout Core Page Template<\/a> se insertaría entre las líneas 144 y 145, es decir, justo por encima de la línea <div class="mm-purchaseSection"> etiqueta:\n
<div id="page-nav-forward">\n<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">\nInformación sobre el pago →<\/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← Información de la cuenta<\/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\nCurioso sobre Checkouts respondi\u00f3:<\/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":"
\u00bfAlguna vez ha deseado poder crear un proceso de pago en dos pasos para su sitio de afiliaci\u00f3n? Buenas noticias. Puede hacerlo. Y en este art\u00edculo, le mostraremos c\u00f3mo.<\/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\/es\/wp-json\/wp\/v2\/posts\/14063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/posts\/14063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media\/14093"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/categories?post=14063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}