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>

我在实际表单上方创建了“test”表单来比较样式。我正在使用此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

使用带有SqPaymentForm的Bootstrap（Square）

1 个答案: