Alternar cartão de crédito e PayPal no checkout

Esse código de exemplo é uma personalização para sua página de checkout, não um recurso oficial do MemberMouse. Adicioná-lo à sua página de checkout ou personalizá-lo de acordo com suas necessidades são tarefas que cabem a você ou ao seu desenvolvedor, e a Equipe de Sucesso do Cliente do MemberMouse não pode fornecer nenhum suporte.

Se você aceita cartões de crédito e PayPal em sua página de checkout, talvez seja interessante permitir que seus membros alternem entre os dois. Dessa forma, se um membro selecionar o botão de opção do PayPal, os campos de cartão de crédito ficarão ocultos e, ao selecionar Stripe, eles serão exibidos novamente.

Abaixo está o código necessário para criar uma versão básica (PayPal e Stripe)

1. Insira o código a seguir para gerar os dois botões de envio para o PayPal e o Stripe.

Nota - O código a seguir precisa substituir o código onde o botão de pagamento normalmente estaria na página de checkout.

<div id="stripe-section">
<p><a class="mm-button blue large rounded" href="/pt/[MM_Form_Button type='submit' paymentMethod='default']/">Registre-se com o Stripe</a></p>
</div>
<div id="paypal-section" style="display: none;">
<p><a class="mm-button blue large rounded" href="/pt/[MM_Form_Button type='submit' paymentMethod='paypal']/">Cadastre-se com o PayPal</a></p>
</div>

Veja a seguir o código original e como seria a substituição:

2. Adicione dois botões de rádio que os clientes usarão para alternar entre os modos de checkout. Eles podem ser adicionados em qualquer lugar da página, mas geralmente são colocados logo abaixo da seção de presentes:

<div id="paymentSelector">
<input id="onsiteButton" style="vertical-align: top;" checked="checked" name="paymentType" type="radio" value="stripe" /> <label style="display: inline;" for="onsiteButton">Cartão 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 o código a seguir em um bloco HTML ou use um plug-in como Scripts-n-Styles ou Código WPC para inserir o script no cabeçalho de sua página de checkout:

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

Aqui está um exemplo de como isso pode ficar em sua página de checkout:

Se preferir, você pode Faça o download de um modelo completo de checkout que contém o código de exemplo.