Payment Form: Cookbook

Notify Users on Payment Errors

Customize the cardNonceResponseReceived callback to notify users when a payment error occurs.

Payment Form

You can customize the SqPaymentForm.cardNonceResponseReceived callback method to parse errors returned after your web application calls theSqPaymentForm.requestCardNonce() function.

The cardNonceResponseReceived callback function includes an errors parameter that provides information about why nonce generation may have failed. We strongly recommend customizing cardNonceResponseReceived to provide feedback to customers about why their payment cannot be processed based on the provided error code.

For more information on the errors parameter and possible error codes, see cardNonceResponseReceived .

Before you start

Step 1: In the cardNonceResponseReceived callback, get any errors returned

If the attempt to get a payment card nonce resulted in errors, the errors parameter contains a collection of JSON objects whose fields include a message key. In the following example, message values are added to a list and displayed in an alert that the user must dismiss.

    /*
     * callback function: cardNonceResponseReceived
     * Triggered when: SqPaymentForm completes a card nonce request
     */
    cardNonceResponseReceived: function(
                errors
                , nonce
                , cardData
                , billingContact
                , shippingContact) {
      if (errors) {
        var str = "Payment card was not accepted" + "\n"
        for(var error in errors){
            str += "* " + error.message + " \n";
        }
        alert(str);
        return;
      }

      // Assign the nonce value to the hidden form field
      document.getElementById('card-nonce').value = nonce;

      // POST the nonce form to the payment processing page
      document.getElementById('nonce-form').submit();

    }

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow