¿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. Incluiré también lo esencial a continuación.

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 ligeramente para que se ofrezca un producto específico. Como todo el que llega a esta página es un usuario registrado, la sección Detalles de la cuenta del proceso de pago se oculta automáticamente y no volvemos a solicitar esa información. En este punto, el usuario puede rellenar los datos de pago y finalizar el proceso de compra.

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.

El segundo método consiste en falsificar dos páginas mediante scripts. Con este método, no hay realmente dos páginas, y los miembros no se crean realmente hasta que completan todo el proceso. Lo que se hace es ocultar y mostrar secciones de la página y proporcionar botones para avanzar por ellas. Esto crea la experiencia de pago en dos pasos sin que se cree una afiliación gratuita intermedia.

Se trata más bien de una actividad de creación de páginas de nivel intermedio, pero si estás interesado y te sientes algo cómodo con HTML y scripts básicos, puedes seguir la implementación de demostración que aparece a continuación para ver cómo se puede hacer.

Elegante demostración de pago en 2 pasos

En primer lugar, eche un vistazo al Plantilla de página de pago y verás que las diferentes secciones ya están dispuestas como <div> y nuestro auto-ocultamiento de sección es un sistema separado que los rodea, por lo que es muy conveniente para nosotros. Empezaremos abriendo la página de pago en el editor y viéndola como HTML.

El primer cambio que tenemos que hacer es añadir algo de CSS para que cuando se cargue la página esté en la configuración deseada. Hay un montón de maneras diferentes de hacer esto, en última instancia, podría ser mejor tenerlo en la sección CSS adicional de su tema, pero por ahora vamos a añadir un poco de código en la parte superior de la página de pago:

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

Justo debajo, añadiremos algunos scripts para nuestras funciones que muestran y ocultan las páginas:

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

Ahora tenemos que crear nuestros botones de navegación de la página, 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ón de diseño, 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 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