PayPal Plus iframe自定义CSS传参失效，如何设置标签为白色

问题排查与修复方案 #

错误1：配置语法冗余

你在PPP初始化配置的最后一项"css": styles,后多写了一个逗号，部分低版本JS解析环境会将其识别为语法错误，首先删除该冗余逗号。

错误2：样式类名不符合官方规则

你使用的pppLabel、pppCheckboxLabel不是PayPal Plus开放的可自定义样式类名，对应标签文字、复选框标签的官方可配置类名分别为label、checkboxLabel，无需加ppp前缀。

错误3：css参数格式不对

PayPal Plus要求css参数传入序列化后的合法JSON字符串，你之前要么直接传了JS对象，要么给序列化后的字符串额外套了一层引号，都会导致参数解析失败。

修复后的完整代码

<script type="application/javascript">
var styles = {
    "label": {
        "color": "#fff"
    },
    "checkboxLabel": {
        "color": "#fff"
    }
};

var ppp = PAYPAL.apps.PPP({
    "approvalUrl": "<?=$approvalUrl?>",
    "placeholder": "ppplusDiv",
    "payerEmail": "<?=$_POST['email']?>",
    "payerFirstName": "<?=$_POST['name']?>",
    "payerLastName": "<?=$_POST['surnamename']?>",
    "payerPhone": "<?=$_POST['telephone']?>",
    "payerTaxId": "<?=$_POST['cpf']?>",
    "miniBrowser":false,
    "merchantInstallmentSelection":12,
    "merchantInstallmentSelectionOptional":true,
    "mode": "live",
    "payerTaxIdType": "BR_CPF",
    "language": "pt_BR",
    "country": "BR",
    "css": JSON.stringify(styles)
});
</script>

额外排查项

如果修改后样式仍不生效，可确认两点：

• 你的商户账号是否开通了自定义样式权限，部分地区的测试账号默认不开放该功能
• 不要尝试通过外部页面的CSS修改iframe内样式，跨域限制下该操作不生效，所有自定义样式必须通过官方提供的css参数传入

内容的提问来源于stack exchange，提问作者Shahab Wali Khan