适用于woocommerce的Apple Pay按钮样式

如何解决适用于woocommerce的Apple Pay按钮样式

我想自定义Woocommerce / Stripe随附的Apple-Pay按钮。默认情况下，按钮的边框半径为4px，我想更改为0px。另外，该按钮位于包装器内，我想将其padding-top更改为0px。我想知道是否可以通过CSS进行修改？以下是HTML源代码（非常感谢您提供有关进展的任何提示）。

using foo_t = void (*)();
foo_t foo_fp = nullptr;

void init(int ver)
{
std::string lib = "";
if (ver == 1) {
   lib = "wlib1.so";
} else {
   lib = "wlib2.so";
}

void* handle = dlopen(lib.c_str(),RTLD_LAZY);
foo_fp = reinterpret_cast<foo_t>(dlsym(handle,"foo_wrapper"));
}

/* use init(ver) before calling anything */
foo()
{
   foo_fp();
}

解决方法

尝试添加以下CSS：

#wc-stripe-payment-request-button {
  background-color: black;
  border: solid black 1px;
}

提供所需的外观吗？

似乎 Woocommerce 的 Stripe 通过来自 js.stripe.com 的 iframe 加载付款请求按钮……不幸的是，无法对来自不同域的 iframe 中的内容进行样式化。我阅读了关于 iframe 样式的 this page 以供参考。 woocommerce 提供的 #wc-stripe-payment-request-button 选择器是包含 iframe（付款请求按钮）的 DIV 的 ID。在下面找到我的伪元素解决方案：

编辑：这是我正在使用的。它包含我所有的样式，因此可以根据自己的喜好调整它们，但效果很好。如果您有任何问题，请告诉我。

注意：我的购物车背景为白色，我的付款按钮在 Woocommerce 设置中设置为 60 像素高度的深色样式。您可能需要添加媒体查询来调整您的主题断点，但它的响应速度相当快。如果您不想要带有“快速结账”的大纲，只需删除这段代码“#wc-stripe-payment-request-button::after{CSS styles}”。我想我会添加它以防万一有人有兴趣“复制”干杯。 Screen shot of the final product

#wc-stripe-payment-request-button-separator {font-size:80%; margin:10px 0px 8px 0px!important;
color:#bababa;
    padding:0px!important;
}
#wc-stripe-payment-request-button{outline: 3px solid #E6E6E6;outline-offset:18px;padding:1px 5px 0px 5px;transform:scale(.8);
}
#wc-stripe-payment-request-button::before {content:'';
width:99%;
    height:66px;
    position:absolute;
    z-index:999;
    bottom:-3px;
left: calc(50% - 49.5%);
    pointer-events: none;
    border:7px solid #fff;
    outline:4px solid #fff;
background:rgb(255,255,.6);
}

#wc-stripe-payment-request-button::after {content:'EXPRESS CHECKOUT';position:absolute;
    background:#fff;
    font-size:87%;
    color:#aaaaaa;
    font-family: 'Oswald',sans-serif !important;letter-spacing:.12em;
    display:block;
    left: calc(50% - 82px);
    font-weight:400;
    padding:0px 4px 0px 8px;
margin:-96px 0px 0px 0px;
}

苹果支付按钮的简单和最佳样式，可在所有布局（iPhone/MacBook）中完全调节。它目前在我的网站上运行。

这里是 CSS

#applePay {
    width: 100%;
    height: 50px;
    display: none;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-style: black;
    -apple-pay-button-type: book;
}

这是 HTML

 <div id="apple-pay-web">
   <div class="col-xl-12"><label>Pay With ApplePay</label></div>
   <div class="col-xl-12" style="text-align: center;padding: 0">
   <button type="button" id="applePay" lang="en"></button>
   <div id="got_notactive" class="alert alert-primary apw" role="alert"><?= Yii::t("app",'ApplePay is possible on this browser,but not currently activated') ?></div>
  <div id="notgot" class="alert alert-danger apw" role="alert"><?= Yii::t("app",'ApplePay is not available on this browser') ?></div>
  <div id="success" class="alert alert-success apw" role="alert"><?= Yii::t("app",'Test transaction completed,thanks') ?></div>
   </div>
 </div>