woocommerce 的 Apple Pay 按钮样式答案

【问题标题】：Apple Pay button styling for woocommercewoocommerce 的 Apple Pay 按钮样式
【发布时间】：2020-09-29 18:20:24
【问题描述】：

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

<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;display:none;">
    <div id="wc-stripe-payment-request-button" " class="StripeElement">
        <!-- A Stripe Element will be inserted here. -->
    </div>
</div>

【问题讨论】：

看看这对你有没有帮助：webtoffee.com/customize-apple-pay-button-woocommerce-stripe祝你好运！
你好大卫，我在我的购物车页面上尝试了下面的代码，不幸的是它对我不起作用。 .woocommerce-cart button.apple-pay-button {border-radius:0px}。还是谢谢
您好 Manu，如果您对其他建议没有成功，您可以发布一个我们可以看到按钮的 URL 吗？然后更容易识别您需要的 CSS 选择器。谢谢！
你好大卫，很抱歉回复晚了。现在我不得不转移到另一项任务。但是当我回去解决这个问题时，我会告诉你。亲切的问候。

标签： html css woocommerce stripe-payments applepay

【解决方案1】：

尝试添加以下 CSS：

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

这是否提供了所需的外观？

【讨论】：

你好贾斯汀不幸的是它没有。似乎我找不到可以应用 CSS 代码的元素的名称......谢谢
哦，我意识到我在上面的 CSS 中犯了一个错误。 .wc-stripe-payment-request-button 应该是 #wc-stripe-payment-request-button。我已经编辑了答案；你可以试试修改后的版本，看看是否有效？
您好贾斯汀，抱歉回复晚了。我确实尝试过，但我无法让它工作。现在我已经放弃了，但是当我有更多时间时会回到这个任务，如果有任何相关的事情发生，我会告诉你。非常感谢您的帮助。

【解决方案2】：

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,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;
}

【讨论】：

感谢大家的帮助/cmets，对于迟到的回复感到抱歉。 @Josh，我试过你的代码，效果很好！问候马努
感谢您的回复，很高兴您能使用它！干杯！

【解决方案3】：

Apple 支付按钮的简单和最佳样式，可在所有布局（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>

【讨论】：