Neu PayPal Checkout - Zahlarten Icons

[FPrüfer]

Hallo,
der Ratepay Rechnungskauf ist im Plugin eine separate Zahlungsart. Dafür kann man individuell im Shop-Backend bei den Zahlungsarten eine Bild-URL hinterlegen.

 

[roots]

Danke für den Hinweis

 

[wawi-dl]

Gibt es denn eine Sammlung frei zugänglicher Icons für die gängigen Zahlungsarten?

Wir würden gerne auch irgenwie "einheitliche" Icons präsentieren.

 

[roots]

Ich hatte bisher das hier entdeckt, da ist es aber notwendig, den CC Lizenz Hinweis zu platzieren mit Nennung des Urhebers:
https://50north.de/kostenlose-payment-icons-fuer-den-europaeischen-markt/
Deckt für uns leider auch nicht alles ab.
Andere Quellen?

Ich konnte außerdem bisher kein (offizielles) Logo für den Rechnungskauf über PayPal und Ratepay finden, das auch noch mehrsprachig funktioniert.

 

[admin@waermebau]

Da habe ich mich unklar ausgedrückt. Es scheint so zu sein, dass man nur für alle PayPal Zahlungsarten zusammen eine Sortiernummer vergeben kann, aber keinen Einfluss auf die Reihenfolge der untergliederten haben kann. Aber immerhin kann man jetzt die eigenen Zahlungsarten über der Paypal Paywall platzieren.

Ich habe dieses Problem an Paypal und JTL gemeldet, da bei uns zuerst die Paypal Spezialzahlungsarten wie "Giropay" aufgelistet werden und zum Ende erst "Paypal".

Antwort von JTL:
"nein eine Sortierung ist nicht möglich, diese werden so von Paypal selbst ausgespielt."

Daraufhin Anfrage beim Paypal Techniksupport:
Antwort von Paypal:
„I can see what you mean in the uploaded screenshot. That appears to be a setting controlled by JTL and you will need to contact them or work with your web developer to modify the related file for your website code. I am not sure why they have it in that order and I can understand wanting to update it.“

Auf die weitergeleitete Reaktion von Paypal kam dann vom JTL Support:
"ich möchte hier keine Diskussion anfangen, doch vertraue ich da schon dem was der Entwickler mir sagt da der ja schließlich nach den Paypal Dev Vorgaben das Plugin auch programmiert hat. Ich kann Ihnen leider dazu nicht mehr mitteilen als in meiner letzten Nachricht. Eine Sortierung der Paypal Zahlungsarten ist nicht vorgesehen und die Zahlungsarten werden durch Paypal augespielt. Ja auch wenn es kein IFrame mehr ist. Dennoch ist es so wie ich Ihnen mitgeteilt habe."

 

[silent]

Ich habe für mich eine akzeptable Lösung gefunden um die Zahlungsarten- und Versandauswahl, die ich noch nie schön fand anders und kompakter zu gestalten.
Mit etwas Anstrengung geht das auch mit reinem CSS und verhält sich responsiv vernünftig

Den Anhang 86347 betrachten

Das sieht vergleichsweise richtig edel aus.

 

[HMside]

Ich habe für mich eine akzeptable Lösung gefunden um die Zahlungsarten- und Versandauswahl, die ich noch nie schön fand anders und kompakter zu gestalten.
Mit etwas Anstrengung geht das auch mit reinem CSS und verhält sich responsiv vernünftig

Den Anhang 86347 betrachten

Magst Du ggf. das CCS-Styling als Beispiel hier zur Verfügung stellen?

 

[SportNet]

Antwort von JTL:
"nein eine Sortierung ist nicht möglich, diese werden so von Paypal selbst ausgespielt."

du könntest die Zahlungsarten mit CSS ("display: flex;" für das Vaterelement und "order:1, order:2 ... order:n" für die Elemente der Zahlungsarten) selbst im Template sortieren.

Schon probiert?

 

[css-umsetzung]

na da muss man schon etwas mehr tun
Das css dafür ist schon etwas umfangreich und je nach Template Anbieter unterschiedlich, es macht auch einen Unterschied, was ich für Zahlungsanbieter habe.

Daher würde gebe ich da jetzt nicht einfach so irgendein CSS raushauen, das muss schon individuell angepasst werden.

Flexbox ist aber schon die richtige Richtung

 

[Garten-Nutzer]

Hallo zusammen,

es hat sich ja leider hier wenig getan was die Icons angeht.

Hierzu ein paar Fragen:
- Wie kann man etwas neben das Bild schreiben? (Siehe hierzu die Nachnahme Gebühr)
- Wieso kann man man zwar im Reiter "Zahlungsarten" Grafiken hinterlegen, aber diese werden nur vom echten PayPal, Vorkasse und Nachnahme geladen. Bei "PayPal Später bezahlen", Kreditkarte und SEPA wird das einfach ignoriert.
- Wieso ist der Auswahlknopf / Button nicht automatisch mittig, wenn das Logo etwas größer ist? Kann man das ändern? Wie denn?

Vielleicht kriegen wir es hin, dass es einheitlich / sauber aussieht.

 

[css-umsetzung]

Wie kann man etwas neben das Bild schreiben? (Siehe hierzu die Nachnahme Gebühr)

Dazu muss das Template angepasst werden

Wieso kann man man zwar im Reiter "Zahlungsarten" Grafiken hinterlegen, aber diese werden nur vom echten PayPal, Vorkasse und Nachnahme geladen. Bei "PayPal Später bezahlen", Kreditkarte und SEPA wird das einfach ignoriert.
-

Warum sollte das nicht gehen?

- Wieso ist der Auswahlknopf / Button nicht automatisch mittig, wenn das Logo etwas größer ist? Kann man das ändern? Wie denn?

Alles ist änderbar aber teilweise eben nur durch individuelle Anpassungen im Template oder eben über CSS und muss dann wie man hier an den Buttons sehen kann teilweise dann individuell nachjustiert werden wie man z.B.: beim Visa sieht.

Ich habe in einem früherem Beitrag ja schon geschrieben, dass die gesamte Ansicht in diesem Bereich lieblos ist, aber JTL muss da natürlich einen Standard fahren der dann für alle Zahlungsarten passt, daher geht es eben nur über eine eigene Lösung.

 

[HMside]

Ich habe es aktuell so gelöst. Ob mein CSS-Styling auch bei deinem Template angewandt werden kann, kann ich leider nicht beantworten.

// Styling der Zahlungsmethoden im Checkout
.row.checkout-payment-options.form-group > div {
  display: flex;
  flex-wrap: wrap;
}
#za_ppc_paypal .custom-control, #za_ppc_paylater .custom-control, #kPlugin_96_paypalkreditkarte .custom-control {
  border: 1px solid #81B202 !important;
  padding: 12px;
  width: 94.5%;
  margin: 2px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
#za_ppc_paypal .checkout-payment-method, #za_ppc_paylater .checkout-payment-method, #kPlugin_96_paypalkreditkarte .checkout-payment-method {
  width: 100%;
  text-align: center;
}
#za_ppc_paypal .checkout-payment-method-note, #za_ppc_paylater .checkout-payment-method-note, #kPlugin_96_paypalkreditkarte .checkout-payment-method-note {
  text-align: center;
}
#za_ppc_paypal .checkout-payment-method-note > small, #za_ppc_paylater .checkout-payment-method-note > small, #kPlugin_96_paypalkreditkarte .checkout-payment-method-note > small {
  font-size: inherit;
}
#za_ppc_paypal .custom-radio .custom-control-label::before, #za_ppc_paylater .custom-radio .custom-control-label::before, #kPlugin_96_paypalkreditkarte .custom-radio .custom-control-label::before {
  color: #81B202;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(-50%, -50%);
}
#za_ppc_paypal .custom-radio .custom-control-label::after, #za_ppc_paylater .custom-radio .custom-control-label::after, #kPlugin_96_paypalkreditkarte .custom-radio .custom-control-label::after {
  position: absolute;
  opacity: 0;
}
#payment1, #kPlugin_96_rechnungskaufmitratepay, #kPlugin_82_ideal, #kPlugin_82_giropay, #kPlugin_82_creditcard, #za_ueberweisung_jtl, #kPlugin_82_klarnapaylater, #kPlugin_82_sofort, #kPlugin_82_bancontact, #kPlugin_40_amazonpay, #kPlugin_82_applepay, #kPlugin_82_eps, #kPlugin_82_przelewy24 {
  flex: 0 0 47%;
  margin: 2px;
}
#payment1 .custom-control, #kPlugin_96_rechnungskaufmitratepay .custom-control, #kPlugin_82_ideal .custom-control, #kPlugin_82_giropay .custom-control, #kPlugin_82_creditcard .custom-control, #za_ueberweisung_jtl .custom-control, #kPlugin_82_klarnapaylater .custom-control, #kPlugin_82_sofort .custom-control, #kPlugin_82_bancontact .custom-control, #kPlugin_40_amazonpay .custom-control, #kPlugin_82_applepay .custom-control, #kPlugin_82_eps .custom-control, #kPlugin_82_przelewy24 .custom-control {
  border: 1px solid #81B202 !important;
  padding: 12px;
  width: 100%;
  margin: 2px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
#payment1 .checkout-payment-method, #kPlugin_96_rechnungskaufmitratepay .checkout-payment-method, #kPlugin_82_ideal .checkout-payment-method, #kPlugin_82_giropay .checkout-payment-method, #kPlugin_82_creditcard .checkout-payment-method, #za_ueberweisung_jtl .checkout-payment-method, #kPlugin_82_klarnapaylater .checkout-payment-method, #kPlugin_82_sofort .checkout-payment-method, #kPlugin_82_bancontact .checkout-payment-method, #kPlugin_40_amazonpay .checkout-payment-method, #kPlugin_82_applepay .checkout-payment-method, #kPlugin_82_eps .checkout-payment-method, #kPlugin_82_przelewy24 .checkout-payment-method {
  width: 100%;
  text-align: center;
}
#payment1 .checkout-payment-method-note, #kPlugin_96_rechnungskaufmitratepay .checkout-payment-method-note, #kPlugin_82_ideal .checkout-payment-method-note, #kPlugin_82_giropay .checkout-payment-method-note, #kPlugin_82_creditcard .checkout-payment-method-note, #za_ueberweisung_jtl .checkout-payment-method-note, #kPlugin_82_klarnapaylater .checkout-payment-method-note, #kPlugin_82_sofort .checkout-payment-method-note, #kPlugin_82_bancontact .checkout-payment-method-note, #kPlugin_40_amazonpay .checkout-payment-method-note, #kPlugin_82_applepay .checkout-payment-method-note, #kPlugin_82_eps .checkout-payment-method-note, #kPlugin_82_przelewy24 .checkout-payment-method-note {
  text-align: center;
}
#payment1 .checkout-payment-method-note > small, #kPlugin_96_rechnungskaufmitratepay .checkout-payment-method-note > small, #kPlugin_82_ideal .checkout-payment-method-note > small, #kPlugin_82_giropay .checkout-payment-method-note > small, #kPlugin_82_creditcard .checkout-payment-method-note > small, #za_ueberweisung_jtl .checkout-payment-method-note > small, #kPlugin_82_klarnapaylater .checkout-payment-method-note > small, #kPlugin_82_sofort .checkout-payment-method-note > small, #kPlugin_82_bancontact .checkout-payment-method-note > small, #kPlugin_40_amazonpay .checkout-payment-method-note > small, #kPlugin_82_applepay .checkout-payment-method-note > small, #kPlugin_82_eps .checkout-payment-method-note > small, #kPlugin_82_przelewy24 .checkout-payment-method-note > small {
  font-size: inherit;
}
#payment1 .custom-radio .custom-control-label::before, #kPlugin_96_rechnungskaufmitratepay .custom-radio .custom-control-label::before, #kPlugin_82_ideal .custom-radio .custom-control-label::before, #kPlugin_82_giropay .custom-radio .custom-control-label::before, #kPlugin_82_creditcard .custom-radio .custom-control-label::before, #za_ueberweisung_jtl .custom-radio .custom-control-label::before, #kPlugin_82_klarnapaylater .custom-radio .custom-control-label::before, #kPlugin_82_sofort .custom-radio .custom-control-label::before, #kPlugin_82_bancontact .custom-radio .custom-control-label::before, #kPlugin_40_amazonpay .custom-radio .custom-control-label::before, #kPlugin_82_applepay .custom-radio .custom-control-label::before, #kPlugin_82_eps .custom-radio .custom-control-label::before, #kPlugin_82_przelewy24 .custom-radio .custom-control-label::before {
  color: #81B202;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);
}
#payment1 .custom-radio .custom-control-label::after, #kPlugin_96_rechnungskaufmitratepay .custom-radio .custom-control-label::after, #kPlugin_82_ideal .custom-radio .custom-control-label::after, #kPlugin_82_giropay .custom-radio .custom-control-label::after, #kPlugin_82_creditcard .custom-radio .custom-control-label::after, #za_ueberweisung_jtl .custom-radio .custom-control-label::after, #kPlugin_82_klarnapaylater .custom-radio .custom-control-label::after, #kPlugin_82_sofort .custom-radio .custom-control-label::after, #kPlugin_82_bancontact .custom-radio .custom-control-label::after, #kPlugin_40_amazonpay .custom-radio .custom-control-label::after, #kPlugin_82_applepay .custom-radio .custom-control-label::after, #kPlugin_82_eps .custom-radio .custom-control-label::after, #kPlugin_82_przelewy24 .custom-radio .custom-control-label::after {
  position: absolute;
  opacity: 0;
}

 

[css-umsetzung]

Es ist fast alles möglich aber, je nachdem was man für Zahlungsarten hat, kann es eben auch sein das man im Template eingreifen muss.

 

[Garten-Nutzer]

Dazu muss das Template angepasst werden

Habe ich mir schon gedacht. Habe es auch gefunden.
Die betreffende Datei ist übrigens die "inc_payment_methods.tpl" im NOVA/checkout Ordner.
Wenn man mit der Holzhammer Methode arbeiten möchte kann im Child-Template den Inhalt der Datei auf folgendes ändern:

                    {block name='checkout-inc-payment-methods-image-title'}
                        {if $zahlungsart->cBild}
                                {image src=$zahlungsart->cBild alt=$zahlungsart->angezeigterName|trans fluid=true class="img-sm"}
                                    {if $zahlungsart->cHinweisText|has_trans}
                                        <span class="checkout-payment-method-note">
                                            <small>{$zahlungsart->cHinweisText|trans}</small>
                                        </span>
                                    {else}
                                   
                                    {/if}
                        {else}
                            <span class="content">
                                <span class="title">{$zahlungsart->angezeigterName|trans}</span>
                            </span>
                        {/if}
                    {/block}
                        {block name='checkout-inc-payment-methods-note'}
                       
                        {/block}

Hiermit wird der Hinweistext der Unter dem Bild steht, direkt an das Bild gesetzt. Es muss aber in der custom.css noch folgendes ergänzt werden, damit der Text neben dem Bild stehen darf und nicht zu nah am Bild steht:

.checkout-payment-method .checkout-payment-method-note {
    display: inline;
    margin-left: 1rem;
}

Warum sollte das nicht gehen?

Für alle die, wie ich auch, den Wald vor lauter Bäumen nicht gefunden haben: Ihr müsst die Bilder im PayPal Plugin unter Einstellungen -> Aktive Zahlungsarten und dann beim Zahnrad klicken. Dann könnt ihr das Bild einfügen.

Alles ist änderbar aber teilweise eben nur durch individuelle Anpassungen im Template oder eben über CSS und muss dann wie man hier an den Buttons sehen kann teilweise dann individuell nachjustiert werden wie man z.B.: beim Visa sieht.

Ja man kann zwar theoretisch die PayPal Buttons verschieben, aber da die PayPal style.css NACH der custom.css geladen wird muss man da eine Lösung finden.

 

[css-umsetzung]

Ja man kann zwar theoretisch die PayPal Buttons verschieben, aber da die PayPal style.css NACH der custom.css geladen wird muss man da eine Lösung finden.

Man kann kann schon, man muss nur eben sicher sein das man mit seinem CSS mehr rechte hat als das von PayPal

Meinen anderen Beitrag hast du gesehen, was theoretisch möglich ist?
Das habe ich "nur" (ca. 300 Zeilen) css gemacht:

https://forum.jtl-software.de/threads/paypal-checkout-zahlarten-icons.183592/post-1002841

 

[Garten-Nutzer]

Man kann kann schon, man muss nur eben sicher sein das man mit seinem CSS mehr rechte hat als das von PayPal

Würdest du mir auch verraten wie ich das machen kann? Ich kenne nur die "!important" Anweisung. Damit klappt es auch.

Meinen anderen Beitrag hast du gesehen, was theoretisch möglich ist?
Das habe ich "nur" (ca. 300 Zeilen) css gemacht:

Ja habe ich gesehen. Sieht sehr schön aus. Würdest du die CSS-Änderung denn hier posten?

Ich mein @Jtl vielleicht solltet ihr @css-umsetzung mal anfragen ob er nicht für eine entsprechende Summe euch diese Seite so schön macht.

 

[css-umsetzung]

Ich kann das nicht posten, denn zum einen habe ich ja schon geschrieben, das es Template und auch Zahlungsarten abhängig ist,
einzelne Zahlungsarten erfordern ja wenn Sie aktiviert werden zusätzliche Eingaben wie z.B.: Kreditkarte, dann muss gewährleistet werden, das die Box dann auch passend erweitert wird wenn sie aktiviert ist um die zusätzlichen Eingaben zuzulassen oder den Info Text ggf. anzuzeigen.

Beispiel:




Der zweite Punkt ist eben, dass ich mit solchen Dingen mein Geld verdiene und daher kann ich nicht für alles eine kostenlose Lösung zur Verfügung stellen, in der ich dann am Ende noch unzählige Stunden kostenlosen support leiste weil es immer eine Zahlungsart oder ein Template geben wird wo man zusätzliches css oder dann eben doch Template Eingriffe braucht.

 

[Garten-Nutzer]

Ich kann das nicht posten, denn zum einen habe ich ja schon geschrieben, das es Template und auch Zahlungsarten abhängig ist,
einzelne Zahlungsarten erfordern ja wenn Sie aktiviert werden zusätzliche Eingaben wie z.B.: Kreditkarte, dann muss gewährleistet werden, das die Box dann auch passend erweitert wird wenn sie aktiviert ist um die zusätzlichen Eingaben zuzulassen oder den Info Text ggf. anzuzeigen.

Ach so das geht sogar noch auf / erweitert sich. Das wusste ich nicht sorry.

Der zweite Punkt ist eben, dass ich mit solchen Dingen mein Geld verdiene und daher kann ich nicht für alles eine kostenlose Lösung zur Verfügung stellen, in der ich dann am Ende noch unzählige Stunden kostenlosen support leiste weil es immer eine Zahlungsart oder ein Template geben wird wo man zusätzliches css oder dann eben doch Template Eingriffe braucht.

Kann ich komplett verstehen. Deine Hilfe / Hinweise hier haben mir ja auch schon sehr weitergeholfen. Vielen Dank dafür.

 

[Garten-Nutzer]

Dank der hilfreichen Kommentare von @css-umsetzung habe ich endlich eine Lösung für unser Problem gefunden und möchte diese natürlich auch mit euch allen teilen.

JTL- Shop Version 5.3.2 mit NOVA-Child
Wie immer: Änderungen an tpl-Dateien sollten immer verstanden werden und bei einem Update entsprechend nachgezogen werden.

Als Bilder für die Zahlungsart wurden diese Dateien genommen: https://50north.de/kostenlose-payment-icons-fuer-den-europaeischen-markt/
Hier wurde aber beim einfügen festgestellt das die SVG Datei vom Shop zwar ohne Probleme verarbeitet wird, aber halt viel zu groß dargestellt wird. Wir haben die Bilder auf 75 x 52 Pixel skalieren lassen und als PNG abgespeichert. Bei einer kleineren Größe fallen die schwarzen Ränder jedoch unschön auf. Dies kann man verhindern indem man die SVG-Datei bearbeitet und dort den Rand auf "Konkav" umändert. Damit wird der Rand nach innen gelegt und unter den Layer verschoben. Einfach aber effektiv.

Damit das ganze funktioniert die Bilder entsprechend wie oben angemerkt hinterlegen (Admin -> Zahlungsarten UND im PayPal Plugin)

Jetzt im Child-Template den Ordner "checkout" erstellen und eine Datei mit dem Namen "inc_payment_methods.tpl" erstellen. Hier folgenden Code einfügen:

 {block name='checkout-inc-payment-methods'}
    {radiogroup}
        {foreach $Zahlungsarten as $zahlungsart}
            {col cols=12 id=$zahlungsart->cModulId class="checkout-payment-method ppc-checkout-payment-method"}
                {radio name="Zahlungsart"
                        value=$zahlungsart->kZahlungsart
                        id="payment{$zahlungsart->kZahlungsart}"
                        checked=($AktiveZahlungsart === $zahlungsart->kZahlungsart || $Zahlungsarten|@count === 1)
                        required=($zahlungsart@first)
                }
                    {* Hinweistext steht neben dem Bild. Änderungen in der custom.css beachten. *}
                    {block name='checkout-inc-payment-methods-image-title'}
                        {if $zahlungsart->cBild}
                                {image src=$zahlungsart->cBild alt=$zahlungsart->angezeigterName|trans fluid=true class="img-sm"}
                                    {if $zahlungsart->cHinweisText|has_trans}
                                        <span class="checkout-payment-method-note">
                                            <small>{$zahlungsart->cHinweisText|trans}</small>
                                        </span>
                                    {/if}
                        {else}
                            <span class="content">
                                <span class="title">{$zahlungsart->angezeigterName|trans}</span>
                            </span>
                        {/if}
                    {/block}
                    {if $zahlungsart->fAufpreis != 0}
                        {block name='checkout-inc-payment-methods-badge'}
                            <strong class="checkout-payment-method-badge">
                            {if $zahlungsart->cGebuehrname|has_trans}
                                <span>{$zahlungsart->cGebuehrname|trans} </span>
                            {/if}
                                {$zahlungsart->cPreisLocalized}
                            </strong>
                        {/block}
                    {/if}
                    {if $zahlungsart->cHinweisText|has_trans}
                        {* Änderung da der Hinweitext nicht doppelt angezeigt werden soll *}
                        {block name='checkout-inc-payment-methods-note'}
                        
                        {/block}
                    {/if}
                {/radio}
            {/col}
        {/foreach}
    {/radiogroup}
{/block}

Ja das ist die gesamte "inc_payment_methods.tpl" die wir hier ersetzen. Die wichtigsten Änderungen sind:
Zeile 4: Wir weisen den Buttons die nicht vom PayPal Plugin stammen dennoch die selbe Klasse zu. "ppc-checkout-payment-method" Das muss gemacht werden, weil man sonst bei Änderungen an den Buttons auch die Buttons der Versandauswahl verschieben würde
Zeile 11-19: Der Hinweistext soll nach dem Bild gesetzt werden.
Zeile 37-40: Hier steht der Hinweistext normalerweise und wird hier entfernt.

Damit das ganze auch funktioniert benötigt ihr noch etwas CSS, also in der "custom.css" einfach folgendes ergänzen:

.checkout-payment-method .checkout-payment-method-note {
    display: inline;
    margin-left: 1rem;
}

.ppc-checkout-payment-method .custom-control-label::before, .ppc-checkout-payment-method .custom-control-label::after {
    top: 1.15rem !important;
}

Das funktioniert super solange alle Zahlungsbilder die selbe Größe haben und zwar 75x52 Pixel. Wenn diese bei euch größer sein sollen müsst ihr den Wert bei " top: 1.15rem" entsprechend bearbeiten.

Das war dann schon alles.