cruc components for Magento 2

Credit Card 

<section class="credit-card">
    <div class="input credit-card__number">
        <label class="
            label
            input__label
            bundle-option__qty-label margin-0
        " for="qty2">
        Credit Card Number
    </label>
        <input class="input__field " id="qty2" name="qty2" type="number" placeholder="" min="0">
    </div>

    <div class="credit-card__date">
        <div class="select credit-card__select margin-right-s">
            <label class="
            label
            label--hidden
        " for="expiration_month">
        Expiration Month
    </label>
            <select id="expiration_month" class="select__field credit-card__field" name="expiration_month">
            <option 
                class=""
                value="option1" 
                
            >
                Option 1
            </option>
            <option 
                class=""
                value="option2" 
                
            >
                Option 2
            </option>
            <option 
                class=""
                value="option3" 
                disabled
            >
                Option 3
            </option>
    </select>
        </div>

        <script src="/components/raw/select/select.js"></script>

        <div class="select credit-card__select">
            <label class="
            label
            label--hidden
        " for="expiration_year">
        Expiration Year
    </label>
            <select id="expiration_year" class="select__field credit-card__field" name="expiration_year">
            <option 
                class=""
                value="option1" 
                
            >
                Option 1
            </option>
            <option 
                class=""
                value="option2" 
                
            >
                Option 2
            </option>
            <option 
                class=""
                value="option3" 
                disabled
            >
                Option 3
            </option>
    </select>
        </div>

        <script src="/components/raw/select/select.js"></script>

    </div>

    <div class="input credit-card__verification">
        <label class="
            label
            input__label
            bundle-option__qty-label margin-0
        " for="qty2">
        Card Verification Number
    </label>
        <input class="input__field " id="qty2" name="qty2" type="number" placeholder="" min="0">
    </div>

</section>
 
<section class="credit-card">
    {{ render '@input' card.number merge=true }}

    <div class="credit-card__date">
        {{ render '@select' card.date.month merge=true }}
        {{ render '@select' card.date.year merge=true }}
    </div>

    {{ render '@input' card.verification merge=true }}
</section>
 
{
  "card": {
    "number": {
      "class": "credit-card__number",
      "label": {
        "text": "Credit Card Number"
      },
      "field": {
        "class": "",
        "placeholder": ""
      }
    },
    "verification": {
      "class": "credit-card__verification",
      "label": {
        "text": "Card Verification Number"
      },
      "field": {
        "class": "",
        "placeholder": ""
      }
    },
    "date": {
      "month": {
        "class": "credit-card__select margin-right-s",
        "label": {
          "text": "Expiration Month"
        },
        "field": {
          "id": "expiration_month",
          "name": "expiration_month",
          "class": "credit-card__field",
          "attributes": ""
        }
      },
      "year": {
        "class": "credit-card__select",
        "label": {
          "text": "Expiration Year"
        },
        "field": {
          "id": "expiration_year",
          "name": "expiration_year",
          "class": "credit-card__field",
          "attributes": ""
        }
      }
    }
  }
}
  • Content: 
    .credit-card {
    &__date {
        display: flex;
        justify-content: space-between;
    }

    &__select {
        flex-grow: 1;
    }

    &__field {
        width: 100%;

        &.cvv {
            width: auto;
        }
    }
}
  • URL: /components/raw/credit-card/_credit-card.scss
  • Filesystem Path: build/components/Organisms/checkout/credit-card/_credit-card.scss
  • Size: 240 Bytes

There are no notes for this item.