Umschalten von Kreditkarte und PayPal beim Checkout

Bei diesem Beispielcode handelt es sich um eine Anpassung für Ihre Kassenseite und nicht um eine offizielle Funktion von MemberMouse. Das Hinzufügen zu Ihrer Kassenseite oder die Anpassung an Ihre Bedürfnisse sind Aufgaben für Sie oder Ihren Entwickler, und das MemberMouse Customer Success Team kann keine Unterstützung bieten.

Wenn Sie auf Ihrer Kassenseite sowohl Kreditkarten als auch PayPal akzeptieren, sollten Sie Ihren Mitgliedern die Möglichkeit geben, zwischen diesen beiden Optionen zu wechseln. Wenn ein Mitglied das PayPal-Radio-Button auswählt, werden die Kreditkartenfelder ausgeblendet, und wenn es Stripe auswählt, werden sie wieder angezeigt.

Nachfolgend finden Sie den Code, der zur Erstellung einer Basisversion (PayPal und Stripe) erforderlich ist

1. Fügen Sie den folgenden Code ein, um die beiden Übermittlungsschaltflächen für PayPal und Stripe zu erzeugen.

Hinweis - Der folgende Code muss den Code an der Stelle ersetzen, an der sich normalerweise die Zahlungsschaltfläche auf der Kassenseite befinden würde.

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

Hier ist ein Blick auf den ursprünglichen Code und dann, wie der Ersatz aussehen würde:

2. Fügen Sie zwei Radio-Buttons hinzu, mit denen die Kunden zwischen den Kassenmodi wechseln können. Diese können an beliebiger Stelle auf der Seite eingefügt werden, werden aber in der Regel direkt unter dem Abschnitt "Geschenke" platziert:

<div id="paymentSelector">
<input id="onsiteButton" style="vertical-align: top;" checked="checked" name="paymentType" type="radio" value="stripe" /> <label style="display: inline;" for="onsiteButton">Kreditkarte</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. Fügen Sie den folgenden Code in einen HTML-Block ein, oder verwenden Sie ein Plugin wie Skripte-n-Styles oder WPCode um das Skript in die Kopfzeile Ihrer Checkout-Seite einzufügen:

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

Hier ist ein Beispiel dafür, wie dies auf Ihrer Kassenseite aussehen kann:

Wenn Sie es vorziehen, können Sie Download einer vollständigen Checkout-Vorlage die den Beispielcode enthält.