Web 站点接入 PayPal 支付

来源:简书 分类: 文章浏览史 发布时间:2020-08-14 08:31:18 最后更新:2020-08-14 浏览:51
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-14 08:31:18

官方教程:
PayPal Express Checkout

根据官方教程整理了一下具体步骤。


模板:


<!DOCTYPE html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

<body>
  <div id="paypal-button"></div>

  <script>
      paypal.Button.render({
          locale: 'zh_CN', // or en_US
          env: 'production', // or sandbox

          commit: true, // Show a 'Pay Now' button
          client: {
              sandbox:    '***',
              production: '***'
          },
          style: {
              size: 'small',
              color: 'silver',
              shape: 'pill',
              label: 'checkout',
              tagline: false
          },

          payment: function(data, actions) {
              return actions.payment.create({
                  payment: {
                      transactions: [
                          {
                              amount: { total: '填入金额', currency: 'USD' }
                          }
                      ]
                  }
              });
          },

          onAuthorize: function(data, actions) {
              return actions.payment.execute().then(function(payment) {
                  $.ajax({
                    type: 'POST',
                    url: '/',
                    data: {}
                  }).done(function (data) {
                      if (data == '0') {
                          alert('The payment is complete!');
                          window.location.reload();
                      }else {
                          alert('pay fail')
                      }
                  })
              });
          },

          onCancel: function(data, actions) {
              /*
               * Buyer cancelled the payment
               */
          },

          onError: function(err) {
              /*
              * An error occurred during the transaction
              */
          }
      }, '#paypal-button');
  </script>
</body>
1. 必须 js
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
2. 支付按钮

<div id="paypal-button"></div>paypal.Button.render绑定对应的id(也可以是class)。

3. render 参数

1)env: 运行环境
有两种:

类型 说明
sandbox 沙盒,用于测试,用添加的sandbox账号测试能否交易成功
production 生产环境,部署上线时使用的环境

2)locale: 语言版本
配套有多国语言,中文选用 zh_CN,美式英文选用 en_US

3)client: 客户端id
获取方式:登录 -> Applications -> 选择 REST API apps -> create App

create App

创建成功后,可以从创建的应用获取SandboxLiveclient ID,填入

client: {
    sandbox:    '',
    production: ''
},

4)style: 定义支付按钮样式,参考 Customize Checkout Button

5)触发函数:

函数 说明
payment 点击支付时触发,total填入需要支付的金额,currency填入支付的货币类型
onAuthorize 支付成功时触发,当支付成功时可以用Ajax提交数据修改订单支付状态为已支付。
onCancel 当用户关闭支付页面时触发
onError 当支付出错时触发
4. 创建沙盒账号用于测试

Sandbox accounts
创建两个账号,BUSSINESS 以及 PERSONAL。
创建完成后登录沙盒账号测试是否登录成功(红线按钮登录)

测试是否登录成功

5. 使用sandbox 账号测试支付

env环境为sandbox时,点击支付按钮时,使用PERSONAL账号来登录支付(测试账号默认有余额 $9999),当支付成功时会调用函数onAuthorize,可以弹窗alert('pay success')来测试是否支付成功。若成功,上线时将env转为production环境即可。

更多文章,博客站点

感觉有用的点个赞吧

php技术微信