Blog

Learn how to integrate PayPal smart buttons in your shopify store step by step.

You will have to follow the steps to add the paypal smart buttons in your shopify store. In the video you will get the complete integration of paypal credit debit card buttons, which will help you to know where to place the specific code in the cart-template.liquid file if you will have to add smart buttons on cart page of the shopify store. If you are interested to add paypal smart buttons on product page of your shopify store then you need to follow this video which will help you with the complete integration of the smart buttons.

https://youtu.be/C2pa8HmK4ik

1. Add below script to the top of cart-template.liquid file.

<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script> 

2. Add below script to the end of HTML code of same file.

<script>
  var cart_data = {{ cart.items | json }};
  var custom_item = "";
    cart_data.forEach(function(entry) {
      custom_item = custom_item + "Item:" +  entry.product_title.slice(0, 28);
      custom_item = custom_item + "|Quantity:" + entry.quantity;
      custom_item = custom_item + "|Variant:" + entry.variant_title + "|";
    });
  // Render the PayPal button into #paypal-button-container
  paypal.Buttons({
    // Set up the transaction
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: {{ cart.total_price | divided_by: 100.00 }}
          },
            description: custom_item
        }]
      });
    },
    // Finalize the transaction
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        // Show a success message to the buyer
        alert('Transaction completed by ' + details.payer.name.given_name + '!');
      });
    }
  }).render('#paypal-button-container');
</script> 

3. Add below div tag above checkout button.

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

4. Style Your Buttons

<style>
  #paypal-button-container {
    width: 250px;
    display: inline-flex;
    margin-top: 10px;
  }
  button[name=checkout] {
    display: none;
  }
  /* Media query for desktop viewport */
  @media screen and (max-width: 749px) {
      #paypal-button-container {
          width: 80%;
      }
  }
</style> 

5. Replace your client ID

Replace “sb” from step 1 code with the live client ID of your paypal account. Check this video How to find client ID of PayPal account.


Hire Me

Try Shopify free for 14 days

Start free trial