Payment FigmaFigma Code Connected

Honeycomb provides a few basic components for payment workflows, including a basic stacked payment form as well as credit card icons for additional verification.

Payment form

The default, compact payment form should sit inside of a modal for payment processing within an app. This form currently supports credit card number, expiration date, and CVV entry.

Apply additional visual confirmation of the entered credit card with an optional credit card icon overlay after the user enters the number. See credit card icons below for the available types.

Card details * Required Simulate Mastercard recognition

HTML

Expand Edit in Playground Copy


<label class="hc-form-control">
  <span class="hc-label">
    <span class="hc-label-text">Card details</span>
    <span class="hc-label-required">* Required</span>
  </span>
  <span class="hc-input-group hc-input-group--cc">
    <input class="hc-input hc-input--cc-number hc-input--lg" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx" required>
    <input class="hc-input hc-input--cc-expiration hc-input--lg" type="text" placeholder="mm/yy" required>
    <input class="hc-input hc-input--cc-cvv hc-input--lg" type="text" placeholder="xxx" required>
    <span class="hc-cc" id="hccc"></span>
  </span>
</label>
<label class="hc-form-control">
  <input type="checkbox" class="hc-checkbox" onchange="document.getElementById('hccc').classList.toggle('hc-cc--mastercard')" />
  <span class="hc-label">
    <span class="hc-label-text">Simulate Mastercard recognition</span>
  </span>
</label>

Typically this form will sit inside of a dedicated payment modal, as with the payment request question. Here is an example modal from that question type:

Credit card icons

Create a credit card icon by adding .hc-cc to an inline element and then adding the appropriate credit card modifier class. Supported cards are Visa, Mastercard, Maestro, American Express, Discover, Paypal, Unionpay, and Alipay.

HTML

Expand Edit in Playground Copy


<div class="cc-grid">
  <span class="hc-cc"></span>
  <span class="hc-cc hc-cc--visa"></span>
  <span class="hc-cc hc-cc--mastercard"></span>
  <span class="hc-cc hc-cc--maestro"></span>
  <span class="hc-cc hc-cc--amex"></span>
  <span class="hc-cc hc-cc--discover"></span>
  <span class="hc-cc hc-cc--apple"></span>
  <span class="hc-cc hc-cc--paypal"></span>
  <span class="hc-cc hc-cc--unionpay"></span>
  <span class="hc-cc hc-cc--alipay"></span>
  <span class="hc-cc hc-cc--diners"></span>
  <span class="hc-cc hc-cc--jcb"></span>
  <span class="hc-cc hc-cc--cb"></span>
  <span class="hc-cc hc-cc--bitcoin"></span>
  <span class="hc-cc hc-cc--google"></span>
  <span class="hc-cc hc-cc--shop"></span>
</div>