Benutzerdefiniertes Design für Zahlungsanforderungsschaltfläche [Streifen]

Normalerweise verwenden wir eine theme, die Stripe wie folgt bereitgestellt wurde.Benutzerdefiniertes Design für Zahlungsanforderungsschaltfläche [Streifen]

style: { 
    paymentRequestButton: { 
    theme: "light-outline" 
    } 
}

Sie haben auch einige Thema ist wie 'dark' | 'light' | 'light-outline'

Meine Frage zur Verfügung gestellt ist, können wir ein eigenes Thema für diese Schaltfläche erstellen.? Beispiel: ein blaues Farbschema

Oder gibt es eine Problemumgehung oder einen Skript-Hack, um die Farbe der Schaltfläche zu ändern?

Quelle

2017-11-22 weBBer

Sie können Stripe's all-in-one Zahlungs Widget einfach aufgeben und Ihr eigenes Formular so gestalten, dass es alles ist, was Sie wollen. Wenn das eine akzeptable Alternative ist, gebe ich Ihnen ein Beispiel, wenn ich in ein paar Stunden nach Hause komme. –

@BrianGottier Wenn wir unser eigenes Formular entworfen haben, wie können wir den Zahlungsanforderungsknopf darin einfügen? Und ich hoffe durch Gewohnheit Sie ein Design, das die Kartendetails auch hält. – weBBer

Entschuldigung, Auch wenn ich auf meinen Browsern aktuell bin, kann ich nicht sehen, was ein Zahlungsanforderungsknopf ist, weil Streifen sagt, dass es nicht funktioniert mit meinem Browser. Vielleicht möchten Sie darüber nachdenken, bevor Sie etwas implementieren, das nicht alle nutzen können. –

Lesen Step 3 der Schritte zur Implementierung der Zahlungsanforderungsschaltfläche ist es offensichtlich, dass das Element die ID: #payment-request-button hat.

Haben nicht mit Stripe gearbeitet und ich weiß nicht, ob es eine <button> oder eine komplexere HTML-Markup-Struktur ist und ich auch irgendwo in ihren Dokumenten lesen sie nicht garantieren, die HTML-Struktur ihrer Elemente.

Wie auch immer, hier sind ein paar Dinge im Auge zu behalten, wenn diese Art von Intervention Ziel: vor allem in den Schritten entwickeln:

eine Lösung finden, die für den Augenblick funktioniert. Im Idealfall sollte es etwas sein, das/versagt anmutig degradiert und leise (keine öffentlich zugänglichen Fehler)
Maximize Fähigkeit geringfügige Änderungen im Markup von Streifen zu widerstehen

Auch halten die Quelldateien so können Sie einfach Ihre anpassen Lösung für jedes Markup, das Änderungen von Stripe aufhebt, damit Sie eine Korrektur bereitstellen können, wenn es nicht mehr funktioniert.

Wenn Sie sich auf CSS verlassen (empfohlen), sollten Sie das aktuell gerenderte Markup überprüfen und herausfinden, welche Selektoren aktuell angewendet werden. Einfaches Schreiben von stärkeren Selektoren sollte ausreichen. Wenn Stile über JavaScript von Stripe angewendet werden, müssen Sie wahrscheinlich !important in Ihrem CSS verwenden. Natürlich sollten Sie es so weit wie möglich vermeiden oder zumindest gründlich an so vielen Geräten testen, wie Sie bekommen können.
Als Faustregel ist !important in CSS ziemlich schlecht. Es ist ein sehr kraftvoller Hammer und meistens bricht es empfindliche Dinge (d. H. Reaktionsfähigkeit auf Touch-Geräten). Wenn Sie sich auf JavaScript verlassen, um das Styling zu erstellen, möchten Sie vielleicht mit setTimeout() herumspielen und die richtige Menge an Millisekunden bestimmen, die Sie warten müssen, bevor Sie Ihre Änderungen auslösen, nachdem die Methode prButton.mount() aufgerufen wurde. Testen Sie auf mehreren Geräten.Ich rate von dieser Methode ab, da sie fehleranfälliger und schwieriger zu steuern ist: Sie möchten Ihre Änderungen unmittelbar nach dem Erstellen des Elements zeitgesteuert verarbeiten, aber (idealerweise) bevor es gerendert wird. Natürlich gibt es Workarounds, wie zum Beispiel Ausblenden oder Ausblenden, bis Ihre Änderungen angewendet werden.

Hinweis: Dies ist keine leichte Aufgabe, und niemand (außer sich selbst Streifen, durch ein geeignetes Verfahren bereitstellt) können Sie eine kugelsichere Lösung garantieren, damit ich die Grundsätze Auslegen dachte, wie man es nähern könnte kurz- und langfristig mehr Wert haben, als Stripe daran zu hindern, an einem Test/Dev-Account zu arbeiten und eine bestimmte Lösung anzubieten, die am nächsten Tag nicht mehr funktioniert, wenn Stripe ihr Markup ändert.

Quelle

2017-12-05 04:53:46

Der Button wird in einem 'Iframe' generiert, so dass Sie das' CSS'-Styling sofort im Griff haben. Der einzige Weg ist "Script", wie Sie gesagt haben, dass es Fehler verursachen kann. So ist es ein Knockdown für mich. Ich hoffe, dass Stripe erwägt, uns Optionen zu geben, sie zu stylen. Wie auch immer, netter Versuch, Bruder, ich schätze die Mühe. – weBBer

In diesem Fall ist die einzige Möglichkeit, JavaScript zu verwenden. In Schritt 3 (den ich bereits verlinkt habe) fügen Sie einen Test nach 'prButton.mount()' ein. So etwas wie ... 'document.getElementById ('Zahlungs-Anfrage-Button'). Style.borderColor = 'rot'; document.getElementById ('Zahlungs-Anfrage-Button'). Style.borderWidth = '2px''. Sollte arbeiten. –

Aber sind Sie sicher, dass Stripe Ihnen nicht erlaubt, Klassen zu Ihrem Button und benutzerdefinierten CSS zu Ihrem Snippet/Iframe hinzuzufügen? Ich kann mich nicht erinnern, wo - wie ich viele verwandte Ressourcen durchgemacht habe, aber ich denke, dass es möglich ist. Ist ['this '] (https://www.tipsandtricks-hq.com/customizing-the-payment-button-styles-of-the-stripe-payments-plugin-9071) irgendeiner Hilfe? –

Ich habe versucht, dies auch zu tun, aber die Referenz-Dokumente hier ganz unten scheinen zu zeigen, die Antwort ist "Nein".

Sieht aus wie über eine type und theme das einzige, was Sie einstellen können, ist ein height: https://stripe.com/docs/stripe-js/reference#element-options

(Screenshot von entsprechenden Abschnitt unten, falls es ändert)

Quelle

2017-11-27 22:55:30

Vielen Dank für Ihre Antwort. Ich habe diesen Inhalt doc bemerkt, ich habe mich gefragt, ob es eine Workaround oder Script Hack gibt, um das zu ändern. Hast du irgendwelche Infos dazu? – weBBer

-1

können Sie suchen Zahlung Taste relevant class wie

.stripe-button-el span

Sie es überschreiben können eigene externe CSS-Datei innerhalb. Ich denke, das ist der Ort, an dem Sie Ihren eigenen Bezahlknopf Stil ändern können.

Quelle

2017-12-05 06:46:30

Benutzerdefiniertes Design für Zahlungsanforderungsschaltfläche [Streifen]

Antwort

Verwandte Themen