利用国外paypal+braintree支付笔记

最近项目涉及海外市场,支付首选paypal  但要做移动端支付,必须用其旗下收购的braintreeSDK,  因为没接过国外的支付渠道,摸索了两天,发现国外的支付像paypal  stripe  braintree  很多流程方式和国内第三方支付还是有所区别。这里简单做个笔记:

首先进入paypal开发者官网:https://developer.paypal.com/

PayPal Mobile SDKs

Important: PayPal Mobile SDKs are now Deprecated and only existing integrations are supported. For all new integrations, use Braintree Direct or Express Checkout.

paypal 移动端sdk已经废弃了,所以我们要使用Braintree 

1 交互逻辑介绍

Overview of Client / Server interaction

  1. 您的客户端app或Web前端会从您的服务器请求客户端令牌以初始化客户端SDK
  2. 您的服务器使用服务器SDK 生成客户令牌并将其发送回客户端
  3. 客户端SDK初始化并且客户提交了付款信息后,SDK会将该信息传达给Braintree,后者将返回付款方式现时
  4. 然后,您将付款方式随机数发送到您的服务器
  5. 您的服务器代码从客户端收到付款方式临时值,然后使用服务器SDK 创建交易或执行其他功能。

1.客户端配置以及相关执行操作的代码如下

这儿用javascriptSDK演示

第一步后端获取clientToken

$gateway = \Omnipay::gateway('braintree');  //这里用的laravel集成包,所有的merchantid,publickey,...都在配置文件中
if (request()->method() == 'GET') {
    $token = $gateway->clientToken()->send()->getToken();
    return view('pay.btaintree',['token'=>$token]);
}
将获取的$token 放入前端jsSDK代码中进请求
<!DOCTYPE html>
<html lang="en">
<body>
<div id="paypal-button"></div>
<!-- Load PayPal's checkout.js Library. -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>
<!-- Load the client component. -->
<script src="https://js.braintreegateway.com/web/3.33.0/js/client.min.js"></script>
<!-- Load the PayPal Checkout component. -->
<script src="https://js.braintreegateway.com/web/3.33.0/js/paypal-checkout.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    // Create a client.
    braintree.client.create({
        authorization: '{{$token}}'   //这个第一步后端获取的$token 
    }).then(function (clientInstance) {
        // Create a PayPal Checkout component.
        return braintree.paypalCheckout.create({
            client: clientInstance
        });
    }).then(function (paypalCheckoutInstance) {
        // Set up PayPal with the checkout.js library
        return paypal.Button.render({
            env: 'sandbox', // or 'sandbox' or 'production' 确定是沙盒模式还是生产模式
            payment: function () {
                return paypalCheckoutInstance.createPayment({
                    // Your PayPal options here. For available options, see  这个地方是参数,添加对应的参数数据详情介绍访问下面链接
                    // http://braintree.github.io/braintree-web/current/PayPalCheckout.html#createPayment
                    flow: 'checkout',
                    amount: '10.00',
                    currency: 'USD',
                    intent: 'sale'
                });
            },

            onAuthorize: function (data, actions) {
                return paypalCheckoutInstance.tokenizePayment(data)
                    .then(function (payload) {
                        // Submit `payload.nonce` to your server.
                        console.log(payload);
                        console.log(data);
//自定义将支付数据发送到服务器数据
                        axios.post('/api/pay/braintree/payment', {
                            params:payload,
                        }) .then(function (response) {
                            console.log(response);
                        }).catch(function(thrown) {
                            if (axios.isCancel(thrown)) {
                                console.log('Request canceled', thrown.message);
                            } else {
                                // 处理错误
                            }
                        });
                    });
            },

            onCancel: function (data) {
                console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
            },

            onError: function (err) {
                console.error('checkout.js error', err);
            }
        }, '#paypal-button');
    }).then(function () {
        // The PayPal button will be rendered in an html element with the id
        // `paypal-button`. This function will be called when the PayPal button
        // is set up and ready to be used.
    }).catch(function (err) {
        // Handle component creation error
    });

</script>

</body>
</html>

 

 

服务器代码:

 

 $gateway = \Omnipay::gateway('braintree');
    $params = request()->get('params');
    Log::info('$params',[$params,__METHOD__]);
    $nonce = $params['nonce'];
    $response = $gateway->purchase([
        'amount' => '10.00',
        'token' => $nonce
    ])->send();
    if ($response->isSuccessful()) {

        // Payment was successful

        print_r($response);

    } elseif ($response->isRedirect()) {

        // Redirect to offsite payment gateway
        return $response->redirect();

    } else {

        // Payment failed
        echo $response->getMessage();
    }
    return $response->getMessage();
}

相关网址: