Alpaca components for Magento 2

Credit Card 

<section class="credit-card">
    <div class="input credit-card__number">
        <label class="
            label
            input__label
            
        " for="field-id">
            Credit Card Number
        </label>
        <input class="input__field " id="field-id" name="field-name" type="text" placeholder="">
    </div>

    <div class="credit-card__date">
        <div class="select credit-card__select margin-right-s">
            <label class="
            label
            
        " 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
            
        " 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
            
        " for="field-id">
            Card Verification Number
        </label>
        <input class="input__field " id="field-id" name="field-name" type="text" placeholder="">
    </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

No notes defined.