Using Bootstrap with SqPaymentForm (Square)

Question

I have a website that uses Bootstrap 4. In this site, I'm trying to collect payments using the Square Payment Form. I'm simply trying to make the payment fields look like a Bootstrap 4 form. However, the CSS is way off. At this time, I have this HTML:

<div id="sq-ccbox">
    <form>
        <div class="form-group sq-form-group col-12 col-lg-8 pl-0">
            <label for="test">Credit Card Number</label>
            <input type="text" class="form-control sq-input" id="test" aria-describedby="testHelp" placeholder="----">
            <small id="testHelp" class="form-text text-muted">Please provide your card number</small>
          </div>              
    </form>
    <br />

    <form id="nonce-form" novalidate action="[someUrl]" method="post">
      Pay with a Credit Card

      <div class="form-group sq-form-group col-12">
        <label for="sq-ccn">Credit Card Number</label>
        <input type="text" class="form-control sq-input" id="sq-ccn" placeholder="----">
        <small class="form-text text-muted">Put in your credit card number</small>
      </div>

      <div class="form-group sq-form-group col-12">
        <label for="sq-ccv">CVV</label>
        <input type="text" class="form-control" id="sq-ccv" placeholder="----">
        <small class="form-text text-muted">What is your security code on your card?</small>
      </div>          

      <div class="form-group sq-form-group col-12">
        <label for="sq-exd">Expiration Date</label>
        <input type="text" class="form-control" id="sq-exd" placeholder="----">
        <small class="form-text text-muted">When does your credit card expire?</small>
      </div>                    

      <div class="form-group sq-form-group col-12 col-lg-8 pl-0">
        <label for="sq-pc">Postal Code</label>
        <input type="text" class="form-control" id="sq-pc" placeholder="----">
        <small class="form-text text-muted">What postal code is with the card?</small>
      </div>

      <button id="sq-creditcard" class="btn btn-primary button-credit-card" onclick="requestCardNonce(event)">
        Pay Now
      </button>

      <input type="hidden" id="card-nonce" name="nonce">
    </form>
  </div>      

I created the "test" form above the actual form to compare the styles. I'm initializing this payment form using this JavaScript:

var samplePaymentForm = new SqPaymentForm({
  applicationId: 'myId',
  locationId: 'myLocationId',
  inputClass: 'sq-input',

  inputStyles: [
    {
      fontSize: '1em',
      padding: '.5em .75em',
      lineHeight: '1.25em',
      backgroundColor: 'transparent'
    }
  ],

  // Initialize the credit card placeholders
  cardNumber: {
    elementId: 'sq-ccn',
    placeholder: '•••• •••• •••• ••••'
  },
  cvv: {
    elementId: 'sq-ccv',
    placeholder: 'CVV'
  },
  expirationDate: {
    elementId: 'sq-exd',
    placeholder: 'MM/YY'
  },
  postalCode: {
    elementId: 'sq-pc'
  },

  // SqPaymentForm callback functions
  callbacks: {
    methodsSupported: function (methods) {
    },

    createPaymentRequest: function () {

      var paymentRequestJson ;
      /* ADD CODE TO SET/CREATE paymentRequestJson */
      return paymentRequestJson ;
    },

    cardNonceResponseReceived: function(errors, nonce, cardData) {
      if (errors) {
        // Log errors from nonce generation to the Javascript console
        console.log("Encountered errors:");
        errors.forEach(function(error) {
          console.log('  ' + error.message);
        });

        return;
      }

      alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */

      // 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();

    },

    unsupportedBrowserDetected: function() {
    },

    inputEventReceived: function(inputEvent) {
      switch (inputEvent.eventType) {
        case 'focusClassAdded':
          /* HANDLE AS DESIRED */
          break;
        case 'focusClassRemoved':
          /* HANDLE AS DESIRED */
          break;
        case 'errorClassAdded':
          /* HANDLE AS DESIRED */
          break;
        case 'errorClassRemoved':
          /* HANDLE AS DESIRED */
          break;
        case 'cardBrandChanged':
          /* HANDLE AS DESIRED */
          break;
        case 'postalCodeChanged':
          /* HANDLE AS DESIRED */
          break;
      }
    },

    paymentFormLoaded: function() {
    }
  }
});

When this form renders, it's like the input styles are only partially applied. For example, the padding settings do not seem to have any impact. How do I get the SqPaymentForm to look like a Bootstrap 4 form? I want to provide a consistent user experience for my users.

Answer 1

Don't forget to style the css for .sq-input. Read more about which styles should go where in in Step 4 on this page.

I am not familiar with Bootstrap, but I put your code in a pen and believe I got a form that is very similar to the test form.

https://codepen.io/tristansokol/pen/GOqPXy