Javascript 将引导与SqPaymentForm（方形）一起使用

我有一个网站，使用引导4。在这个网站上，我正试图使用。我只是想让付款字段看起来像Bootstrap4表单。然而，CSS是远远不够的。此时，我有以下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>      

---

当这个表单呈现时，就像输入样式只是部分应用一样。例如，填充设置似乎没有任何影响。如何使

SqPaymentForm

看起来像bootstrap4表单？我希望为我的用户提供一致的用户体验。

不要忘记为

.sq输入设置css样式。阅读更多关于哪些样式应该放在哪里的信息

我不熟悉Bootstrap，但我把你的代码放在笔里，相信我得到了一个与测试表单非常相似的表单



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() {
    }
  }
});