Stripe payments 如何更改条纹图标位置？

我所拥有的：

我想做的是：

我正在使用以下选项：

this.stripeElements.cardNumber = this.$stripe.elements.create('cardNumber', {
  showIcon: true,
  iconStyle: 'solid',
  style: {
    base: {
      fontFamily: '\'DM Sans\', sans-serif',
      fontSize: '14px',
      color: '#666573',
      '::placeholder': {
        color: '#9E9CAD',
        fontWeight: 'normal'
      },
    }
  }
});

---

i位置：'right'

不起作用。是否有任何选项可以执行此操作？

我不认为您可以使用字段内的图标执行此操作，但您可以单独执行。您可以找到这样一个示例（但有关所有详细信息，请参见JSFIDLE）：

var cardBrandToPfClass = {
    'visa': 'pf-visa',
  'mastercard': 'pf-mastercard',
  'amex': 'pf-american-express',
  'discover': 'pf-discover',
  'diners': 'pf-diners',
  'jcb': 'pf-jcb',
  'unknown': 'pf-credit-card',
}

function setBrandIcon(brand) {
    var brandIconElement = document.getElementById('brand-icon');
  var pfClass = 'pf-credit-card';
  if (brand in cardBrandToPfClass) {
    pfClass = cardBrandToPfClass[brand];
  }
  for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
    brandIconElement.classList.remove(brandIconElement.classList[i]);
  }
  brandIconElement.classList.add('pf');
  brandIconElement.classList.add(pfClass);
}

cardNumberElement.on('change', function(event) {
    // Switch brand logo
    if (event.brand) {
    setBrandIcon(event.brand);
  }

    setOutcome(event);
});