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

Posted 2023-02-22

【中文标题】如何在反应（或任何东西）中设置 PayPal 信用卡输入框的样式？

【英文标题】：How can I style PayPal credit card input boxes in react (or anything)?

【发布时间】：2020-12-29 13:06:19

【问题描述】：

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

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

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

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

我正在使用 react，我尝试在样式表中修改#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 的图片：

【问题讨论】：

为了帮助您，我们需要在您的屏幕截图中查看页面的 html 源（输出）。不过，Paypal 很可能不希望您更改其 CSS 布局，以避免混淆支付页面是否是假的。

ok 已经添加了 html

谢谢。正如我们现在看到的那样，表单位于 iframe 中，来自外部服务器，您会遇到将 CSS 样式附加到它的问题。由于跨域限制以及 Paypal 可能会混淆 iframe 内容以使其更难操作，这可能是不可能的。但是您可以按照此处的建议使用 Javascript 进行操作：***.com/questions/217776/how-to-apply-css-to-iframe

【参考方案1】：

正如我在评论中提到的，您可以按照此处的建议使用 Javascript 处理 iframe 数据：How to apply CSS to iframe?。

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

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

【讨论】：

感谢您的帮助。我看了你链接的另一个线程，但它可能对我来说有点复杂，就像你说的那样，我不知道贝宝会如何。我想要设置按钮样式的原因是因为我的网站设置为 100vh 的高度并隐藏了溢出-y，所以当我打开信用卡支付选项时，它会完全破坏格式，有时字段不可见/不可访问。所以现在我在想也许将贝宝按钮放在可以滚动的嵌入式 div 中会更容易

是的，如果您不愿意让 iframe 随内容自动扩展，这听起来像是一种方法。您还可以考虑将 paypal 表单放在具有固定大小的弹出窗口中，然后让该内容滚动而不是使您的主页滚动的一部分，这会扰乱您的无滚动范例:)。祝你好运！