Braintree - Hosted Fields - Uncaught TypeError: FormNapper requires an HTMLFormElement element or the id string of one

问题

I am trying to customize the layout of my Braintree payment form using hosted fields.

However, I am getting an error saying:

Uncaught TypeError: FormNapper requires an HTMLFormElement element or the id string of one.
    at new n (braintree-2.32.1.min.js:4)
    at i._setupHostedFields (braintree-2.32.1.min.js:5)
    at new i (braintree-2.32.1.min.js:5)
    at braintree-2.32.1.min.js:5
    at braintree-2.32.1.min.js:3
    at c.<computed> (braintree-2.32.1.min.js:3)
    at configuration?authorizationFingerprint=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6IjIwMTgwNDI2MTYtc2FuZGJveCJ9.eyJleHAiOjE1NjU3NzE0MTgsImp0aSI6IjJmZmJkNTI5LWMzMDAtNDFhMi05ZjgwLWI0OTFiYWE1NTM4NCIsInN1YiI6InJka3I2dHd4N3dmeG5ucTQiLCJpc3MiOiJBdXRoeSIsIm1lcmNoYW50Ijp7InB1YmxpY19pZCI6InJka3I2dHd4N3dmeG5ucTQiLCJ2ZXJpZnlfY2FyZF9ieV9kZWZhdWx0IjpmYWxzZX0sInJpZ2h0cyI6WyJtYW5hZ2VfdmF1bHQiXSwib3B0aW9ucyI6e319.pW70SGcu6GctTeE7foNA_VxYRw-uuG2js0XVFOSTHWdGe2UNTQQ11X4mtGE-WuUL51nSDTXJu967_kjRAih5TA&_meta[sessionId]=8abf60fe-075c-48de-af80-7df0d446d515&callback=callback_jsonee1dbd210cde451fab3f2584ba12c0ba:1

I found a similar issue here Uncaught TypeError: FormNapper requires an HTMLFormElement element or the id string of one but this seems to be a different setup to what I am doing.

Here is the stripped down version of my payment form and the braintree.js file that I am using with it:

$.ajax({
	url:'web/token.php',
	type:'get',
	dataType:'json',
	success:function(token){
		
		// braintree.setup(token,'dropin', {
			// container: 'dropin-container'
		// });
		
		braintree.setup(token,'custom', {
			id: 'payment_form',
			hostedFields:{
				number:{selector:'#card-number'},
				cvv:{selector:'#cvv'},
				expirationDate:{selector:'#expiration-date'}
			}
			// paypal:{
				// container: "paypal-container"
			// }
		});
	}
});

<form action="process_order.php" method="POST" class="form" id="payment_form">
	<div id="payment_container">
	
		<div class="form-group">
			<label for="card-number">Card Number</label>
			<div id="card-number" name="card-number"></div>
		</div>
		
		<div class="form-group">
			<label for="cvv">CVV</label>
			<div id="cvv" name="cvv"></div>
		</div>
		
		<div class="form-group">
			<label for="expiration-date">Expiration Date</label>
			<div id="expiration-date" name="expiration-date"></div>
		</div>
		
		<!--<div id="paypal-container"></div>-->
		<!--<div id="dropin-container"></div>-->
		<input type="submit" class="btn btn-default mx-auto" value="Complete Order »" id="payment_button">
	</div>
</form>

<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script src="web/braintree.js"></script>

What am I doing wrong?

来源：https://stackoverflow.com/questions/57474044/braintree-hosted-fields-uncaught-typeerror-formnapper-requires-an-htmlforme

标签

javascript

braintree