¿Cómo puedo crear un pago en 2 pasos? Dos elegantes métodos revelados

En esta entrega del HelpDesk, uno de los miembros de nuestro equipo revela un método elegante para crear un proceso de pago en dos pasos. En primer lugar, explica una forma que crea dos páginas separadas, como la mayoría de los procesos de pago en dos pasos. Luego, también muestra un método para mostrar primero sólo el formulario de información de detalles de la cuenta y luego la información de pago como un segundo paso separado, pero en la misma página. Tenga en cuenta que esta segunda opción implica HTML y algunas secuencias de comandos básicas.

---

Preguntado por las cajas:

"Me preguntaba si hay una manera fácil de separar el núcleo de la página de pago en dos páginas separadas. Quiero tener una página que pide información de la cuenta del cliente (nombre, correo electrónico, etc.) , y luego ir a una página para introducir la información de pago después de que se crea su cuenta."

---

John de MemberMouse respondió:

"Hay dos enfoques para esto. El primero funciona exactamente como usted describe, donde hay dos páginas de pago independientes en serie. Tenemos una descripción detallada de cómo construir este proceso en nuestro artículo de soporte Crear un pago en 2 pasos. I’ll include the essentials below too.

El primer paso consiste en crear una nueva página para el primer paso de pago y colocar un icono Formulario de inscripción gratuita en la página.

A continuación, se crea un Página de confirmación de productos específicos para las afiliaciones gratuitas, y en esta página de confirmación se coloca una copia del Checkout Core Page Template modificando el Formulario SmartTag 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.

El principal inconveniente de este enfoque es que puede resultar difícil ofrecer la opción de pago en dos pasos para varios productos en el mismo sitio. A todos los usuarios que se registren en el nivel gratuito que hemos creado se les ofrecerá el producto que hemos especificado. Para ofrecer múltiples productos de esta manera, una opción sería colocar un Cambio de producto en el segundo paso de la compra. Como alternativa, necesitaría un nivel de afiliación gratuito distinto para cada producto que venda, y un Decisión de los miembros SmartTag para cambiar entre el código de pago de cada uno en el segundo paso.

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

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

Elegante demostración de pago en 2 pasos

En primer lugar, eche un vistazo al Plantilla de página de pago and you’ll see that all the different sections are already laid out as <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.

The 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:

#mm-sección-factura-información, #mm-sección-envío-información,
#mm-coupon-block, .mm-purchaseSection, #page-nav-back {display: none;}

Just underneath that, we’ll add some scripting for our functions that show and hide the pages:

<script>
function showPageOne() {
  jQuery( ".mm-purchaseSection" ).hide();
  jQuery( "#mm-account-information-section" ).show();
  jQuery( "#mm-billing-information-section" ).hide();
  jQuery( "#mm-shipping-information-section" ).hide();
  jQuery( "#mm-coupon-block" ).hide();
  jQuery( "#page-nav-back" ).hide();
  jQuery( "#page-nav-forward" ).show();
}

function showPageTwo() {
  jQuery( ".mm-purchaseSection" ).show();
  jQuery( "#mm-account-information-section" ).hide();
  jQuery( "#mm-billing-information-section" ).show();
  jQuery( "#mm-shipping-information-section" ).show();
  jQuery( "#mm-coupon-block" ).show();
  jQuery( "#page-nav-forward" ).hide();
  jQuery( "#page-nav-back" ).show();
}
</script>

Now we need to create our page navigation buttons, and the associated click handlers. I’ve elected to put those in the right column, I’m not sure that this is the very best layout decision, and I just borrowed some MemberMouse button styling, but you can change these things around as you prefer. In the Checkout Core Page Template se insertaría entre las líneas 144 y 145, es decir, justo por encima de la línea <div class="”mm-purchaseSection”"> etiqueta:

<div id="page-nav-forward">
<div id="page-nav-forward-button" class="mm-button large green" style="width:220px; text-align:center;">
Información sobre el pago →</div>
</div>
<div id="page-nav-back">
<div id="page-nav-back-button" class="mm-button large green" style="width:220px; text-align:center;">
← Información de la cuenta</div>
<p> </p>
</div>

<script>
jQuery( "#page-nav-forward-button" ).click(function() {
  showPageTwo();
});
jQuery( "#page-nav-back-button" ).click(function() {
  showPageOne();
});
</script>

Puede utilizar sus propios botones o imágenes, sólo tiene que tener los IDs correctos para que el script pueda recogerlos.

Pruébelo y avíseme si tiene alguna duda.

---

Curioso sobre Checkouts respondió:

"Esto ha resuelto mi problema. Muchas gracias por tomarse el tiempo de darme una respuesta detallada con toda la información que necesitaba."

---

Contenidos relacionados

---

• Compartir