在 PayPal Advanced Checkout 中设置卡字段文本框的样式

Question

我正在集成 PayPal 高级结帐。 PayPal 让我们相信我们可以使卡字段文本框看起来与我们网站上的文本框相同，但它们允许的 CSS 非常有限。请参阅下面的集成文档。

https://developer.paypal.com/docs/checkout/advanced/customize/card-field-style/

我找不到使用简单 CSS 样式（如背景和边框等）的方法。

如果有人之前集成过 PayPal Advanced Checkout，请告诉我是否有办法实现我想要做的事情。

谢谢

Answer 1

我们也遇到了同样的问题，但最终找到了合适的解决方案。以下是我们现有字段如何与 PayPal 高级结帐的 cardField 组件结合使用的样式示例：

所提供的样式选项的基础知识：

const cardStyle = {
  'input': {
    'font-family': 'Arial',
    'font-size': '14px',
    'line-height': '1',
    'padding': '6px 8px',
  },
  '.invalid': {
    'color': 'purple',
  },
};

容器：

<div id="card-form" class="card_container">
  <div id="card-number-container"></div>
  <div id="card-expiry-container"></div>
  <div id="card-cvv-container"></div>
  <button id="card-submit-button" type="button">
    Pay now by Card
    <i class="fad fa-credit-card-front fa-2x"></i>
  </button>
</div>

容器的 CSS：

#card-number-field-container { width: 354px; height: 40px; }
#card-expiry-field-container { float: left; width: 170px; height: 40px; }
#card-cvv-field-container { float: right; width: 170px; height: 40px; margin-right: 6px; }

OP 提供的 PayPal 文档中的声明表明大部分样式应用于容器，而不是样式元素中：

更改卡片的布局、宽度、高度和外部样式 字段。使用当前的容器修改您提供的元素 样式表。例如输入：{ border: 1pxsolid #333; }.

此附加 PayPal 文档参考

https://developer.paypal.com/docs/multiparty/checkout/advanced/customize/style-card-fields/

包括有关显式高度的附加注释[和宽度也相关]：

通常，输入元素根据字体大小计算其高度并 行高（以及一些其他属性），但高级信用和 借记卡支付需要明确配置高度。制作 确保在样式表中设置容器的高度。这 字段组件的文本是用 JavaScript 配置的。

字体大小、行高和内边距与容器高度有关，如果字段渲染时没有获得所需的高度，则可能需要调整这些设置以使字段适合指定的容器。

注意：当页面加载时呈现按钮时，会出现一些难看的活动。我们应用了不透明度并过渡到带有加载图像和超时的支付容器：

[CSS]

#payBox {   opacity: 0;   transition: opacity 1s; }

[jQuery]

setTimeout(function() {
  $('#loading').hide();
  $('#payBox').css('opacity', '1');
},700);