PayPal Community

immsvk · ‎Jan-28-2023

Hello i am try few hours to find solutions to display new smart button in html page, i am create button like i need when i paste my site css looks broken, i am looking here who is have similliar problem and i am found this but I dont know how to add my code from button and to configure implent to show. Here is post of that sollutions https://www.paypal-community.com/t5/Merchant-Products-and-Services/PayPal-Smart-button-stopped-worki...

I am copy this code and they show and all looks fine on my page only need to connfigure my button code but how ? Please help ?

Sorry for my language is very poor and i am working on this few hours 😞

MTS_Jennifer · ‎Jan-29-2023

Hello @immsvk ,

Thank you for posting to the PayPal Community.

Smart Payment buttons are JavaScript based, below is a basic button that is currently pointed to sandbox.

If you want to point it to live, you will need to replace the client-id=sb with your live or sandbox client id:

Please keep in mind that smart payment buttons are JavaScript based, and not HTML so if your web hosting company is blocking JavaScript, the button will not display:

<div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=EUR" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'blue',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"test item","amount":{"currency_code":"EUR","value":15}}]
          });
	
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';

            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

To get your Client ID:

Log into the developer dashboard at https://developer.paypal.com
Click on Apps & Credentials
Click on Live or Sandbox in the top right
Click on one of your Apps
Copy the client id and paste in place of the sb in client-id=sb (this is found in the script tag)

Thank you,

Jennifer

MTS

PayPal

View solution in original post

MTS_Jennifer · ‎Jan-29-2023