Come si costruisce un modulo Recurly.js con elementi div?

Il mio team utilizza Recurly.js per creare una pagina di pagamento nel nostro sito Web. Abbiamo seguito i documenti da https://docs.recurly.com/js. Secondo i documenti,Come si costruisce un modulo Recurly.js con elementi div?

Costruisci un modulo come preferisci. Utilizzare l'attributo data-recurly per identificare i target del campo di input su Recurly.js. Per identificare dove Recurly.js inserirà i campi di dati delle carte, ti consigliamo di utilizzare semplici elementi div.

Il problema è che gli elementi div non vengono effettivamente visualizzati nel modulo. Ecco un breve esempio riproducibile in base al largo dei documenti:

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

Questo è ciò che sembra:

Come si può vedere, i due input s mostrano bene, ma nessuno dei div s mostrano correttamente.

che cosa stiamo facendo male e come si costruisce una forma Recurly.js con div elementi?

fonte

2016-02-05 iBelieve

il codice JavaScript che chiama di configurazione non può essere nel tag testa e deve essere situato nel tag body

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

Questo esempio dovrebbe mostrare come configurarlo correttamente. Avviso dove hanno messo il javascript nel corpo: 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>

il browser carica javascript nella testa, che carica fino recurly, e poi nel corpo è possibile utilizzare recurly.

fonte

2016-02-05 21:29:24 PHPDave

Come si costruisce un modulo Recurly.js con elementi div?

risposta

Problemi correlati