为了账号安全,请及时绑定邮箱和手机立即绑定

具有服务器集成的 PayPal 客户端 JavaScript SDK - 设置付款金额

具有服务器集成的 PayPal 客户端 JavaScript SDK - 设置付款金额

绝地无双 2023-11-11 21:21:50
我正在尝试将客户端 PayPal JavaScript SDK 与 PayPal 服务器端 REST API 集成。我知道如何在客户端 JavaScript SDK 和服务器端 REST API 中创建新的 PayPal 订单。我已经成功地完成了这两件事。但问题是,无论我怎么做,都会有问题。如果我在服务器上创建新订单,但不在客户端代码中创建,则客户登录后显示的价格为 0.01 美分,而不是正确的价格,即使订单创建正确。我可以同时使用客户端createOrder方法和服务器端订单创建,但我担心它将创建两个订单,甚至可能捕获两次付款。我找不到集成服务器端订单创建并在用户登录后出现的 PayPal 对话框中设置价格的方法。在不使用客户端方法的情况下,如何在用户登录后显示产品价格createOrder?如果我在服务器上创建订单并将订单 ID 传递回客户端代码,则客户端 JavaScript API 会出现 3 个有关 PATCH 的错误。我不明白。我可以省略客户端createOrder方法,除了付款金额默认为 0.01 美分之外,一切正常。我不想那样。
查看完整描述

2 回答

?
尚方宝剑之说

TA贡献1788条经验 获得超4个赞

这是我的解决方案,使用客户端 PayPal Javascript SDK 和服务器端 PayPal API 接受买家付款。该服务器代码特定于Apps Script,来自客户端的服务器调用也特定于Apps Script。

注意:要“上线”,您必须:

服务器代码 - Apps 脚本

function payPalSettings_() {

  //see: 

  //https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#createorder

  return {

    intent:'CAPTURE',//The PayPal JavaScript SDK defaults to capture if not set 

    //but for purposes of explicitly making it clear what the code is doing -

    //it is being set here -

    //The Capture setting results in the capturing of funds immediately 

    //after the buyer approves the purchase -

    

    purchase_units:[

      {"custom_id":"abc123",//You can add a custom value to pass to PayPal

       "description":"Emails Director Gold",

       "amount":{

         "currency_code":"USD",

         "value":"2.95",

         }

      }

    ],

  }

}


function getCredentials_() {

  var CLIENT_Live,Paypal_Client_Test,PayPalSecret_Test,rtrnObj,SECRET_Live;

  

  rtrnObj = {};

  

  Paypal_Client_Test = 'abc123';//You must get this from your PayPal account

  PayPalSecret_Test = '321cba';

  

  //For testing comment out the live credentials

  //CLIENT_Live = 'put it here';//You must get this from your PayPal account

  //SECRET_Live = 'put it here';

  

  rtrnObj.client = CLIENT_Live ? CLIENT_Live : Paypal_Client_Test;//If the live credential is available then use it

  rtrnObj.secret = SECRET_Live ? SECRET_Live : PayPalSecret_Test;

  

  return rtrnObj;

}



/* This code is for making calls to PayPal from the SERVER 

   This server code must work together with the client side code 

*/


//To see the equivalent of this code go to:

//https://developer.paypal.com/docs/business/checkout/server-side-api-calls/create-order#1-add-server-code

//which is the Add Server Code section and show the JavaScript code



function captureThePayment(po) {

try{

  var accessTkn,capture,options,PayPal_Capture_API,rCode;

  /*

    po.orderId - the order ID

  */

  

  /*

    See documentation at:

    https://developer.paypal.com/docs/checkout/reference/server-integration/capture-transaction/

  

  */

  

  //Logger.log('po 61',po)

  

  accessTkn = getAuthTkn_();


  PayPal_Capture_API = 'https://api.sandbox.paypal.com/v2/checkout/orders/' + po.orderId + '/capture';

  //Logger.log('PayPal_Capture_API',PayPal_Capture_API)

  

  options = {};

  

  options.muteHttpExceptions = true;

  options.method = 'post';

  options.headers = {

    //"Accept":"application/json",

    "Authorization": "Bearer " + accessTkn

  }

  options.contentType = 'application/json';//This needs to be used or it doesnt work

  

  capture = UrlFetchApp.fetch(PayPal_Capture_API,options);//Call PayPal to capture the order

  //Logger.log('capture.getResponseCode() 77',capture.getResponseCode())

  //Logger.log('capture 85',capture)

  //Logger.log('capture.error',capture.error)


  rCode = capture.getResponseCode();

  

  if (rCode !== 200 && rCode !== 201) {

    

    //Logger.log('capture.getContentText',capture.getContentText)

    throw new Error("Error capturing the payment: " + rCode);

  }

  

  //Logger.log('capture.getContentText',capture.getContentText)

  

  /*

    There is no response - just a response code

    To get order detail another request must be made to PayPal

  */


  

  // Do your own custom processing


  return true;//The capture option doesnt return anything but a response code - it doesnt return order details -

  //to get order details you would need to use the base API url with just the order number on the end-

  //See https://developer.paypal.com/docs/checkout/reference/server-integration/get-transaction/


}catch(e){

  //Logger.log('message',e.message)

  //Logger.log('stack',e.stack)

}

}



function createA_PayPalOrder() {

try{

  var authTkn,options,order,paySets,payload,response;


  authTkn = getAuthTkn_();


  //2 Set up your server to receive a call from the client 


  PAYPAL_ORDER_API = 'https://api.sandbox.paypal.com/v2/checkout/orders/';//Must be changed for live mode

  

  // 3 Call PayPal to set up a transaction


  options = {};

  

  paySets = payPalSettings_();

  //console.log('paySets 121' + paySets)

  

  

  options.muteHttpExceptions = true;//

  options.method = 'post';

  options.headers = {

    "Accept":"application/json",

    "Authorization": "Bearer " + authTkn

  }

  options.contentType = 'application/json';

  options.payload = JSON.stringify(paySets);

  

  response = UrlFetchApp.fetch(PAYPAL_ORDER_API,options);//Call PayPal to set up a transaction

  //console.log('response.getResponseCode() 131' + response.getResponseCode())

  

  /*

    The response returned should look like:

    {"id":"abc123",

    "status":"CREATED",

    "links":[{"href":"https://api.sandbox.paypal.com/v2/checkout/orders/abc123",

    "rel":"self",

    "method":"GET"},

    {"href":"https://www.sandbox.paypal.com/checkoutnow?token=abc123",

    "rel":"approve",

    "method":"GET"},

    {"href":"https://api.sandbox.paypal.com/v2/checkout/orders/abc123",

    "rel":"update","method":"PATCH"},

    {"href":"https://api.sandbox.paypal.com/v2/checkout/orders/abc123/capture",

    "rel":"capture",

    "method":"POST"}]}

  

  */

  

  

  //4 Handle any errors from the call

  if (response.getResponseCode() !== 201) {

    //console.log('response.getContentText() 135' + response.getContentText())

    

    //console.log(response);

    return "error";

  }


  order = response.getContentText();

  //order = JSON.parse(order);

  

  //console.log('order.id 166' + order.id)

  //5 Return a successful response to the client

  return order;

}catch(e){

  //console.log('message' + e.message)

  //console.log('stack' + e.stack)

}

}



function getAuthTkn_() {

try{

  var auth,basicAuth,cacheService,creds,credentialClient,credentialSecret,keyConcat,options,payPalToken,PAYPAL_OAUTH_API,paySets,

      payload,response,tkn;


  /*Log into your developer dashboard: https://www.paypal.com/signin?returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications

    Note that the sandbox (for testing) and the live modes both have their own apps - So I would create different app names for

    each one -

    If you have not created an app then create an app

    If you need to create an app then you will need to generate the credentials

    If you already have an app and credentials then you can use those

    When getting your credentials the first thing you must do is choose either sandbox or live -

  */

  

  cacheService = CacheService.getDocumentCache();

  

  try{

    payPalToken = cacheService.get("authTkn");

  }catch(e){

  

  }

  

  if (payPalToken) {//There is already a PayPal auth token generated and in Cache

    return payPalToken;

  }

  

  creds = getCredentials_();

  

  credentialClient = creds.client;

  credentialSecret = creds.secret;

  

  PAYPAL_OAUTH_API = 'https://api.sandbox.paypal.com/v1/oauth2/token/';//1B Use the PayPal APIs which are called with the following URLs -


  keyConcat = credentialClient + ':' + credentialSecret;//concatenate the client and secret credentials

  

  basicAuth = Utilities.base64Encode(keyConcat);//Base 64 encode

  

  options = {};

  payload = {};


  payload.grant_type = "client_credentials";

  

  options.muteHttpExceptions = true;//

  options.method = 'post';

  options.headers = {

    "Accept":"application/json",

    "Authorization": "Basic " + basicAuth

  }

  options.payload = payload;

  

  response = UrlFetchApp.fetch(PAYPAL_OAUTH_API, options);//1C Get an access token from the PayPal API

  //Logger.log('response.getResponseCode() 80',response.getResponseCode())

  

  auth = response.getContentText();

  //Logger.log('auth 83',auth)

  

  /*

    The response returned should look like this:

    {"scope":"https://uri.paypal.com/services/invoicing 

      https://uri.paypal.com/services/disputes/read-buyer 

      https://uri.paypal.com/services/payments/realtimepayment 

      https://uri.paypal.com/services/disputes/update-seller 

      https://uri.paypal.com/services/payments/payment/authcapture openid 

      https://uri.paypal.com/services/disputes/read-seller 

      https://uri.paypal.com/services/payments/refund 

      https://api.paypal.com/v1/vault/credit-card https://api.paypal.com/v1/payments/.* 

      https://uri.paypal.com/payments/payouts https://api.paypal.com/v1/vault/credit-card/.* 

      https://uri.paypal.com/services/subscriptions 

      https://uri.paypal.com/services/applications/webhooks",

      "access_token":"abc123",

      "token_type":"Bearer",

      "app_id":"APP-abc123",

      "expires_in":32400,

      "nonce":"2020-12-09T01:07:abc123"}

  */

  

  if (!auth) {

    throw new Error("Authorization information not retrieved from PayPal");

  }


  auth = JSON.parse(auth);

  //Logger.log('auth',auth)

  //Logger.log('auth.access_token 90',auth.access_token)

  

  tkn  = auth.access_token;

  cacheService.put("authTkn", tkn, 180);//Save in cache for 3 minutes

  return tkn;


}catch(e){

  Logger.log('message',e.message)

  Logger.log('stack',e.stack)

  console.log(e)

}

}

客户端 HTML

<!-- This code uses the client side JavaScript PayPal SDK -->


<div style="text-align: center;">

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

</div>

客户端 JavaScript

<!--

  Required files:

  This code works together with the server code - 

  

  This PayPal payment system uses both the PayPal javascript SDK AND server side PayPal API calls -  

  This PayPal payment system uses Smart Payment Buttons - See: https://developer.paypal.com/docs/checkout/

  

  The two most important documentation links are:

  https://developer.paypal.com/docs/checkout/integrate/

  https://developer.paypal.com/docs/checkout/reference/server-integration/set-up-transaction/

  

  For configuration settings there is information at:

  https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/

  

  Note that this PayPal implementation does NOT require there to be a button definition in your PayPal settings -

  

  The PayPal JavaScript client side SDK is newer than the checkout.js

  See this Link: https://developer.paypal.com/docs/archive/checkout/how-to/server-integration/

  For an overview of the PayPal checkout with server integration -


  It is very important to understand the "sandbox" and the "production" settings -

  There are mutliple settings that must all be for either "sandbox" or "production"

  If you mix "sandbox" and "production" credentials and API links then your code will not work

  and the error messages may not help you to understand what the real problem is -

  

  Anything to do with "sandbox" is for testing purposes -

  "production" is for accepting live payments from customers -

  

  The terminology that PayPal uses for the credentials is:

  client id - The client side credential key

  secret - The server side credential key

  

  Credentials need to be in three different settings-

  1 - Client side script tag - client id

  2 - Server side variable - client id

  3 - Server side variable - secret

  

  To test your PayPal code you must do multiple things:

  1 - Create sandbox (test) client and secret credentials

  2 - use a special buyer PayPal account:

      https://developer.paypal.com/docs/checkout/integrate/

-->


<script src="https://www.paypal.com/sdk/js?client-id= YOUR CLIENT ID HERE - MAKE SURE IT MATCHES EITHER SANDBOX OR PRODUCTION &currency=USD"></script>


<script>               


window.payPalPaymentComplete = function(orderId) {


  showModalMessageBox("Payment is complete","COMPLETE!");

  

}


window.backToStartPay = function() {

  //Return to the dialog to buy something

  

}


function capture_the_order(po) {

  //Use the google.script.run API to call the server

  //This is specific to Google Apps Script

  return new Promise (function (resolve,reject) {

    google.script.run

      .withSuccessHandler (function (result) {

        //cl('result 62' + result)

        resolve (result);//What resolve does is return the result from the server back to the FIRST anonymous function in the "then" part

      })

      .withFailureHandler (function (error) {

        //cl('error 66' + error)

        reject (error);

      })

      .captureThePayment(po);//Call the server to create a PayPal order

    })

}



function iWillWaitForU() {

  //Use the google.script.run API to call the server

  //This is specific to Google Apps Script

  return new Promise (function (resolve,reject) {

    google.script.run

      .withSuccessHandler (function (result) {

        //cl('result 62' + result)

        resolve (result);//What resolve does is return the result from the server back to the FIRST anonymous function in the "then" part

      })

      .withFailureHandler (function (error) {

        //cl('error 66' + error)

        reject (error);

      })

      .createA_PayPalOrder();//Call the server to create a PayPal order

    })

}


function initPayPalButton() {

  /*

    This is a server side integration of the client side PayPal JavaScript SDK -

    The createOrder method makes a call to the PayPal API -

    The PayPal documentation uses the fetch() method but Apps Script uses google.script.run

    to make a server call so the PayPal example must be modified -

  */


  paypal.Buttons({

    style: {

      shape: 'rect',

      color: 'gold',

      layout: 'vertical',

      label: 'paypal',

    },

    

    createOrder : function() {

      //console.log('createOrder 93' + 'order')

      return iWillWaitForU()// Call the server code to complete the payment transaction

        //This both creates and executes the transaction

        .then(function(response) {

          //console.log('response 89' + response)

          return JSON.parse(response);

          //window.PayPalOrderId = orderInfo.id;

          //return orderInfo.id;

          },//THERE MUST BE A COMMA HERE!!!!  This is a list of functions seperated by a comma

          function (error) {//Because this is the second function this is what gets called for an error

            showModalMessageBox("There was an error in the PayPal button!","ERROR!");

            //console.log(error);

            return "Error";

        }).then(

           function(orderObj){

           //console.log('orderObj.orderID' + orderObj.id)

          return orderObj.id;

        });

    },

    

    onApprove: function() {

      //console.log('onapprove ran')

      startSpinner();

  

      backToStartPay();

     

      capture_the_order({"which":"capture","orderId":window.PayPalOrderId})

        .then(

  

        function(hadSuccess) {

          //cl('hadSuccess 89',hadSuccess)

          if (hadSuccess) {

            payPalPaymentComplete();

            //console.log('Transaction completed !');

            } else {

            showModalMessageBox("There was an error getting the payment!","ERROR!");

            //console.log(error);

            stopSpinner();

            }

          },//THERE MUST BE A COMMA HERE!!!!  This is a list of functions seperated by a comma

          function (error) {//Because this is the second function this is what gets called for an error

            showModalMessageBox("There was an error getting the payment!","ERROR!");

            //console.log(error);

            stopSpinner();

        })

    },



    onCancel: function (data, actions) {

      // Show a cancel page or return to cart

      showModalMessageBox('PayPal Session was cancelled',"CANCELLED!");

      backToStartPay();

    },

    

    onError: function(err) {

      showModalMessageBox("There was an error in the PayPal button!","ERROR!");

      //console.log(err);

    }

    

  }).render('#paypal-button-container');//Render the PayPal button into the html element with id #paypal-button-container - 

  //See HTML file - H_PayPal_New

  

}

initPayPalButton();



</script>



查看完整回答
反对 回复 2023-11-11
?
catspeake

TA贡献1111条经验 获得超0个赞

如果我在服务器上创建订单并将订单 ID 传递回客户端代码,则客户端 JavaScript API 会出现 3 个有关 PATCH 的错误。我不明白。

您需要提供有关此问题的更多详细信息,因为您似乎需要帮助。

此示例显示了调用服务器的正确方法:https ://developer.paypal.com/demo/checkout/#/pattern/server

必须完全避免使用actions.order.create()and 。.capture()


查看完整回答
反对 回复 2023-11-11
  • 2 回答
  • 0 关注
  • 62 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信