Square Connect with node/angular

问题

I am trying to integrate the Square Online payments into my web app. Here is the error I am getting:

Uncaught FormNotReadyError: Cannot call SqPaymentForm#requestCardNonce before SqPaymentForm is ready.

I have not been able to really find anything with integrating Square online payments into Angular, and I am still fairly new to angular/node. Thanks

payment.html

<div id="form-container">
  <div id="sq-ccbox">
    <form id="nonce-form" novalidate action="process-payment" 
 method="post">
      <fieldset>
        <div id="sq-card-number"></div>
         <div class="third">
          <div id="sq-expiration-date"><input type="text"></div>
        </div>
        <div class="third">
          <div id="sq-cvv"></div>
        </div>
       <div class="third">
         <div id="sq-postal-code"></div>
        </div>
      </fieldset>
      <button id="sq-creditcard" class="button-credit-card" 
    onclick="onGetCardNonce(event)">Pay $1.00</button>
  <!--
    After a nonce is generated it will be assigned to this hidden input 
field.
  -->
  <input type="hidden" id="card-nonce" name="nonce">
</form>
  </div> <!-- end #sq-ccbox -->
 </div> <!-- end #form-container -->

payment.component

import { Component, OnInit } from '@angular/core';

  declare var SqPaymentForm: any;

    @Component({
      selector: 'app-payment',
     templateUrl: './payment.component.html',
     styleUrls: ['./payment.component.css']
   })
    export class PaymentComponent implements OnInit {


      constructor() { }

      ngOnInit() {
     const applicationId = 'sandbox-sq0idp-HgQsUszzlyjKUGnaq6Ps0Q';

// onGetCardNonce is triggered when the "Pay $1.00" button is clicked
     function onGetCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
 // tslint:disable-next-line: no-use-before-declare
 paymentForm.requestCardNonce();
}

// Create and initialize a payment form object
    const paymentForm = new SqPaymentForm({
 // Initialize the payment form elements
 applicationId,
 inputClass: 'sq-input',

// 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 (errors, nonce, cardData) {
     if (errors) {
         // Log errors from nonce generation to the browser developer 
  console.
        console.error('Encountered errors:');
 // tslint:disable-next-line: only-arrow-functions
        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}`);
    // Uncomment the following block to
    // 1. assign the nonce to a form field and
    // 2. post the form to the payment processing handler

   ( document.getElementById('card-nonce') as HTMLInputElement).value = 
nonce
     ( document.getElementById('nonce-form') as HTMLFormElement).submit();

    alert('The generated nonce is:\n${nonce}');
    }
}
});
 }

}

来源：https://stackoverflow.com/questions/56587001/square-connect-with-node-angular

标签

angular

payment

square