Rest API - add Paypal Buttons and Checkout Flow

[chilluk7]

Hi

I am beginning an integration using the REST API as I need full control over the process. I assumed that I'd be coding everything server side, so I cannot see how I should be adding the Paypal button which essentially should just call my own code which will set up the order via the API and redirect to the Paypal URL?

Also I won't know the shipping value until I have the delivery address - can I go from my site, to Paypal, back to my site to display the shipping and then confirm the order after that? I have been trying to find some documentation on checkout flow but can't seem to find anything that explains it.

Many Thanks

[JackieDaytona]

Although I am not using Server side REST I am using it Local and here is the code that I use.

Server side should pretty much the same (with a few minor adjustments).  Also I use JQuery, so mod your code to what 

language you are using

      // Render the PayPal button into #paypal-button-container
       // by David . Nugent - Using PayPal REST V2 API Last update: 05/27/2020
       paypal.Buttons({

         style: {
              layout: 'horizontal',
              color: 'gold',
              shape: 'pill',
              label: 'checkout',
              size: 'responsive',
              tagline: 'true',
         },

       // Set up the transaction
       createOrder: function(data, actions) {
          $('#paypalmsg').hide();
          $('#transmsg').show();
          $('#transmsg').html('<b>'+'WAITING ON AUTHORIZATION...'+'</b>'); //used for when PP is slow on auths
          $('#chkoutmsg').hide()
         return actions.order.create({
              purchase_units: [{
                   description: 'GnG Order',
                   amount: {
                     value: cartTotal   //my Jquery Variable
                   }
                   }],
                    application_context: {
                    shipping_preference: 'NO_SHIPPING'
                  }

               });
            },
        // Finalize the transaction
          onApprove: function(data, actions) {
           return actions.order.capture().then(function(details) {
           // Show a success message to the buyer
          $('#transmsg').html('<b>' + 'AUTHORIZED...' + '</b>');
          $('#transmsg').append('<br>'+'Transaction completed by: ' + details.payer.name.given_name +' '+ details.payer.name.surname + '<br>' + "Order              Id: " + details.id + '<br>' + 'Status: PAID & APPROVED' + '<br>'+ 'Thank You For Your Order'+ '<br>');
          if (details.status === "COMPLETED") {
                     window.setTimeout(function() {}, 500)
                        $('#transmsg').append('<b>' + 'Sending Order...Please Wait' + '</b>'+'<br>');
                       $('#transid').val(details.id);
                       $('#orderstat').val('APPROVED');
                        $('#orderform').submit();
                     }
               });

              if (details.error === 'INSTRUMENT_DECLINED') {
                    $('#transmsg').html('<b>' + 'TRANSACTION WAS DECLINED'+'</b>');
                    $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() {
                    $('#paypalmsg').show();
                    $('#chkoutmsg').show();
                     $('#transmsg').empty();
                   });

                   return actions.restart();
                };
            },

              onCancel: function(data) {
                   $('#transmsg').html('<b>' + 'YOUR TRANSACTION WAS CANCELLED' + '</b>');
                    $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() {
                    $('#paypalmsg').show();
                     $('#chkoutmsg').show();
                     $('#transmsg').empty();
                  });
           }

          }).render('#paypal-button-container');

Hope that helps you out :).