Question

我正在网站上创建新的付款方式。我成功地实现了方形空间。但是当某人从购物车中删除任何商品时会产生问题。

调用ajax时，会再次加载整个内容。但是，表单不会加载并显示console error undefined object SqPaymentForm.

var sqPaymentForm = new SqPaymentForm({

  // Replace this value with your application's ID (available from the merchant dashboard).
  // If you're just testing things out, replace this with your _Sandbox_ application ID,
  // which is also available there.
  applicationId: '***********',
  inputClass: 'sq-input',
  cardNumber: {
    elementId: 'sq-card-number',
    placeholder: "0000 0000 0000 0000"
  },
  cvv: {
    elementId: 'sq-cvv',
    placeholder: 'CVV'
  },
  expirationDate: {
    elementId: 'sq-expiration-date',
    placeholder: 'MM/YY'
  },
  postalCode: {
    elementId: 'sq-postal-code',
    placeholder: 'Postal Code'
  },
  inputStyles: [

    // Because this object provides no value for mediaMaxWidth or mediaMinWidth,
    // these styles apply for screens of all sizes, unless overridden by another
    // input style below.
    {
      fontSize: '14px',
      padding: '3px'
    },

    // These styles are applied to inputs ONLY when the screen width is 400px
    // or smaller. Note that because it doesn't specify a value for padding,
    // the padding value in the previous object is preserved.
    {
      mediaMaxWidth: '400px',
      fontSize: '18px',
    }
  ],
  callbacks: {
    cardNonceResponseReceived: function(errors, nonce, cardData) {
      if (errors) {
        var errorDiv = document.getElementById('errors');
        errorDiv.innerHTML = "";
        errors.forEach(function(error) {
          var p = document.createElement('p');
          p.innerHTML = error.message;
          errorDiv.appendChild(p);
        });
      } else {
        // This alert is for debugging purposes only.
        alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));

        // Assign the value of the nonce to a hidden form element
        var nonceField = document.getElementById('card-nonce');
        nonceField.value = nonce;

        // Submit the form
        document.getElementById('form').submit();
      }
    },
    unsupportedBrowserDetected: function() {
      // Alert the buyer that their browser is not supported
    }
  }
});

我使用的是网关doc提供的默认代码。付款选项是活动经理亲的插件。

Answer 1

看起来您忘记包含此行

toPromise()

另请注意，Square和Squarespace是非常不同的公司。

Answer 2

JSFiddle Link

`

/* 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 */
    paymentForm.requestCardNonce();
}

function Initialize(){
    console.log("Initialize square");

    /* Create and initialize a payment form object */
    const paymentForm = new SqPaymentForm({
        /*  Initialize the payment form elements*/
        /* TODO: Replace with your sandbox application ID */
        applicationId: "{API_KEY}",
        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: '{mmyy}',
        },
        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) {
                var errorDiv = $("#square-form-error");
                errorDiv.html("");
                if (errors) {
                    /* Log errors from nonce generation to the browser developer console. */
                    console.error('Encountered errors:');
                    errors.forEach(function (error) {
                        console.error('  ' + error.message);
                        errorDiv.append('<div class="alert alert-danger m-t-15"><strong>' + error.message + '</strong></div>');
                    });
                    /*alert('Encountered errors, check browser developer console for more details');*/
                    return;
                }
                /* add card_nonce and card_zip parameters */
                var $nonceInput = $('<input/>').attr({'name':'card_nonce','value':nonce,'type':'text'});
                var $billingPostalCode = $('<input/>').attr({'name':'card_zip','value':cardData.billing_postal_code,'type':'text'});
                $('#square-form-container').append($nonceInput);
                $('#square-form-container').append($billingPostalCode);
                /* submit form  */
                $('#square-form-container').closest('form')[0].submit();
                /*nonce  */
            },
            unsupportedBrowserDetected: function() {
                /* Alert the buyer that their browser is not supported*/
                alert("browser does not support ");
            }
        }
    });

    /* call after Initialization*/
    paymentForm.build();
}

(function() {
   setTimeout(function() { Initialize(); }, 5000);
})();

`

使用ajax的Square Up支付网关表单

2 个答案: