Alternar tarjeta de crédito y PayPal en el pago

Este código de ejemplo es una personalización para su página de pago, no una función oficial de MemberMouse. Añadirlo a su página de pago o personalizarlo para sus necesidades son tareas para usted o su desarrollador, y el Equipo de Éxito de MemberMouse no puede proporcionar ningún tipo de apoyo.

Si acepta tanto tarjetas de crédito como PayPal en su página de pago, puede que le interese permitir a sus usuarios alternar entre ambos. De esta forma, si un usuario selecciona el botón de opción de PayPal, los campos de la tarjeta de crédito se ocultarán, y si selecciona Stripe volverán a aparecer.

A continuación se muestra el código necesario para crear una versión básica (PayPal y Stripe)

1. Inserte el siguiente código para generar los dos botones de envío para PayPal y Stripe.

Nota - El siguiente código debe reemplazar el código donde normalmente estaría el botón de pago en la página de pago.

<div id="stripe-section">
<p><a class="mm-button blue large rounded" href="/es/[MM_Form_Button type='submit' paymentMethod='default']/">Registrarse con Stripe</a></p>
</div>
<div id="paypal-section" style="display: none;">
<p><a class="mm-button blue large rounded" href="/es/[MM_Form_Button type='submit' paymentMethod='paypal']/">Registrarse con PayPal</a></p>
</div>

He aquí un vistazo al código original y a cómo sería el sustituto:

2. Añada dos botones de radio que los clientes utilizarán para cambiar entre los modos de pago. Pueden añadirse en cualquier parte de la página, pero normalmente se colocan justo debajo de la sección de regalos:

<div id="paymentSelector">
<input id="onsiteButton" style="vertical-align: top;" checked="checked" name="paymentType" type="radio" value="stripe" /> <label style="display: inline;" for="onsiteButton">Tarjeta de crédito</label>
<input id="offsiteButton" style="vertical-align: top;" name="paymentType" type="radio" value="paypal" />
<label style="display: inline; width: auto;" for="offsiteButton">PayPal</label>
</div>

3. Coloque el siguiente código en un bloque HTML, o utilice un plugin como Scripts-n-Styles o WPCode para insertar el script en la cabecera de su página de pago:

<script type="text/javascript">
jQuery(function() {
    jQuery("input[name='paymentType']").click(function() {
        var selectedMethod = jQuery("input[name='paymentType']:checked").val();
        if(selectedMethod === "stripe") {
            jQuery("#paypal-section").hide(400);
            jQuery("#stripe-section").show(400);
            jQuery("#mm-billing-information-section").show(400);
        } 
        else if (selectedMethod === "paypal") { 
            jQuery("#stripe-section").hide(400);
            jQuery("#mm-billing-information-section").hide(400);
            jQuery("#paypal-section").show(400);
        }
    });
});
</script> 

He aquí un ejemplo de lo que puede parecer en su página de pago:

Si lo prefiere, puede Descargar una plantilla de caja completa que contiene el código de ejemplo.