Woocommerce教程：Stripe：样式化信用卡字段

WooCommerce 的 Stripe 支付网关使用 Stripe Elements 在您的结帐页面上显示信用卡字段。这使您可以通过根据您的主题和偏好设置信用卡字段的样式来灵活地自定义结帐体验。

所有字段都显示在 <iframe> 为客户提供安全体验的元素。因为 iframe 的内容在技术上不是页面的一部分，所以无法直接将样式应用于样式表中的那些组件，必须以其他方式完成。

条纹元素的样式尽可能少。

开箱即用，字段仅显示文本，仅此而已。这意味着所有其他样式都可以通过 CSS 立即访问，包括背景颜色、边框、填充、阴影等。

标准布局 ↑ 回到顶部

在正常模式下，您将为信用卡的每个详细信息提供三个单独的字段。

同时为所有字段设置样式

您可以使用 .wc-stripe-elements-field 选择器同时定位所有这些字段。例子：

.wc-stripe-elements-field {
    border-color: #999;
}

为单个字段设置样式

如果您需要将样式应用于单个字段，则可以使用其标识符：

场地	选择器
卡号	`#stripe-card-element`
到期日	`#stripe-exp-element`
卡码	`#stripe-cvc-element`

例子：

#stripe-card-element {
    margin-bottom: 1em;
}

内联信用卡表格 ↑ 回到顶部

如果您启用 内联信用卡表格 在 Stripe 设置中，所有信用卡字段将作为一个字段一起显示在您的页面上。在这种情况下，您只需要使用 .wc-stripe-elements-field 选择器以该字段的包装器为目标。

上面的 CSS 选择器允许您修改字段包装器的样式。但是，如果您还需要在实际输入中更改某些内容，则需要为 Stripe 提供必要的样式。

这可以使用 wc_stripe_elements_styling PHP 过滤器。

例子：

<?php
function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'iconColor'     => '#666EE8',
            'color'         => '#31325F',
            'fontSize'      => '15px',
            '::placeholder' => array(
                'color' => '#CFD7E0',
            ),
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

记住：

您在示例中看到的样式是扩展使用的默认样式。
一旦您提供自定义样式，扩展程序将忽略其默认样式。为避免这种情况，请复制示例并在此基础上进行构建。
所有样式都是通过 JavaScript 应用的，因此您需要使用 JavaScript 属性名称而不是纯 CSS。例如，而不是 font-size 你应该使用 fontSize.

要查看预期数组的描述，请转到：Stripe – Element Options。如该页面所述，您需要具有以下选项。

格式 ↑ 回到顶部

array(
    [state] => array(
        [property] => [value],
        [pseudoClass] => array(
            [property] => [value],
        ),
    ),
)

所有自定义样式都需要在嵌套数组中，包含：

状态为顶级项目
属性及其值作为二级项
特定状态的伪类作为二级项目，其属性作为三级项目

状态 ↑ 回到顶部

状态	描述
`base`	基本样式，所有其他变体都继承自此样式
`complete`	当元素具有有效输入时应用
`empty`	当元素没有客户输入时应用
`invalid`	当元素包含无效值时应用

允许的属性 ↑ 回到顶部

color, fontFamily, fontSize, fontSmoothing, fontStyle, fontVariant, fontWeight, iconColor, lineHeight, letterSpacing, textAlign, textDecoration, textShadow，和 textTransform

伪类 ↑ 回到顶部

hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled，和 ::-ms-clear

例子

function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'color' => '#666666',
            'fontSize' => '15px',
            '::placeholder' => array(
                'color' => '#999999',
            ),
        ),
        'invalid' => array(
            'color' => '#ff7500',
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

此示例更改：