如何在vue.js项目中不依赖vue-paypal-checkout实现私人用户间PayPal交易

完全可以实现，你不需要引入任何第三方npm封装包，直接调用PayPal官方原生JS SDK即可完成两个绑定PayPal邮箱之间的直接转账，资金流转完全走PayPal通道，不需要经过你的业务服务中心化处理。

实现步骤 #

1. 引入PayPal官方JS SDK #

在你的Vue项目静态入口文件（通常是public/index.html）的head标签中插入SDK引入代码：

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID&currency=USD&intent=payment"></script>

将YOUR_PAYPAL_CLIENT_ID替换为你在PayPal开发者后台申请的客户端ID，currency参数可以根据你的业务需求修改为对应币种代码。

2. 封装Vue转账组件 #

直接在Vue单文件组件中调用全局挂载的paypal对象即可，不需要额外导入任何npm依赖：

<template>
  <div id="paypal-transfer-button"></div>
</template>

<script>
export default {
  name: 'PaypalTransfer',
  props: {
    // 收款方PayPal绑定邮箱
    payeeEmail: {
      type: String,
      required: true
    },
    // 转账金额
    amount: {
      type: Number,
      required: true
    }
  },
  mounted() {
    // 渲染PayPal转账按钮
    window.paypal.Buttons({
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: this.amount.toString()
            },
            // 指定收款方邮箱，实现点对点转账
            payee: {
              email_address: this.payeeEmail
            }
          }]
        })
      },
      onApprove: (data, actions) => {
        return actions.order.capture().then(details => {
          // 转账成功后的业务逻辑，比如提示用户、更新订单状态
          console.log('转账完成', details)
        })
      },
      onError: (err) => {
        // 转账异常处理逻辑
        console.error('转账出错', err)
      }
    }).render('#paypal-transfer-button')
  }
}
</script>

注意事项 #

• 前端传递的收款邮箱、转账金额建议先经过后端接口校验，避免前端参数被恶意篡改导致资金损失
• 上述前端回调仅代表用户操作完成，实际交易是否到账需要你在后端对接PayPal webhook做二次校验，校验通过后再更新你的业务状态
• 部分地区的PayPal个人账户可能不支持API发起P2P转账，建议先在PayPal沙箱环境完成全流程测试后再上线

内容的提问来源于stack exchange，提问作者el-stoega