How to acquire a Widget Code from Paypal

Kg74
New Community Member

How do I obtain a Widget Code from Paypal

Login to Me Too
1 REPLY 1

JackieDaytona
Contributor
Contributor

Can you be a tiny bit more specific?  Are you using the SDK?  IF so which one (language).

The current Code to use is the PayPal REST API V2.  All others have been or are being phased out.

 

I HATE doing this to you but go here and read and if you still have issues - hit us up

 

https://developer.paypal.com/docs/business/accept-payments/

FYI : PayPal does not have widgets, they are called buttons..

 

To render a button you put the SDK script tag in your document header, in this one I am using the JavaScript SDK.

ie <script src="https://www.paypal.com/sdk/js?client-id=YOUR SECRET ID GOES HERE&disable-funding=credit,card"></script>

I am also using the SDK commands to disable in page credit card button from appearing with the PayPal Button (NOT the payment one in the window), using "disable-funding=credit,card"

 

Then in your form where you want the button to appear, you create a DIV like this 

                                    <div style="width:30%" id="paypal-button-container"><script src="js/checkout.js"></script></div>

then in your checkout.js script 

          


                      // Render the PayPal button into #paypal-button-container
                    // by David.<removed>- 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) {
                                 // show user messages here 

                                  $('#paypalmsg').hide();
                                  $('#transmsg').show();
                                   $('#transmsg').html('<b>'+'WAITING ON AUTHORIZATION...'+'</b>');
                                   $('#chkoutmsg').hide()
                                      return actions.order.create({
                                            purchase_units: [{
                                                   description: 'GnG Order', YOUR PRODUCT DESCRIPTION GOES HERE
                                                   amount: {
                                                        value: cartTotal  YOUR PRODUCT TOTAL GOES HERE
                                                   }
                                            }],
                                            application_context: {
                                                shipping_preference: 'NO_SHIPPING' SPECIFY 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>');
                                        // DO ANY FORM CLEAN UP HERE

                                      $('#transid').val(details.id);  STORE TRANS ID FOR USE IN EMAILS
                                       $('#orderstat').val('APPROVED');
                                       $('#orderform').submit(); SUBMIT AJAX FORM TO SELLER AND BUYER
                                     }
                                });

                               // HANDLE TRANSACTION ERROR DETAILS
                              if (details.error === 'INSTRUMENT_DECLINED') {

                                 // USER FORM MESSAGES
                                $('#transmsg').html('<b>' + 'TRANSACTION WAS DECLINED'+'</b>');
                                $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() {
                                $('#paypalmsg').show();
                                $('#chkoutmsg').show();
                                $('#transmsg').empty();
                              });

                                return actions.restart();
                         };
                      },

                    // IN CASE USER CANCELS

                      onCancel: function(data) {

                      // FORM ERROR MESSAGES
                         $('#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');  show the button in the div on the page

 

That's it a nutshell - anything fancy your on your own...

 

-D

 

 

Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.