| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var BRANDS = { |
| 5 |
visa: { label: 'Visa', bg: '#1434CB', color: '#fff', text: 'VISA', fontSize: 15, fontStyle: 'italic', fontFamily: 'Georgia, serif', fontWeight: '900' }, |
| 6 |
mastercard: { label: 'Mastercard', bg: '#252525', color: '#fff', text: 'MC', fontSize: 14, fontFamily: 'system-ui, sans-serif', fontWeight: '800' }, |
| 7 |
amex: { label: 'Amex', bg: '#007BC1', color: '#fff', text: 'AMEX', fontSize: 12, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 8 |
paypal: { label: 'PayPal', bg: '#003087', color: '#009cde', text: 'PayPal', fontSize: 11, fontFamily: 'system-ui, sans-serif', fontWeight: '800' }, |
| 9 |
applepay: { label: 'Apple Pay', bg: '#000000', color: '#fff', text: ' Pay', fontSize: 11, fontFamily: 'system-ui, sans-serif', fontWeight: '600', prefix: '\uD83C\uDF4E' }, |
| 10 |
googlepay: { label: 'Google Pay', bg: '#ffffff', color: '#1a73e8', text: 'G Pay', fontSize: 12, fontFamily: 'system-ui, sans-serif', fontWeight: '700', border: '#dadce0' }, |
| 11 |
discover: { label: 'Discover', bg: '#231F20', color: '#F76F20', text: 'DISCOVER', fontSize: 9, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 12 |
stripe: { label: 'Stripe', bg: '#635BFF', color: '#fff', text: 'stripe', fontSize: 12, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 13 |
klarna: { label: 'Klarna', bg: '#FFB3C7', color: '#17120f', text: 'klarna', fontSize: 11, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 14 |
afterpay: { label: 'Afterpay', bg: '#B2FCE4', color: '#000', text: 'afterpay', fontSize: 9, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 15 |
amazonpay: { label: 'Amazon Pay', bg: '#232F3E', color: '#FF9900', text: 'amazon\npay',fontSize: 9, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 16 |
venmo: { label: 'Venmo', bg: '#3D95CE', color: '#fff', text: 'venmo', fontSize: 11, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 17 |
maestro: { label: 'Maestro', bg: '#fff', color: '#333', text: 'maestro', fontSize: 10, fontFamily: 'system-ui, sans-serif', fontWeight: '600', border: '#ccc' }, |
| 18 |
bitcoin: { label: 'Bitcoin', bg: '#F7931A', color: '#fff', text: '\u20BF', fontSize: 20, fontFamily: 'system-ui, sans-serif', fontWeight: '700' }, |
| 19 |
shoppay: { label: 'Shop Pay', bg: '#5A31F4', color: '#fff', text: 'shop\npay', fontSize: 10, fontFamily: 'system-ui, sans-serif', fontWeight: '700' } |
| 20 |
}; |
| 21 |
|
| 22 |
var BADGE_ICONS = { ssl: '\uD83D\uDD12', pci: '\uD83D\uDEE1', '256bit': '\uD83D\uDD10', shield: '\u2713' }; |
| 23 |
|
| 24 |
function applyCSS(el, styles) { |
| 25 |
Object.keys(styles).forEach(function (k) { el.style[k] = styles[k]; }); |
| 26 |
} |
| 27 |
|
| 28 |
var _typoKeys = { |
| 29 |
family: '-ff', sizeDesktop: '-fs', sizeTablet: '-fs-tab', sizeMobile: '-fs-mob', |
| 30 |
weight: '-fw', style: '-fst', decoration: '-td', transform: '-tt', |
| 31 |
letterSpacing: '-ls', lineHeight: '-lh' |
| 32 |
}; |
| 33 |
function typoCssVarsForEl(el, obj, prefix) { |
| 34 |
if (!obj) return; |
| 35 |
Object.keys(_typoKeys).forEach(function (k) { |
| 36 |
var v = obj[k]; if (v === undefined || v === '') return; |
| 37 |
var u = (k === 'sizeDesktop' || k === 'sizeTablet' || k === 'sizeMobile') |
| 38 |
? (String(v).match(/[a-z%]/i) ? v : v + 'px') |
| 39 |
: (k === 'lineHeight' ? String(v) : v); |
| 40 |
el.style.setProperty(prefix + _typoKeys[k], u); |
| 41 |
}); |
| 42 |
} |
| 43 |
|
| 44 |
function makeIcon(brandId, size, radius, bgOverride, borderOverride) { |
| 45 |
var b = BRANDS[brandId]; |
| 46 |
if (!b) return null; |
| 47 |
|
| 48 |
var width = Math.round(size * 1.6); |
| 49 |
var div = document.createElement('div'); |
| 50 |
div.className = 'bkbg-pmth-icon'; |
| 51 |
applyCSS(div, { |
| 52 |
width: width + 'px', |
| 53 |
height: size + 'px', |
| 54 |
background: bgOverride || b.bg, |
| 55 |
borderRadius: radius + 'px', |
| 56 |
border: (borderOverride || b.border) ? '1px solid ' + (borderOverride || b.border) : 'none', |
| 57 |
flexDirection: 'column' |
| 58 |
}); |
| 59 |
|
| 60 |
var span = document.createElement('span'); |
| 61 |
span.className = 'bkbg-pmth-icon-text'; |
| 62 |
span.textContent = (b.prefix || '') + b.text; |
| 63 |
applyCSS(span, { |
| 64 |
color: b.color, |
| 65 |
fontSize: b.fontSize + 'px', |
| 66 |
fontWeight: b.fontWeight || '700', |
| 67 |
fontStyle: b.fontStyle || 'normal', |
| 68 |
fontFamily: b.fontFamily || 'system-ui, sans-serif', |
| 69 |
whiteSpace: 'pre', |
| 70 |
lineHeight: '1.1', |
| 71 |
textAlign: 'center' |
| 72 |
}); |
| 73 |
div.appendChild(span); |
| 74 |
return div; |
| 75 |
} |
| 76 |
|
| 77 |
function init() { |
| 78 |
document.querySelectorAll('.bkbg-pmth-app').forEach(function (appEl) { |
| 79 |
if (appEl.dataset.rendered) return; |
| 80 |
appEl.dataset.rendered = '1'; |
| 81 |
|
| 82 |
var opts; |
| 83 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 84 |
|
| 85 |
var o = Object.assign({ |
| 86 |
methods: [], |
| 87 |
securityBadges: [], |
| 88 |
layout: 'row', |
| 89 |
align: 'center', |
| 90 |
showLabels: false, |
| 91 |
showSecurityBadges: true, |
| 92 |
badgePosition: 'below', |
| 93 |
iconSize: 44, |
| 94 |
iconRadius: 8, |
| 95 |
iconGap: 10, |
| 96 |
badgeFontSize: 12, |
| 97 |
maxWidth: 0, |
| 98 |
paddingTop: 0, |
| 99 |
paddingBottom: 0, |
| 100 |
iconBg: '', |
| 101 |
iconBorder: '', |
| 102 |
labelColor: '', |
| 103 |
badgeColor: '', |
| 104 |
bgColor: '' |
| 105 |
}, opts); |
| 106 |
|
| 107 |
var alignClass = 'is-' + o.align; |
| 108 |
|
| 109 |
/* Outer wrap */ |
| 110 |
var wrap = document.createElement('div'); |
| 111 |
wrap.className = 'bkbg-pmth-wrap'; |
| 112 |
applyCSS(wrap, { |
| 113 |
paddingTop: o.paddingTop + 'px', |
| 114 |
paddingBottom: o.paddingBottom + 'px', |
| 115 |
background: o.bgColor || '' |
| 116 |
}); |
| 117 |
|
| 118 |
var inner = document.createElement('div'); |
| 119 |
inner.className = 'bkbg-pmth-inner' + (o.badgePosition === 'right' ? ' is-inline' : ''); |
| 120 |
|
| 121 |
/* Max width wrapper */ |
| 122 |
var maxWrap = inner; |
| 123 |
if (o.maxWidth > 0) { |
| 124 |
maxWrap = document.createElement('div'); |
| 125 |
maxWrap.style.maxWidth = o.maxWidth + 'px'; |
| 126 |
maxWrap.style.margin = '0 auto'; |
| 127 |
maxWrap.style.width = '100%'; |
| 128 |
wrap.appendChild(maxWrap); |
| 129 |
maxWrap.appendChild(inner); |
| 130 |
} else { |
| 131 |
wrap.appendChild(inner); |
| 132 |
} |
| 133 |
|
| 134 |
/* Icons row */ |
| 135 |
var iconsRow = document.createElement('div'); |
| 136 |
iconsRow.className = 'bkbg-pmth-icons ' + alignClass; |
| 137 |
iconsRow.style.gap = o.iconGap + 'px'; |
| 138 |
|
| 139 |
var enabled = (o.methods || []).filter(function (m) { return m.enabled; }); |
| 140 |
enabled.forEach(function (m) { |
| 141 |
var b = BRANDS[m.id]; |
| 142 |
if (!b) return; |
| 143 |
|
| 144 |
var iconWrap = document.createElement('div'); |
| 145 |
iconWrap.className = 'bkbg-pmth-icon-wrap'; |
| 146 |
|
| 147 |
var icon = makeIcon(m.id, o.iconSize, o.iconRadius, o.iconBg || '', o.iconBorder || ''); |
| 148 |
if (icon) iconWrap.appendChild(icon); |
| 149 |
|
| 150 |
if (o.showLabels) { |
| 151 |
var lbl = document.createElement('span'); |
| 152 |
lbl.className = 'bkbg-pmth-label'; |
| 153 |
lbl.textContent = b.label; |
| 154 |
applyCSS(lbl, { color: o.labelColor || '#6b7280', fontSize: '10px' }); |
| 155 |
iconWrap.appendChild(lbl); |
| 156 |
} |
| 157 |
|
| 158 |
iconsRow.appendChild(iconWrap); |
| 159 |
}); |
| 160 |
|
| 161 |
if (enabled.length === 0) { |
| 162 |
var empty = document.createElement('p'); |
| 163 |
empty.style.color = '#9ca3af'; |
| 164 |
empty.style.fontSize = '13px'; |
| 165 |
empty.textContent = 'No payment methods enabled.'; |
| 166 |
iconsRow.appendChild(empty); |
| 167 |
} |
| 168 |
|
| 169 |
inner.appendChild(iconsRow); |
| 170 |
|
| 171 |
/* Badges */ |
| 172 |
if (o.showSecurityBadges) { |
| 173 |
var enabledBadges = (o.securityBadges || []).filter(function (b) { return b.enabled; }); |
| 174 |
if (enabledBadges.length) { |
| 175 |
var badgesRow = document.createElement('div'); |
| 176 |
badgesRow.className = 'bkbg-pmth-badges ' + alignClass; |
| 177 |
|
| 178 |
enabledBadges.forEach(function (badge) { |
| 179 |
var bdg = document.createElement('div'); |
| 180 |
bdg.className = 'bkbg-pmth-badge'; |
| 181 |
|
| 182 |
var icon = document.createElement('span'); |
| 183 |
icon.className = 'bkbg-pmth-badge-icon'; |
| 184 |
icon.textContent = BADGE_ICONS[badge.id] || '\uD83D\uDD12'; |
| 185 |
// icon size inherits from .bkbg-pmth-badge |
| 186 |
|
| 187 |
var lbl = document.createElement('span'); |
| 188 |
lbl.textContent = badge.label || badge.id; |
| 189 |
applyCSS(lbl, { color: o.badgeColor || '#6b7280' }); |
| 190 |
|
| 191 |
bdg.appendChild(icon); |
| 192 |
bdg.appendChild(lbl); |
| 193 |
badgesRow.appendChild(bdg); |
| 194 |
}); |
| 195 |
|
| 196 |
inner.appendChild(badgesRow); |
| 197 |
} |
| 198 |
} |
| 199 |
|
| 200 |
typoCssVarsForEl(wrap, o.badgeTypo, '--bkbg-pmth-badge'); |
| 201 |
appEl.parentNode.insertBefore(wrap, appEl); |
| 202 |
appEl.style.display = 'none'; |
| 203 |
}); |
| 204 |
} |
| 205 |
|
| 206 |
if (document.readyState !== 'loading') { init(); } |
| 207 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 208 |
})(); |
| 209 |
|
