Toggle Credit Card and PayPal on Checkout

This example code is a customization for your checkout page, not an official feature in MemberMouse. Adding it to you checkout page or customizing it for your needs are tasks for you or your developer, and the MemberMouse Customer Success Team cannot provide any support.

If you accept both Credit Cards and PayPal on your checkout page, you may be interested in allowing your members to toggle between the two. This way, if a member selects the PayPal radio button, the credit card fields will be hidden, and selecting Stripe will display them again.

Below is the Code necessary to create a basic version (PayPal and Stripe)

1. Insert the following code to generate the two submit buttons for PayPal and Stripe.

Note – The following code needs to replace the code where the payment button would normally be in the Checkout Page.

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

Here's a look at the original code and then what the replacement would look like:

2. Add two Radio Buttons that customers will use to switch between checkout modes. These may be added anywhere on the page, but are commonly placed just underneath the gifting section:

<div id="paymentSelector">
<input id="onsiteButton" style="vertical-align: top;" checked="checked" name="paymentType" type="radio" value="stripe" /> <label style="display: inline;" for="onsiteButton">Credit Card</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. Place the following code in an HTML block, or use a plugin like Scripts-n-Styles or WPCode to insert the script in the header of your checkout page:

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

Here is an example of what this can look like on your checkout page:

If you prefer, you may Download a Complete Checkout Template containing the example code.