Braintree PayPal 支付网关开发(二)_小龙人的博客

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(); //获取TOKEN public string GetPayPalClienToken() ViewBag.ClientToken payPalAPI.GetPayPalClientToken(); return payPalAPI.GetPayPalClientToken(); public string SendNonce() decimal amount 0.0m; //获取收货地址信息 ShippingAddress shippingAddress new ShippingAddress(); 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; //获取nonce var nonce Request[ payment_method_nonce  return payPalAPI.SendNonce(amount, nonce, shippingAddress);

        3.2 PayPalAPI

public class PayPalAPI #region Files private 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 TOKEN public 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