PayPal Plus ist in aller Munde, also zumindest unter Shopbetreibern. Bietet es doch in einer einzigen Schnittstelle und zu überschaubaren, und vor allem umsatzabhängigen (nicht fixen) Gebühren die wichtigsten und attraktivsten Zahlungsarten aus einer Hand – Lastschrift, Rechnung und Kreditkarte.

Es gibt fertige Module, mit denen PayPal Plus in OXID eShop integriert werden kann. Sogar ein kostenloses von OXID selbst. So weit, so gut.

Doch da PayPal Plus für den Shop wie eine einzige Zahlungsart agiert (obwohl es doch mehrere sind), ist eine ansprechende optische Integration nicht so einfach. Insbesondere wer neben PayPal Plus noch andere Zahlungsarten anbietet, wie Vorkasse, Sofortüberweisung oder Nachnahme, wird hier eher unzufrieden sein. Denn PayPal Plus richtet sich nicht nach dem Shop-Layout, die „PayPal Wall“, in der dann die einzelnen Zahlungsarten von PayPal Plus auswählbar sind, wird vielmehr in einem eigenen Bereich und nach den eigenen optischen Vorstellungen von PayPal geladen. Das Ergebnis ist eine unattraktive Zahlungsarten-Auswahlseite, die nicht so recht ins Corporate Design passt und die vor allem sehr unübersichtlich wirkt, weil die Zahlungsarten so inkonsistent dargestellt werden.

PayPalPlusCB

Das äußert sich meist so, dass die PayPal Plus Wall mit den verfügbaren Zahlungsarten erst aufklappt und die darunter verborgenen Zahlungsarten anzeigt, wenn die Zahlungsart PayPal Plus ausgewählt wurde – dazu muss der Kunde aber wissen, dass sich dahinter der Rechnung-Schrägstrich-Lastschrift-Schrägstrich-Kreditkarten-Button verbirgt. Nur wenn man PayPal Plus als Standard-Zahlungsart setzt, ist die Wall bei den meisten Kunden schon im Voraus aufgeklappt.

Darüber hinaus sind die Zahlungsarten in der PayPal Plus Wall nicht wie in OXID per Checkbox, sondern durch Klick auf die Zeile auszuwählen, d. h. für eine PayPal Plus Zahlungsart bedarf es zwei Klicks. Und auch die optische Anordnung der Informationen (Name, Logo, Beschreibung der Zahlungsart) weicht vom OXID Standard-Layout ab.

Zwar lassen sich Zahlungsarten in PayPal Plus „integrieren“, wie man es im Screenshot oben bei der Vorauskasse sieht, dann passt das schon mal optisch etwas besser. Es löst aber nicht alle Probleme (z. B. fehlt trotzdem ein Logo) und es funktioniert auch nicht für alle Zahlungsarten reibungslos (insbesondere andere Fremdanbieter machen hier oft Probleme).

Für den Trachtenhof haben wir im Zuge des Relaunchs, das im letzten Jahr durchgeführt wurde, PayPal Plus so integriert, dass die Zahlungsarten wieder schön gleichmäßig und übersichtlich designt sind. Sie sehen schon auf dem Screenshot, wie anders – professioneller – das wirkt:

zahlungsarten-trachtenhof

Die mittleren vier Zahlungsarten (PayPal, Lastschrift, Kreditkarte, Kauf auf Rechnung) kommen aus PayPal Plus, Klarna und Vorkasse (ganz oben und ganz unten) sind zusätzliche Zahlungsarten des Shops. Vorauskasse ist als Standard-Zahlungsart vorausgewählt.

Alle sechs Zahlungsarten werden auf dieselbe Weise dargestellt und können auf dieselbe Weise ausgewählt werden, nämlich per Klick auf die Zeile, wonach dann automatisch an der rechten Seite das Häkchen erscheint. Die Radio-Button (die runden Auswahlkästchen) haben wir komplett entfernt.

Nötige Anpassungen

Um diese Änderungen zu bewirken, mussten wir von OXIDs kostenlosem PayPal Modul Abstand nehmen und haben stattdessen das PayPal Gateway von eComponents installiert. Das optische Ergebnis beider Module ist zwar (nahezu) identisch, jedoch ist die technische Umsetzung im Hintergrund etwas anders – und im eComponents Modul kann man sich hier leichter andocken.

Die hier beschriebenen Anpassungen sind übrigens unabhängig vom eingesetzten OXID Theme.

Da wir die PayPal Wall und ihre optische Aufmachung nicht ändern können, müssen wir wohl oder übel an die Zahlungsarten ran, die wir zusätzlich bereitstellen und ihr Erscheinungsbild an die PayPal Wall angleichen. Dazu benötigen wir drei Dinge aus der Wall:

  • die gleichen Stylesheets (CSS),
    die die Farben, Abstände etc. regeln,
  • die gleiche HTML-Struktur,
    die den grundsätzlichen Aufbau (Bild, Name, Beschreibung) der einzelnen Zahlungsarten-Snippets gewährleisten,
  • die gleiche Funktionalität (js),
    die z. B. dafür sorgt, dass bei Klick auf eine Zahlungsart diese aktiviert wird, die Beschreibung angezeigt wird, das Häkchen erscheint usw.

Stylesheets

Das war ganz einfach – wir haben die CSS-Datei aus der PayPal Wall kopiert und als eigene CSS Datei in den Shop integriert. Im Grunde könnten die Anweisungen auch einfach als Styles in der Standard-CSS Datei des Shops ergänzt werden, eine eigene Datei braucht es dazu gar nicht.

HTML-Struktur

Das ist der schwierigste Part. Alle Payment-Templates müssen in die richtige Struktur gebracht werden. Dazu gehören die OXID Payment-Templates, die sich im Ordner /page/checkout/inc/ im Theme befinden, als auch die Templates, die von den Modulen, wie Klarna, mitgeliefert werden.

Hier ist recht viel Erfahrung und Fingerspitzengefühl erforderlich, damit die richtigen divs gesetzt und mit den richtigen Klassen versehen werden. Ein Schema zum Kopieren können wir leider nicht liefern. Da ich Sie hier aber auch nicht auf dem Trockenen sitzen lassen möchte, hier die neue Struktur der Datei payment_other.tpl, die in OXID unter anderem für die Zahlungsart Vorauskasse verwendet wird.

<div class="paymentMethodRow row [{if $oView->getCheckedPaymentId() == $paymentmethod->oxpayments__oxid->value}]selected[{/if}]" data-pm="[{$sPaymentID}]" [{if $trBorderC > 0}]style="border-top:1px solid #eee"[{/if}]>
    <input id="payment_[{$sPaymentID}]" type="radio" name="paymentid" value="[{$sPaymentID}]" [{if $oView->getCheckedPaymentId() == $paymentmethod->oxpayments__oxid->value}]checked[{/if}] class="paymentCB">
    <div class="nameRow">
        <div class="methodIcon">
            [{assign var=img value="icons/"|cat:$sPaymentID|cat:".png"}]
            <img class="paymentMethodIcon" src="[{$oViewConf->getImageUrl($img)}]" alt="[{$paymentmethod->oxpayments__oxdesc->value}]">
        </div>
        <div class="methodName">[{$paymentmethod->oxpayments__oxdesc->value}]</div>
        <div class="paymentMethodDetails right">
            <div class="checkMark"></div>
        </div>
    </div>
    <div class="paymentMethodDetails">
        <div class="detailsText ">[{if $paymentmethod->oxpayments__oxlongdesc->value|trim}]
                [{ $paymentmethod->oxpayments__oxlongdesc->getRawValue()}]
            [{/if}]
            [{assign var="aDynValues" value=$paymentmethod->getDynValues()}]
            [{if $aDynValues}]
                <ul>
                [{foreach from=$aDynValues item=value name=PaymentDynValues}]
                    <li>
                        <label>[{ $value->name}]</label>
                        <input id="[{$sPaymentID}]_[{$smarty.foreach.PaymentDynValues.iteration}]" type="text" class="textbox" size="20" maxlength="64" name="dynvalue[[{$value->name}]]" value="[{ $value->value}]">
                    </li>
                [{/foreach}]
                </ul>
            [{/if}]
        </div>
    </div>
</div>

Das alles umfassende div „paymentMethodRow“ ist die Zeile, die beim Aktivieren grau wird. Darin enthalten ist das (nicht sichtbare) Radio-Input mit der Klasse paymentCB. Dieses Input-Feld sorgt dafür, dass der Shop am Ende weiß, welche Zahlungsart ausgewählt wurde.

Das div mit der Klasse „paymentMethodDetails“ enthält die Zahlungsart-Beschreibung sowie die dynamischen Felder (z. B. bei Lastschrift Kontonummer usw.), und wird nur sichtbar, wenn die Zahlungsart aktiviert wird.

Das div mit der Klasse „checkMark“ ist der Platzhalter für das Häkchen, das bei aktivierter Zahlungsart rechts erscheint.

Js-Funktionalität

Anschließend benötigen wir noch die js-Funktionen, damit das mit dem Auswählen der Zahlungsarten richtig klappt.

Das ist im Vergleich zur HTML-Struktur wieder ein Klacks.

$('.paymentMethodRow').click(function(){
    $('.paymentMethodRow').removeClass('selected');
    $('.paymentMethodDetails').hide();
    $(this).find('.paymentMethodDetails').show();
    $(this).addClass('selected'); 
    $(this).children('.paymentCB').attr('checked', 'checked');
    
    // dieser Aufruf als letztes, falls ein Fehler auftritt
    ppp.deselectPaymentMethod();
});

Wird das Element paymentMethodRow angeklickt (das ist die gesamte Zahlungsart-Zeile, siehe oben), wird zunächst bei allen Zahlungsarten das Aktiv-Häkchen entfernt und alle Beschreibungen werden versteckt. Das ist nötig, damit beim zweiten und dritten Klick nicht plötzlich zwei oder drei Zahlungsarten ein Häkchen haben.

Anschließend wird die angeklickte Zahlungsart auf aktiv gesetzt, und die versteckte Checkbox wird aktiviert. Zum Schluss wird eine Funktion von PayPal Plus aufgerufen, die die PayPal Plus Zahlungsart abwählt. Das ist nötig, weil unser Code ausschließlich für Nicht-PPP Zahlungsarten greift. Wird also eine von „unseren“ Zahlungsarten angeklickt, soll PayPal Plus natürlich nicht mehr ausgewählt bleiben.

Fazit

Die nötigen Anpassungen an den Zahlungsarten-Templates für die Angleichung an das PayPal Plus Wall Design ist etwas aufwändiger. Aber wer PayPal Plus neben anderen Zahlungsarten in seinen Shop integrieren möchte, sollte diesen Aufwand in Kauf nehmen, um seinen Kunden ein einheitliches Look and Feel zu geben und ihn an dieser sensiblen Stelle im Checkout nicht unnötig zu verwirren.

Gerade in dieser Phase des Einkaufs (Wahl der Versand- und Zahlungsart) werden sehr viele Bestellungen abgebrochen, und Sie sollten diesem Trend nicht noch zusätzlich Futter geben.

kostenloses eBook SEO für OXID eShop

10 SEO Tipps für Ihren OXID eShop - kostenlos

Laden Sie sich Ihr kostenloses eBook herunter und optimieren Sie Ihren Shop ganz einfach selbst.

 

Thema: Pimp your Shop | Stichworte: , , , , ,