Alpaca components for Magento 2

Payment Methods 

<div id="payment" role="presentation" class="checkout-payment-method">
    <div class="items payment-methods">
        <div class="payment-group">
            <div class="payment-methods__heading" data-role="title">
                Payment Method
            </div>

            <div class="payment-method">
                <div class="payment-method-title">
                    <input type="radio" name="payment[method]" class="radio" id="braintree" value="braintree">
                    <label class="label" for="braintree">
                        <img class="payment-icon" src="/images/checkout/paypal-logo.png" />
                        <span>Credit Card (Braintree)</span>
                    </label>
                </div>

                <div class="payment-method-content">
                    content
                </div>
            </div>
            <div class="payment-method">
                <div class="payment-method-title">
                    <input type="radio" name="payment[method]" class="radio" id="checkmo" value="checkmo">
                    <label class="label" for="checkmo">
                        <span>Check / Money order</span>
                    </label>
                </div>

                <div class="payment-method-content">
                    content
                </div>
            </div>
            <div class="payment-method">
                <div class="payment-method-title">
                    <input type="radio" name="payment[method]" class="radio" id="cashondelivery" value="cashondelivery">
                    <label class="label" for="cashondelivery">
                        <span>Cash On Delivery</span>
                    </label>
                </div>

                <div class="payment-method-content">
                    content
                </div>
            </div>
            <div class="payment-method">
                <div class="payment-method-title">
                    <input type="radio" name="payment[method]" class="radio" id="banktransfer" value="banktransfer">
                    <label class="label" for="banktransfer">
                        <span>Bank Transfer Payment</span>
                    </label>
                </div>

                <div class="payment-method-content">
                    content
                </div>
            </div>
        </div>
    </div>
</div>
 
<div id="payment" role="presentation" class="checkout-payment-method">
    <div class="items payment-methods">
        <div class="payment-group">
            <div
                class="payment-methods__heading"
                data-role="title"
            >
                {{ heading }}
            </div>

            {{#each paymentMethods }}
                <div class="payment-method">
                    <div class="payment-method-title">
                        <input
                            type="radio"
                            name="payment[method]"
                            class="radio"
                            id="{{ id }}"
                            value="{{ id }}"
                        >
                        <label
                            class="label"
                            for="{{ id }}"
                        >
                            {{#if logo}}
                                <img
                                    class="payment-icon"
                                    src="{{ logo }}"
                                />
                            {{/if}}
                            <span>{{ label }}</span>
                        </label>
                    </div>

                    <div class="payment-method-content">
                        content
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div>
 
{
  "heading": "Payment Method",
  "paymentMethods": [
    {
      "label": "Credit Card (Braintree)",
      "id": "braintree",
      "logo": "/images/checkout/paypal-logo.png",
      "active": true
    },
    {
      "label": "Check / Money order",
      "id": "checkmo"
    },
    {
      "label": "Cash On Delivery",
      "id": "cashondelivery"
    },
    {
      "label": "Bank Transfer Payment",
      "id": "banktransfer"
    }
  ]
}
  • Content: 
    // Payment methods
$payment-methods__margin           : 0 #{-$spacer} $spacer--extra-large !default;
$payment-methods__margin\@medium   : 0 0 $spacer--extra-large !default;
$payment-methods__group-margin     : 0 !default;

// Payment method
$payemnt-method-content__padding   : 0 0 $spacer--semi-medium $spacer--semi-medium !default;
$payment-method__border            : $border-base !default;
$payment-method__border-width      : 0 0 1px 0 !default;

// Payment icon
$payment-icon__top                 : -6px !default;
$payment-icon__right               : 0 !default;
$payment-icon__width               : auto !default;
$payment-icon__height              : 35px !default;

// Radio inputs
$payment-method-title__radio-margin: 0 !default;
$payment-method-title__radio-label : $spacer--small 0 !default;
$payment-method-title__padding     : 1px 0 !default;

.payment-methods {
    margin: $payment-methods__margin;

    @include mq($screen-m) {
        margin: $payment-methods__margin\@medium;
    }

    &__heading {
        @include visually-hidden();
    }

    &__group {
        position: relative;
        margin: $payment-methods__group-margin;
    }

    // Preventing unuecessary template overwrite
    // Payment method - Extending radio inputs
    .payment-method-title {
        @extend .radio__handler;

        .radio {
            @extend .radio__field;
            margin: $payment-method-title__radio-margin;
        }

        .label {
            @extend .radio__label;
            margin: $payment-method-title__radio-label;
        }
    }

    // Payment method - Payment logo positioning
    .payment-icon {
        position: absolute;
        top: $payment-icon__top;
        right: $payment-icon__right;
        width: $payment-icon__width;
        height: $payment-icon__height;
    }

    // Payment method - Payment Item block
    .payment-method {
        border: $payment-method__border;
        border-width: $payment-method__border-width;
        padding: 0 $spacer--medium;

        &._active {
            .payment-method-content {
                display: block;
            }
        }

        &-content {
            display: none;
            padding: $payemnt-method-content__padding;
        }

        &-title {
            padding: $payment-method-title__padding;
        }
    }
}
  • URL: /components/raw/payment-methods/_payment-methods.scss
  • Filesystem Path: build/components/Organisms/checkout/payment-methods/_payment-methods.scss
  • Size: 2.3 KB

No notes defined.