方形付款表单演练未捕获引用错误:在初始化之前无法访问“paymentForm”

2024-09-29 23:21:01 发布

您现在位置:Python中文网/ 问答频道 /正文

尝试了两次,首先是直接代码here&;然后是视频here。继续得到相同的Uncaught ReferenceError: Cannot access 'paymentForm' before initialization错误。现在,我的脚本直接在html&;一旦我让它工作,它将移动到单独的文件。现在看起来是这样的:

<script type="text/javascript" src="https://js.squareupsandbox.com/v2/paymentform"></script>

<div id="form-container">
 <div id="sq-card-number"></div>
 <div class="third" id="sq-expiration-date"></div>
 <div class="third" id="sq-cvv"></div>
 <div class="third" id="sq-postal-code"></div>
 <button id="sq-creditcard" class="button-credit-card" onclick="onGetCardNonce(event)">Pay $1.00</button>
 </div>

 <script type="text/javascript">
 // Create and initialize a payment form object
 const paymentForm = new SqPaymentForm({
 // Initialize the payment form elements

 //TODO: Replace with your sandbox application ID
 applicationId: "REPLACE_WITH_APPLICATION_ID",
 inputClass: 'sq-input',
   autoBuild: false,
   // Customize the CSS for SqPaymentForm iframe elements
   inputStyles: [{
       fontSize: '16px',
       lineHeight: '24px',
       padding: '16px',
       placeholderColor: '#a0a0a0',
       backgroundColor: 'transparent',
   }],
   // Initialize the credit card placeholders
   cardNumber: {
       elementId: 'sq-card-number',
       placeholder: 'Card Number'
   },
   cvv: {
       elementId: 'sq-cvv',
       placeholder: 'CVV'
   },
   expirationDate: {
       elementId: 'sq-expiration-date',
       placeholder: 'MM/YY'
   },
   postalCode: {
       elementId: 'sq-postal-code',
       placeholder: 'Postal'
   },
   // SqPaymentForm callback functions
   callbacks: {
       /*
       * callback function: cardNonceResponseReceived
       * Triggered when: SqPaymentForm completes a card nonce request
       */
       cardNonceResponseReceived: function (errors, nonce, cardData) {
       if (errors) {
           // Log errors from nonce generation to the browser developer console.
           console.error('Encountered errors:');
           errors.forEach(function (error) {
               console.error('  ' + error.message);
           });
           alert('Encountered errors, check browser developer console for more details');
           return;
       }
          alert(`The generated nonce is:\n${nonce}`);
          //TODO: Replace alert with code in step 2.1
       }
   }
 });

 paymentForm.build(); 

 function onGetCardNonce(event) {
   event.preventDefault();
   paymentForm.requestCardNonce();
 }

 </script>

有什么我遗漏的吗?据我所知,我正在学习教程。使用PythonFlask(所以我安装了pip squareup),但根据视频,一般的后端概念是相同的。我也通过了repo here,但无法判断问题是否只是语法问题,还是发生了其他问题


Tags: thedividsqscriptfunctioncardplaceholder

热门问题