css - 如何在反应（或任何东西）中设置 PayPal 信用卡输入框的样式？

问题描述

我没有运气弄清楚如何为借记卡/信用卡付款设置 PayPal 输入框的样式。与创建弹出窗口的 paypal 按钮不同，当您单击借记卡选项时，输入框内嵌显示。输入框的默认样式搞砸了我的设计，我想让它们更小，以便更好地适应页面（我读到你不能像 paypal 选项那样让它们成为弹出窗口。这是一张图片：

从贝宝文档中，听起来我应该能够使用输入框 id 直接从我自己的样式表中设置输入框的样式：

"更改卡片字段的布局、宽度、高度和外部样式（例如，边框、框阴影、背景）。您可以修改作为容器提供的元素（例如；#card-number {border: 1px solid #333; }) 与您当前的样式表。

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

我正在使用反应，我尝试在我的样式表中修改#card-number，但我添加的任何内容都不会更改输入框（字体大小/高度/背景颜色）。我还将按钮渲染到一个名为#paypalBtns 的div，我也尝试通过该div 设置输入框的样式，但没有任何效果（例如#paypalBtns * {font-size: xx}）。有没有人成功地设计了这些输入？

这是我呈现贝宝按钮的代码：

window.paypal
          .Buttons({
            createOrder: (data, actions) => {
              return actions.order.create({
                purchase_units: [
                  {
                    amount: {
                      value: braceletTotal()
                    }
                  }
                ],
                application_context: {
                  shipping_preference: "NO_SHIPPING",
                },
              })
            },
            onApprove: async (data, actions) => {
              setPaymentLoading('visible')
              const order = await actions.order.capture();
              const paypalTotal = order.purchase_units[0].amount
              processOrder(paypalTotal, customer)
            },
          })
          .render('#paypalBtns')

编辑

网页html图片：

标签： cssreactjspaypal

正如我在评论中提到的，您可以按照此处的建议使用 Javascript 操作 iframe 数据：如何将 CSS 应用于 iframe？.

您可以尝试添加新的内联样式标签或用 Javascript 替换现有的标签，其中 Paypal 使用内联 css 标签，但很难定位正确的 html 标签。在 Paypal 使用 css 类的地方，您可以尝试在您自己的样式表中的每个 css 属性上使用 !important 标志来覆盖它们，但是您必须在 Paypal 的样式之后（但在整个 iframe 呈现之前）加载这些样式，所以这也必须注入JS，否则不起作用。

另外：是否根据 Paypal 的条款操纵 css 样式？我会说这很可能。操纵这种形式是否有利于转换？您的最终用户可能信任 Paypal，但他们会信任一个说它是 Paypal 但看起来不像的表单吗？

css - 如何在反应（或任何东西）中设置 PayPal 信用卡输入框的样式？

问题描述

解决方案

推荐阅读