Wie erstelle ich ein Recurly.js-Formular mit div-Elementen?

Mein Team verwendet Recurly.js, um eine Zahlungsseite in unsere Website zu integrieren. Wir haben die Dokumentation von https://docs.recurly.com/js verfolgt. Entsprechend der Dokumentation,Wie erstelle ich ein Recurly.js-Formular mit div-Elementen?

Erstellen Sie ein Formular, wie Sie möchten. Verwenden Sie das Datenwiederholungsattribut, um Eingabefeldziele für Recurly.js zu identifizieren. Um zu ermitteln, wo Recurly.js Kartendatenfelder einfügt, empfehlen wir, einfache div-Elemente zu verwenden.

Das Problem ist, dass die div Elemente nicht tatsächlich in der Form angezeigt werden. Hier ist ein kurzes reproduzierbares Beispiel aus der Basis der Dokumentation:

<!doctype html> 
<html lang="en"> 
<head> 
    <!-- Recurly.js script and API key config --> 
    <script src="https://js.recurly.com/v4/recurly.js"></script> 
    <script>recurly.configure('... API Key here...');</script> 
</head> 
<body> 

    <form> 
    <input type="text" data-recurly="first_name"> 
    <input type="text" data-recurly="last_name"> 
    <div data-recurly="number"></div> 
    <div data-recurly="month"></div> 
    <div data-recurly="year"></div> 
    <div data-recurly="cvv"></div> 
    <input type="hidden" name="recurly-token" data-recurly="token"> 
    <button>submit</button> 
    </form> 
</body> 
</html>

Dies ist, wie es aussieht:

Wie Sie sehen können, ist die beide input s zeigt in Ordnung, aber keine der div s korrekt angezeigt.

Was machen wir falsch und wie erstellen wir ein Recurly.js Formular mit div Elementen?

Quelle

2016-02-05 iBelieve

Der Javascript-Code, der configure ruft nicht im Kopf-Tag sein kann und sollte in dem Body-Tag

<script>recurly.configure('... API Key here...');</script>

Dieses Beispiel Sie es zeigen sollte richtig, wie einzurichten befinden. Beachten Sie, wo sie JavaScript in den Körper gelegt: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <!-- Recurly.js script and API key config --> 
    <script src="https://js.recurly.com/v4/recurly.js"></script> 
</head> 
<body> 
    <form> 
    <input type="text" data-recurly="first_name"> 
    <input type="text" data-recurly="last_name"> 
    <div data-recurly="number"></div> 
    <div data-recurly="month"></div> 
    <div data-recurly="year"></div> 
    <div data-recurly="cvv"></div> 
    <input type="hidden" name="recurly-token" data-recurly="token"> 
    <button>submit</button> 
    </form> 
    <script>recurly.configure('... API Key here...');</script> 
</body> 
</html>

Der Browser Javascript im Kopf lädt, die recurly lädt, und dann in den Körper können Sie recurly verwenden.

Quelle

2016-02-05 21:29:24 PHPDave

Wie erstelle ich ein Recurly.js-Formular mit div-Elementen?

Antwort

Verwandte Themen