Basculer entre la carte de crédit et PayPal lors du paiement

Cet exemple de code est une personnalisation de votre page de paiement et non une fonctionnalité officielle de MemberMouse. L'ajouter à votre page de paiement ou la personnaliser en fonction de vos besoins est une tâche qui vous incombe, à vous ou à votre développeur, et l'équipe chargée de la réussite des clients de MemberMouse ne peut pas vous apporter d'assistance.

Si vous acceptez à la fois les cartes de crédit et PayPal sur votre page de paiement, il peut être intéressant de permettre à vos membres de basculer entre les deux. Ainsi, si un membre sélectionne le bouton radio PayPal, les champs relatifs à la carte de crédit seront masqués, et s'il sélectionne Stripe, ils s'afficheront à nouveau.

Voici le code nécessaire pour créer une version de base (PayPal et Stripe)

1. Insérez le code suivant pour générer les deux boutons de soumission pour PayPal et Stripe.

Note - Le code suivant doit remplacer le code où le bouton de paiement devrait normalement se trouver dans la page de paiement.

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

Voici un aperçu du code original et de son remplacement :

2. Ajoutez deux boutons radio que les clients utiliseront pour passer d'un mode de paiement à l'autre. Ils peuvent être ajoutés à n'importe quel endroit de la page, mais sont généralement placés juste en dessous de la section des cadeaux :

<div id="paymentSelector">
<input id="onsiteButton" style="vertical-align: top;" checked="checked" name="paymentType" type="radio" value="stripe" /> <label style="display: inline;" for="onsiteButton">Carte de crédit</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. Placez le code suivant dans un bloc HTML ou utilisez un plugin tel que Scripts-n-Styles ou WPCode pour insérer le script dans l'en-tête de votre page de paiement :

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

Voici un exemple de ce que cela peut donner sur votre page de paiement :

Si vous préférez, vous pouvez Télécharger un modèle de caisse complet contenant l'exemple de code.