Skip to content
This repository was archived by the owner on May 13, 2021. It is now read-only.
This repository was archived by the owner on May 13, 2021. It is now read-only.

SqPaymentForm results in error without locationId #4

@PeterTakahashi

Description

@PeterTakahashi
<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: "xxxxxxxxxx",
   locationId: "xxxxxxxxxxx",
   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) {
 // Don't submit the form until SqPaymentForm returns with a nonce
   event.preventDefault();
   // Request a nonce from the SqPaymentForm object
   paymentForm.requestCardNonce();
 }
 //TODO: paste code from step 1.2.4
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions