skip to Main Content

I am trying to integrate the client side PayPal JavaScript SDK with the PayPal server side REST API.
I know how to create a new PayPal order in both the client side JavaScript SDK and the server side REST API. I have successfully done both. But the problem is, that regardless of which way I do it, there is a problem. If I create a new order on the server, but not in the client code, then the price shown after the customer logs in, is 0.01 cent, instead of the correct price, even though the order was created correctly.

I could use BOTH the client side createOrder method AND the server side order creation, but my concern is that it will create two orders, and maybe even CAPTURE two payments.

I can’t find a way to integrate the server side order creation AND set the price in the PayPal dialog that appears after the user logs in.

How do I get the product price to show up after the user has logged in without using the client side createOrder method?

If I create an order on the server and pass the order ID back to the client code, the client side JavaScript API has 3 errors about PATCH. Which I do not understand.

I can leave out the client side createOrder method and everything works except that the payment amount defaults to 0.01 cent. I don’t want that.

Client code:

function thePromiseCode() {

  return new Promise (function (resolve,reject) {
    google.script.run
      .withSuccessHandler (function (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) {
        reject (error);
      })
      .createA_PayPalOrder();//Call the server to create a PayPal order
    })
}

function initPayPalButton() {  
  thePromiseCode()// Call the server code to create an order
    .then(
      function(response) {
        console.log('response 89: ' + response)
        var orderObj = JSON.parse(response);
        window.payPalOrderId = orderObj.id;
        console.log('payPalOrderId: ' + payPalOrderId)
      },
      function (error) {
        showModalMessageBox("There was an error in the PayPal button!","ERROR!");
        console.log(error);
        return "Error";
     }
    );
  

  paypal.Buttons({
    style: {
      shape: 'rect',
      color: 'gold',
      layout: 'vertical',
      label: 'paypal',
    },

    createOrder: function(data, actions) {
      // This fnc sets up the details of the transaction, including the amount
      return actions.order.create({
        purchase_units:[
          {"description":"My Product Name",
           "amount":{
             "currency_code":"USD",
             "value":"2.95",
             }
          }
        ]
      });
    },
  
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        payPalPaymentComplete();
        console.log('Transaction completed by '  + details.payer.name.given_name + '!');
      });
    },


    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');
  
}
initPayPalButton();


</script>

2

Answers


  1. Chosen as BEST ANSWER

    Here is my solution for using both the client side PayPal Javascript SDK and the server side PayPal API to accept a payment from the buyer. This server code is specific to Apps Script, and the server call from the client side is also specific to Apps Script.

    NOTE: To go "live" you must:

    Server Code - Apps Script

    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)
    }
    }
    

    Client Side HTML

    <!-- This code uses the client side JavaScript PayPal SDK -->
    
    <div style="text-align: center;">
      <div id="paypal-button-container"></div>
    </div>
    

    Client Side 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>
    

  2. If I create an order on the server and pass the order ID back to the client code, the client side JavaScript API has 3 errors about PATCH. Which I do not understand.

    You’ll need to provide more details about this issue as it seems this is what you need help with.

    The correct way to call your server is shown in this sample: https://developer.paypal.com/demo/checkout/#/pattern/server

    The use of actions.order.create() and .capture() must be completely avoided.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search