Braintree PayPal 支付网关开发（二）

开发准备在上篇文章已经介绍 >>看这里 << 这篇文章说下Demo示例。

1. 开发流程图这里再贴一下（很重要）：
在这里插入图片描述
2. 前端页面
2.1 代码

<div class="wrapper"><div class="checkout container"><div style="text-align:center;"><span style="font-size:22px;">PayPal支付SandBox演示</span></div><br /><form id="payment-form" method="post" action="/PayPal/SendNonce" style="width: 500px; border: 2px solid black;margin-left: 31%; height: 350px;"><section style="text-align: center;" id="sectionID"><br /><br /><label for="amount"><span class="input-label" style="font-size: 16px;">Amount:</span><input id="amount" name="amount" type="tel" min="0.01" placeholder="Amount" value="0.01"></label></section><input id="nonce" name="payment_method_nonce" type="hidden" /><img style="margin-left: 33%; margin-top: 8%;" id="paypal-button" src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/34_Grey_CheckOut_Pill_Button.png"><div id="shippingID"><br /><span class="shipClass" style="font-size: 18px;font-weight: bold; margin-left: 35%;">Shipping   Address</span><br /><hr /><span class="shipClass" style="font-size: 16px;">FirstName:</span>&nbsp; <input name="" id="payerFirstName" /><br /><span class="shipClass" style="font-size: 16px;">LastName:</span>&nbsp;&nbsp; <input name="LastName" id="payerLastName"><br /><span class="shipClass" style="font-size: 16px;">Email:</span>&nbsp; <input name="Email" id="payerEmail"><br /><span class="shipClass" style="font-size: 16px;">City: </span>&nbsp;&nbsp;&nbsp;&nbsp; <input name="City" id="payerCity"><br /><span class="shipClass" style="font-size: 16px;">Line1:</span>&nbsp; <input name="Line1" id="payerLine1"><br /><span class="shipClass" style="font-size: 16px;">Line2:</span>&nbsp; <input name="Line2" id="payerLine2"><br /><span class="shipClass" style="font-size: 16px;">PostalCode:</span>&nbsp; <input name="PostalCode" id="payerPostalCode"><br /><br /><img style="margin-left: 34%;" id="btnSubimit" src="https://www.paypalobjects.com/digitalassets/c/website/marketing/apac/C2/logos-buttons/34_Grey_CheckOut_Pill_Button.png"></div></form></div>
</div><script src="~/Content/jquery-2.1.1.js"></script>
<script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.29.0/js/hosted-fields.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.29.0/js/paypal.js"></script>
<script src="https://js.braintreegateway.com/web/3.29.0/js/paypal-checkout.js"></script>
<script src="https://js.braintreegateway.com/web/3.29.0/js/three-d-secure.js"></script>
<script>$(document).ready(function () {$("#shippingID").hide();$("#btnSubimit").click(function () {$("#payment-form").submit();});//GET 请求去拿TOKEN$.get("/PayPal/GetPayPalClienToken", function (Data) {       $(function () {var client_token = Data;var paypalButton = document.querySelector('#paypal-button');var cardButton = document.querySelector('#card-button');braintree.client.create({authorization: client_token         //身份验证}, function (clientErr, clientInstance){  if (clientErr) {                          return;}//PayPal 支付braintree.paypal.create({client: clientInstance      //客户端实例}, function (paypalErr, paypalInstance) {if (paypalErr) {console.error('Error creating PayPal:', paypalErr);return;}paypalButton.removeAttribute('disabled');paypalButton.addEventListener('click', function (event) {    //支付按钮监听事件paypalInstance.tokenize({flow: 'checkout',amount: document.querySelector('#amount').value,currency: 'AUD'}, function (tokenizeErr, payload) {                     if (tokenizeErr) {if (tokenizeErr.type !== 'CUSTOMER') {console.log('Error tokenizing:', tokenizeErr);}return;}// Tokenization succeeded  document.querySelector('#nonce').value = payload.nonce;$("#paypal-button").hide();$("#sectionID").hide();$("#shippingID").show();$("#payerFirstName").val(payload.details.firstName);$("#payerLastName").val(payload.details.lastName);$("#payerLine1").val(payload.details.shippingAddress.line1);$("#payerLine2").val(payload.details.shippingAddress.line2);$("#payerEmail").val(payload.details.email);$("#payerCity").val(payload.details.shippingAddress.city);$("#payerPostalCode").val(payload.details.shippingAddress.postalCode);paypalButton.firstChild.innerHTML = "switch account";console.log('Paypal Got nonce:', payload.nonce);});}, false);});});});});});
</script>

在这里插入图片描述
2.2 选择PayPal支付后，JS提交支付信息给BratinTree服务器获取nonce及相关信息，页面如下：

2.3 JS中获取nonce及相关信息调试截图如下：

2.4 这里确认信息后选择PayPal支付，会转到后端去进行支付操作。

3. 后端
3.1 PayPalController

public class PayPalController : Controller{PayPalAPI payPalAPI = new PayPalAPI();public ActionResult Index(){return View();}//获取TOKENpublic string GetPayPalClienToken(){ViewBag.ClientToken = payPalAPI.GetPayPalClientToken();return payPalAPI.GetPayPalClientToken();}public string SendNonce(){decimal amount=0.0m;//获取收货地址信息ShippingAddress shippingAddress = new ShippingAddress();try{amount =Convert.ToDecimal(Request["amount"]);shippingAddress = new ShippingAddress {FirstName = Request["FirstName"],LastName= Request["LastName"],Email= Request["Email"],City= Request["City"],Line1= Request["Line1"],Line2= Request["Line2"],PostalCode= Request["PostalCode"]};}catch (FormatException e){               return e.Message;}//获取noncevar nonce = Request["payment_method_nonce"];return payPalAPI.SendNonce(amount, nonce, shippingAddress);}}

3.2 PayPalAPI

public class PayPalAPI{#region Filesprivate string Environment { get; set; }private string MerchantId { get; set; }private string PublicKey { get; set; }private string PrivateKey { get; set; }#endregion//Create Braintree Gateway Braintree网关初始化public BraintreeGateway CreateGateway(){Environment = System.Environment.GetEnvironmentVariable("BraintreeEnvironment");MerchantId = System.Environment.GetEnvironmentVariable("BraintreeMerchantId");PublicKey = System.Environment.GetEnvironmentVariable("BraintreePublicKey");PrivateKey = System.Environment.GetEnvironmentVariable("BraintreePrivateKey");if (MerchantId == null || PublicKey == null || PrivateKey == null){Environment = ConfigurationManager.AppSettings["BraintreeEnvironment"];MerchantId = ConfigurationManager.AppSettings["BraintreeMerchantId"];PublicKey = ConfigurationManager.AppSettings["BraintreePublicKey"];PrivateKey = ConfigurationManager.AppSettings["BraintreePrivateKey"];}return new BraintreeGateway(Environment, MerchantId, PublicKey, PrivateKey);}//Get PayPal TOKENpublic string GetPayPalClientToken(){BraintreeGateway gateway = CreateGateway();string ClientToken = gateway.ClientToken.Generate();return ClientToken;}//支付public string SendNonce(decimal amount, string nonce, ShippingAddress shippingAddress){BraintreeGateway gateway = CreateGateway();var request = new TransactionRequest{Amount = amount,PaymentMethodNonce = nonce,Options = new TransactionOptionsRequest{SubmitForSettlement = true},ShippingAddress = new AddressRequest{FirstName = shippingAddress.FirstName,LastName = shippingAddress.LastName,PostalCode= shippingAddress.PostalCode,StreetAddress= shippingAddress.Line1+ shippingAddress.Line2,}};//网关支付Result<Transaction> result = gateway.Transaction.Sale(request);//支付成功if (result.IsSuccess()){Transaction transaction = result.Target;}else if (result.Transaction != null){return "Transaction is null,Id=" + result.Transaction.Id;}else{string errorMessages = "";foreach (ValidationError error in result.Errors.DeepAll()){errorMessages += "Error: " + (int)error.Code + " - " + error.Message + "\n";}return errorMessages;}return "支付完成！";}}

4. 整体流程
在这里插入图片描述
5. Braintree sandbox中的交易记录：

6. 源码：https://github.com/wangqilong1225/BratinTree_PayPal_Demo