uniapp|vue 中的 braintree 支付

nicepainkiller

1150人浏览 · 2021-04-14 09:54:38

nicepainkiller · 2021-04-14 09:54:38 发布

参考文档： Braintree-国外支付对接（一）

Braintree-国外支付对接（二）

Braintree-国外支付对接（三）

前面的两篇文章，有详细介绍了 Braintress 的账号创建；以及 SandBox 测试账号的详细流程；

我们这边项目刚好要用到 Braintree 支付；但是需要的是 自定义的 UI Customer UI；项目主体是 uniapp; (vue项目)

这边的服务器使用 .net core webapi 创建的；下载地址

这一步骤主要用户生成；调用 braintress 接口所需要的鉴权，以及收款账号信息 (因为测试原因这里面只包含生成签名的过程，验证回到地址等等都没有)

        [HttpPost]
        public IEnumerable<BraintreeResoult> GetPayment() {

            string merchantID = "jpqyrc3sfydkrc24";
            string publicKey = "3gyg7twhh2d5tw8f";
            string privateKey = "cef338b7d0a9addfb19cb0cf26679cd7";

            BraintreeGateway braintreeGateway = new BraintreeGateway(Braintree.Environment.SANDBOX, merchantID, publicKey, privateKey);
         
            string clientTokenM = braintreeGateway.ClientToken.Generate();
       


            BraintreeResoult resoult = new BraintreeResoult();
            resoult.clientToken = clientTokenM;
            resoult.payment = "xx00xx";
            yield return resoult;
        }

客户端这边使用的是 uniapp 开发的：也就是vue做的前端；工程下载地址

这个页面完全自定义 UI；本地引入 JSSDK；（UI 仅仅测试使用，有点丑）

支付方式有两种

card
paypal

******

有个地方需要注意：之前测试的时候一直报一个错误 message: "Credit card number is not an accepted test number."

后来一直不知道什么情况。但从字面看应该支付流程是跑通了，就是卡在信用卡这里；

后来在他们官网用官方提供的测试信用卡号果然可以跑通流程 one of our test card numbers (e.g. 4111111111111111) or a sandbox PayPal account.