Как добавить квадратную форму оплаты в компоненте angular, чтобы получить одноразовый номер?

Question

Как добавить квадратную платежную форму в компоненте angular и получить доступ из соответствующего файла TS?

мои html коды -

                    <h2>Pay with a Credit Card</h2>
                    <label for="sq-card-number">Card Number:</label>
                    <div id="sq-card-number"></div>
                    <label for="sq-cvv">CVV:</label>
                    <div id="sq-cvv"></div>
                    <label for="sq-expiration-date">Expiration Date:</label>
                    <div id="sq-expiration-date"></div>
                    <label for="sq-postal-code">Postal Code:</label>
                    <div id="sq-postal-code"></div>

                    <button id="sq-creditcard" class="btn-main button-credit-card"
                        (click)="requestCardNonce($event)">Pay with card</button>

                    <input type="hidden" id="sq-id" name="sq-id">
                    <input type="hidden" id="card-nonce" name="nonce">

в Typescript ngafterviewInit Я использовал это

ngAfterViewInit() {
    jQuery.getScript('https://js.squareupsandbox.com/v2/paymentform').done(() => {
      var applicationId = "sandbox-xxxx-xxxxxxxxxxx";

      // Set the location ID
      var locationId = "xxxxxxxxxxxx";
      this.sqPaymentForm = new SqPaymentForm({
        // Initialize the payment form elements

        //TODO: Replace with your sandbox application ID
        applicationId: applicationId,
        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
          }
        }
      });
      //TODO: paste code from step 1.1.4
      this.sqPaymentForm.build();
    });
  }

, и это вызывается при нажатии кнопки оплаты

requestCardNonce(event) {

    // Don't submit the form until SqPaymentForm returns with a nonce
    event.preventDefault();

    // Request a nonce from the SqPaymentForm object
    this.sqPaymentForm.requestCardNonce();
  }

Я получаю эту ошибку после загрузки страницы -

vendor.js:55969 ERROR ElementNotFoundError: SqPaymentForm element with id 'sq-card-number' not found. Has the DOM finished loading?
See: https://developer.squareup.com/docs/payment-form/payment-form-walkthrough#12-embed-sqpaymentform-in-a-static-web-page
    at t.value (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:91257)
    at t.value (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:90726)
    at t.value (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:90611)
    at t.value (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:88895)
    at yt.initializePaymentMethod (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:144318)
    at yt.mainIframeLoaded (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:144514)
    at t._onload (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:143174)
    at t.value (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:87769)
    at f.onload (https://js.squareupsandbox.com/v2/paymentform?_=1583834837437:1:84829)
    at HTMLIFrameElement.wrapFn (http://localhost:4200/polyfills.js:7941:39)

Может кто-нибудь предложить мне, как я могу внедрить эту квадратную платежную систему в angular? Я искал в Интернете, но не нашел правильного решения. Спасибо заранее !!

Answer 1

Вы можете использовать сервис для загрузки скрипта:

    // src\app\services\dynamic-script-loader.service.ts
    import {Injectable} from '@angular/core';

    interface Scripts {
        name: string;
        src: string;
    }

    export const ScriptStore: Scripts[] = [
        {name: 'square-sandbox', src: 'https://js.squareupsandbox.com/v2/paymentform'},
        {name: 'square', src: 'https://js.squareup.com/v2/paymentform'}
    ];

    @Injectable({
        providedIn: 'root'
    })
    export class 

     - DynamicScriptLoaderService

     {

        private scripts: any = {};

        constructor() {
            ScriptStore.forEach((script: any) => {
                this.scripts[script.name] = {
                    loaded: false,
                    src: script.src
                };
            });
        }

        loadScripts(...scripts: string[]): Promise<any> {
            const promises: any[] = [];
            scripts.forEach((script) => promises.push(this.loadScript(script)));
            return Promise.all(promises);
        }

        loadScript(name: string) {
            return new Promise((resolve, reject) => {
                if (!this.scripts[name].loaded) {
                    // load script
                    const script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = this.scripts[name].src;
                    // @ts-ignore
                    if (script.readyState) {  // IE
                        // @ts-ignore
                        script.onreadystatechange = () => {
                            // @ts-ignore
                            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                                // @ts-ignore
                                script.onreadystatechange = null;
                                this.scripts[name].loaded = true;
                                resolve({script: name, loaded: true, status: 'Loaded'});
                            }
                        };
                    } else {  // Others
                        script.onload = () => {
                            this.scripts[name].loaded = true;
                            resolve({script: name, loaded: true, status: 'Loaded'});
                        };
                    }
                    script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
                    document.getElementsByTagName('head')[0].appendChild(script); // <--- !!!
                } else {
                    console.warn('Already Loaded...')
                    resolve({script: name, loaded: true, status: 'Already Loaded'});
                }
            });
        }

        isAlreadyLoaded(name): boolean {
            return this.scripts[name]?.loaded;
        }
    }

Затем использовать его в своем компоненте с autoBuild = false:

   declare var SqPaymentForm: any;
   ...
   export class MyComponent implements OnInit, OnDestroy {
      paymentForm: any;
      constructor(
         private dsls: DynamicScriptLoaderService,
         ...
      ){}
      ...
      await this.dsls.loadScript(scriptName); // <-- use in ngOnInit
      ...
      this.paymentForm = new SqPaymentForm({ 
      autoBuild: false, //<-- !important too
      ...
      });
      this.paymentForm.build();
      this.paymentForm.requestCardNonce();
      ...

И в нем HTML

   <div id="sq-card-number"></div></div>
   <div id="sq-cvv" class="sq-input-small"></div>
   <div id="sq-expiration-date" class="sq-input-small"></div>
   <div id="sq-postal-code" class="sq-input-small"></div>