2016-02-05 6 views
5

私のチームはRecurly.jsを使用してウェブサイトに支払いページを作成しています。私たちはhttps://docs.recurly.com/jsの文書に従っています。ドキュメントによると、div要素を含むRecurly.jsフォームを作成するにはどうすればよいですか?

好きなフォームを作成します。 recurly.jsへの入力フィールドターゲットを識別するには、data-recurly属性を使用します。 Recurly.jsがカードデータフィールドをどこに注入するかを特定するには、単純なdiv要素の使用をお勧めします。

問題は、div要素が実際にフォームに表示されないことです。ここではドキュメントのオフに基づいて、ショート再現性の例です:

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

これは、それがどのように見えるかです:

Recurly.js form example

あなたが見ることができるように、2つのinput sが罰金を示していないが、のどれもdivが正しく表示されます。

私たちは間違って何をしていますか、どのようにdiv要素でRecurly.jsフォームを作成しますか?

答えて

5

configureはheadタグにすることはできませんし、この例では、どのようにそれを正しく設定する方法を示さなければならない

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

bodyタグに配置する必要があります呼び出すJavaScriptコード。彼らは体内でJavaScriptを置く場所に注意してください: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> 

ブラウザはrecurlyアップロード頭、でJavaScriptをロードし、ボディにあなたがrecurly使用することができます。

関連する問題