How to integrate custom PayPal buttons?

First of all you'll have to add a PayPal button for each product you have on the page. To do so, please follow these steps.

  1. Login to your PayPal account.
  2. Go to ‘Profile’ tab.
  3. Select ‘My selling tools’ like in the example.
  4. Press the ‘create new button’ button like in the screenshot.
  5. Complete those 3 steps. Step 1, Step 2, Step 3 - just fill it so that it will cover your needs.
  6. Do the same thing for all your products.
  7. Later you'll need the PayPal's generated code, you can find it by clicking on the 'Action' button on the item, and later on the 'View code' button from the drop-down, please take a look at the screenshot.


Once that's done you'll have to make some JavaScript customizations, please follow these simple steps:

  1. Open the ‘js/products/views/modalView.js’ file and replace the button with the generated code by PayPal like shown in the screenshot.
  2. Open the ‘js/products/models/itemModel.js’ and add ne property ‘paypal’ as shown in the screenshot.
  3. Open the ‘js/products/categories/bags.js’ file and set the id of your button in there like shown in the screenshot. Do the same for all your products.


There is one more thing. Considering that we have all our products linked to the PayPal's API we don't need the native Triablo's 'add to cart' functionality. So in order to isolate your web app from the native API you’ll need to hide the ‘cart’ and ‘quick add to cart’ buttons.

How to hide the ‘cart’ button:
  1. Open your HTML file.
  2. Search for ‘shopping-cart’ and remove that block entirely, like shown in the screenshot.
How to hide the ‘quick add to cart’ button:
  1. Open the ‘js/products/views/itemView.js’ file.
  2. Search for ‘add-product-code’ and remove the block entirely, like shown in the screenshot.
That’s it, you shouldn’t meet any other API related actions.

Last update:
2015-07-25 21:51
Vlad Sargu
Average rating:0 (0 Votes)