PayPal Plus德国站集成：如何添加自定义货到付款支付选项

这个需求可实现。PayPal Plus 没有提供直接向内部iframe支付列表注入自定义支付方式的配置项，你当前采用自定义DOM拼接、样式对齐原生支付项的实现思路是可行的，只需要补全交互逻辑、修正硬编码定位的问题即可，不需要跨域操作iframe内部元素。

现有代码的问题 #

• 采用top: -29px硬偏移定位自定义支付项，当PayPal侧加载的支付方式数量变化（比如加载出信用卡、SEPA自动扣款、分期等选项）、不同设备下iframe高度变化时，会出现样式错位
• 缺少选中态互斥逻辑：点击自定义货到付款选项时，不会取消PayPal iframe内默认选中的支付项，点击结算按钮时会直接触发PayPal支付流程，无法走到货到付款的逻辑
• 对勾图标默认常显，不符合PayPal Plus原生交互逻辑（仅选中对应支付方式时才显示右侧勾选标记）

修正后的实现逻辑 #

• 去掉硬偏移定位，监听PayPal Plus加载完成事件，拿到iframe实际渲染高度后再对齐自定义选项位置，基础样式和原生支付项保持统一
• 配置PPP实例时传入onPaymentSelected回调，当用户选中PayPal自带的任意支付方式时，移除货到付款选项的选中态、隐藏对勾
• 给自定义货到付款项绑定点击事件，点击时调用PPP实例的deselectPaymentMethod方法清空PayPal侧的选中态，同时给当前项加选中样式、显示对勾
• 改造结算按钮逻辑：点击时先判断当前选中的是货到付款还是PayPal支付方式，选中货到付款时直接走自有订单创建逻辑，不要调用ppp.doContinue()；选中PayPal类支付方式时再调用原有PPP继续方法。

参考修正代码 #

<style>
.custom-payment {
  position: relative;
  background: white;
  color: black;
  padding: 13px 20px;
  border: 1px solid #e6e8eb;
  border-top: none;
  margin: 0;
}
.custom-payment:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}
.custom-payment .checkMark {
  background-image: url(https://www.paypalobjects.com/webstatic/ppplus/icons/checkmark.png);
  background-repeat: no-repeat;
  background-position: right center;
  height: 24px;
  width: 25px;
  display: none;
}
.custom-payment.selected .checkMark {
  display: block;
}
.custom-payment.selected {
  background-color: #f5f7fa;
}
</style>

<div class="container" style="max-width: 600px">
  <div id="ppplus"></div>
  <div class="custom-payment d-flex align-items-center justify-content-between" id="codPayment">
    <p class="m-0">Pay on arrival</p>
    <div class="checkMark"></div>
  </div>
  <button class="btn btn-secondary text-white w-100 mb-4" id="checkoutBtn">Checkout</button>
</div>

<script>
let isCodSelected = false;
const codEl = document.getElementById('codPayment');
const checkoutBtn = document.getElementById('checkoutBtn');

var ppp = PAYPAL.apps.PPP({
  "approvalUrl": "<?=$approval_url?>",
  "placeholder": "ppplus",
  "mode": "sandbox",
  "country": "DE",
  "buttonLocation": "outside",
  "preselection" : "paypal",
  "onLoad": function() {
    // 加载完成后可根据实际iframe渲染高度微调自定义选项边距，避免错位
  },
  "onPaymentSelected": function() {
    // 选中PayPal支付方式时，取消货到付款选中态
    isCodSelected = false;
    codEl.classList.remove('selected');
  }
});

// 货到付款项点击逻辑
codEl.addEventListener('click', function() {
  isCodSelected = true;
  codEl.classList.add('selected');
  // 清空PayPal侧的支付方式选中态
  ppp.deselectPaymentMethod();
});

// 结算按钮逻辑
checkoutBtn.addEventListener('click', function() {
  if (isCodSelected) {
    // 这里写入货到付款订单提交逻辑
    console.log('submit cash on delivery order');
    return;
  }
  // 走PayPal原有支付流程
  ppp.doContinue();
})
</script>

注意：不要尝试通过DOM操作跨域修改PayPal iframe内部的元素，会被浏览器跨域安全策略拦截，所有和PayPal侧的交互都使用官方PPP实例暴露的方法即可。

内容的提问来源于stack exchange，提问作者ferhado