概述

在Oceanpayment支付页面中，您可以自定义页面的样式。

支持集成

以下两种集成方式可以支持自定义页面样式：

• 托管结账
• 嵌入式

自定义方式

• 通过支付请求传参cssUrl修改Oceanpayment支付页面css样式。
• cssUrl传值为css样式文件在线链接，需公网能访问，且需要https协议开头。

样式参考

在您的css链接中，可以参考写入以下属性来自定义页面样式：

css样式	说明	参考属性
.field__input	卡信息填写框	border border-radius background-color color font-size
.confirm	支付确认按钮	border border-radius background-color color font-size
.cancel	支付取消按钮	display border border-radius background-color color font-size

托管结账

信用卡

• 支付页面默认效果图

• 传入cssUrl效果图

Oceanpayment自动重定向

<input type="hidden" name="cssUrl" value="https://www.oceanpayment.com.cn/wp-content/themes/oceanpayment/css/style-red.css" />

嵌入式

• 支付页面默认效果图

• 传入cssUrl效果图

信用卡

<script>
  $(function() {
      Oceanpayment.init(' ','https://www.oceanpayment.com.cn/wp-content/themes/oceanpayment/css/style-black.css','');
  });
</script>

GooglePay

GooglePay支付按钮样式参考：https://developers.google.com/pay/api/web/guides/resources/customize?hl=zh-CN

<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageGooglePay.init(true, {
            buttonStyle: {
                buttonColor:'',/*按钮颜色*/
                buttonType:'',/*按钮类型*/
                buttonRadius:'',/*圆角*/
                buttonSizeMode:'',/*尺寸样式*/
                buttonLocale:''/*按钮语言*/
            }
        });
  });
</script>

ApplePay

ApplePay支付按钮样式参考：https://developer.apple.com/documentation/apple_pay_on_the_web/applepaybutton

<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageApplePay.init(true, {
            buttonStyle: {
                buttonstyle:'', /*按钮颜色*/
                type:'' /*按钮类型*/
            }
        });
   });
</script>