javascript - 将 Bootstrap 与 SqPaymentForm(方形)结合使用

Question

我有一个使用 Bootstrap 4 的网站。在此网站中，我尝试使用 Square Payment Form 收款。我只是想让付款字段看起来像 Bootstrap 4 表单。然而，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>      

我在实际表单上方创建了“测试”表单来比较样式。我正在使用以下 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() {
    }
  }
});

当呈现此表单时，就像仅部分应用了输入样式。例如，填充设置似乎没有任何影响。如何使 SqPaymentForm 看起来像 Bootstrap 4 表单？我希望为我的用户提供一致的用户体验。

Answer 1

不要忘记为.sq-input设置CSS样式。阅读 Step 4 on this page. 了解更多关于哪些样式应该放在哪里的信息。

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

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