Brainintree Client가 JS v3으로 설정되었습니다. - payment_method_nonce가 null이고 양식이 제출되지 않습니다.

Question

Bravelree를 Laravel 5.2 앱에 통합하려고했는데 모든 것이 JS v2 클라이언트 설정에서 제대로 작동하지만 업그레이드하고 싶습니다. v3. 이 (내가 조금 사용자 정의했습니다) 워드 프로세서에서입니다 : 내가 제출 버튼을 클릭하면

<form id="checkout-form" action="/checkout" method="post"> 
    <div id="error-message"></div> 

    <label for="card-number">Card Number</label> 
    <div class="hosted-field" id="card-number"></div> 

    <label for="cvv">CVV</label> 
    <div class="hosted-field" id="cvv"></div> 

    <label for="expiration-date">Expiration Date</label> 
    <div class="hosted-field" id="expiration-date"></div> 

    <input type="hidden" name="payment-method-nonce"> 
    <input type="submit" value="Pay"> 
</form> 

<!-- Load the Client component. --> 
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/client.min.js"></script> 

<!-- Load the Hosted Fields component. --> 
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/hosted-fields.min.js"></script> 

<script> 

var authorization = '{{ $clientToken }}' 

braintree.client.create({ 
    authorization: authorization 
}, function (clientErr, clientInstance) { 
    if (clientErr) { 
    // Handle error in client creation 
    return; 
    } 

    braintree.hostedFields.create({ 
    client: clientInstance, 
    styles: { 
     'input': { 
     'font-size': '14pt' 
     }, 
     'input.invalid': { 
     'color': 'red' 
     }, 
     'input.valid': { 
     'color': 'green' 
     } 
    }, 
    fields: { 
     number: { 
     selector: '#card-number', 
     placeholder: '4111 1111 1111 1111' 
     }, 
     cvv: { 
     selector: '#cvv', 
     placeholder: '123' 
     }, 
     expirationDate: { 
     selector: '#expiration-date', 
     placeholder: '10/2019' 
     } 
    } 
    }, function (hostedFieldsErr, hostedFieldsInstance) { 
    if (hostedFieldsErr) { 
     // Handle error in Hosted Fields creation 
     return; 
    } 

    form.addEventListener('submit', function (event) { 
     event.preventDefault(); 

     hostedFieldsInstance.tokenize(function (tokenizeErr, payload) { 
     if (tokenizeErr) { 
      // Handle error in Hosted Fields tokenization 
      return; 
     } 

     document.querySelector('input[name="payment-method-nonce"]').value = payload.nonce; 
     form.submit(); 
     }); 
    }, false); 
    }); 
}); 
</script> 

을하지만 아무 일도 발생하지 않습니다. form.submit()가 아닌

가 어떻게 event.preventDefault() 후 양식을 제출할 수 있습니다 작동하기 때문에 event.preventDefault()는 제출과 payment_method_nonce 토큰이 생성됩니다,하지만 난 그 후 양식을 제출할 수 중지? 또는 컨트롤러에 payment_method_nonce 토큰을 보내려면 어떻게해야합니까?

감사합니다.

Answer 1

스 니펫을 복사하고 예제를 실행하려고하면 콘솔에 (index):69 Uncaught ReferenceError: form is not defined이 표시됩니다. 내가 추가했을 때

var form = document.getElementById('checkout-form'); 

그것은 잘게되었다.

양식 변수를 지정하여 양식 dom 요소를 참조하는 것을 잊어 버린 것 같습니다. 그렇지 않은 경우에는 알려주세요.