Drupal Commerce Custom Payment Methods Block

README.md

Code for use with the free Lovicons Payment Card Glyphs Icon Set

This icon set contains 18 free vector glyphs for most popular payment methods: Visa, Visa Electron, Western Union, 2CO, American Express and others.

Here is some HTML and CSS to use:

gistfile1.html

<!-- Paste into custom block content area -->

<div class="payment-methods">
  <span class="pay pay--2co"></span>
  <span class="pay pay--ach"></span>
  <span class="pay pay--american-express"></span>
  <span class="pay pay--cirrus"></span>
  <span class="pay pay--delta"></span>
  <span class="pay pay--diners-club"></span>
  <span class="pay pay--direct-debit"></span>
  <span class="pay pay--discover"></span>
  <span class="pay pay--jcb"></span>
  <span class="pay pay--maestro"></span>
  <span class="pay pay--mastercard"></span>
  <span class="pay pay--moneybookers"></span>
  <span class="pay pay--paypal"></span>
  <span class="pay pay--solo"></span>
  <span class="pay pay--switch"></span>
  <span class="pay pay--visa"></span>
  <span class="pay pay--visa-electron"></span>
  <span class="pay pay--western-union"></span>
</div>

gistfile2.scss

// Add to stylesheets

.payment-methods {
  text-align: center;
}
.pay {
  text-align: center;
  display: inline-block;
  width: 64px; height: 64px;
  margin: .5em;
  display: inline-block;
}
.pay--2co { background-image: url('../images/lovicons-payment-card-glyphs/64x64/2co-64.png'); }
.pay--ach { background-image: url('../images/lovicons-payment-card-glyphs/64x64/ach-64.png'); }
.pay--american-express { background-image: url('../images/lovicons-payment-card-glyphs/64x64/american-express-64.png'); }
.pay--cirrus { background-image: url('../images/lovicons-payment-card-glyphs/64x64/cirrus-64.png'); }
.pay--delta { background-image: url('../images/lovicons-payment-card-glyphs/64x64/delta-64.png'); }
.pay--diners-club { background-image: url('../images/lovicons-payment-card-glyphs/64x64/diners-club-64.png'); }
.pay--direct-debit { background-image: url('../images/lovicons-payment-card-glyphs/64x64/direct-debit-64.png'); }
.pay--discover { background-image: url('../images/lovicons-payment-card-glyphs/64x64/discover-64.png'); }
.pay--jcb { background-image: url('../images/lovicons-payment-card-glyphs/64x64/jcb-64.png'); }
.pay--maestro { background-image: url('../images/lovicons-payment-card-glyphs/64x64/maestro-64.png'); }
.pay--mastercard { background-image: url('../images/lovicons-payment-card-glyphs/64x64/mastercard-64.png'); }
.pay--moneybookers { background-image: url('../images/lovicons-payment-card-glyphs/64x64/moneybookers-64.png'); }
.pay--paypal { background-image: url('../images/lovicons-payment-card-glyphs/64x64/paypal-64.png'); }
.pay--solo { background-image: url('../images/lovicons-payment-card-glyphs/64x64/solo-64.png'); }
.pay--switch { background-image: url('../images/lovicons-payment-card-glyphs/64x64/switch-64.png'); }
.pay--visa { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-64.png'); }
.pay--visa-electron { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-electron-64.png'); }
.pay--western-union { background-image: url('../images/lovicons-payment-card-glyphs/64x64/western-union-64.png'); }