How to Embed a PayPal Button in Your Drupal 8 Site

There are cases, in which you do not need full e-commerce functionality (like Drupal Commerce) in your Drupal site, because you only sell a few products and the implementation of such a solution is financially and/or timely not viable.

PayPal allows you to create as many buttons as you like and embed them on your site through an HTML snippet.

This snippet will be then hardcoded at the template (theme) level on your Drupal system. This is not the most accurate solution for this problem, however, it is the quickest and simple to implement.

Keep reading to learn how!

Note: The creation of a subtheme is required. If you do not know how to create a subtheme in Drupal yet, take a look at this article.

Step #1.- Create the Paypal Button

• Log in to your PayPal Account.
• Click Manage Buttons (right column)

The creation of a simple PayPal button has one required and two optional sections represented by accordion tabs. It is only necessary to fill out the first part of the interface to have a functional button.

• Change the Button type.
• Enter a proper description and price.
• Click Create button.

You will be redirected to another screen. 

• Select and copy the code.
• Paste the code in a text editor.

 Step #2.- Create the Product Content Type

Let’s suppose we sell mugs to a cost of 6.95 USD. It makes sense to create a content type called Mug.

• Click Structure > Content types > Add content type. 
• Enter a proper name.
• Click Save and manage fields.
• Click Add field:
  • Field type: Number (decimal)
  • Title: Price
• Click Save and continue.
• Click Save field settings.
• Add the suffix USD.
• Click Save settings.

• Add an image field.
• Rearrange the fields in the Manage display tab in this order:
  • Image
  • Body
  • Price
• Hide the Body and Image labels.
• Change the image style to Large 480x480.
• Set the Price label to Inline.
• Click Save.

 Step #3.- Enable Template Debugging

• Open sites/default/services.yml

In case the file services.yml is not available, copy sites/default/default.services.yml and rename it to services.yml.

• Locate the twig.config section and change the value of debug: false to debug: true.

• Save the file.
• Click Configuration > Performance > Clear all caches.

 Step #4. - Create Content

• Click Content > Add content > Mug.
• Add a proper description.
• Enter the same price you set when configuring the button on your PayPal account.
• Click Save.

We only need to add the button to the theme template.

 Step #5. - Embed the PayPal Button

• Log out from your PayPal account.
• Click Structure > Block layout > Custom block library > Add Custom Block.
• Give the block a proper title like PayPal Button - Mug.
• Leave the Body field empty.
• Click Save.
• Click Block layout.

• Scroll down to the Content section.
• Click Place block.
• Look for the PayPal button block.
• Click Place block.

• Uncheck Display title.
• Restrict the block only to content types from type Mug.
• Click Save block.

• Scroll down and click Save blocks.

You will see no difference if you go back to the node. However, the empty block is there.

• Click Shift+Ctrl+I or F12 to open the HTML inspector of your browser.

You can recognize several things there: 

• The presence of the block.
• The Template suggestions, that is, the possible names you can choose to override the template of this particular block.
• The location of the original template.

Template suggestions go from most specific to less specific, being block.html.twig (the default block template marked by an “x”) the less specific one.

• Create a directory called templates within your themes directory
  • themes/mytheme/templates or themes/custom/mytheme/templates
• Copy the specific block template of the parent theme of your theme or copy it from core/themes/bartik/templates/block.html.twig.
• Rename it to block--paypalbutton.html.twig (the most specific template suggestion).
• Add the code provided by PayPal.
• Save the file.

• Click Configuration > Performance > Clear all caches.

The PayPal button should appear on every node of type Mug. If you click on it, you wil be redirected to PayPal. Congratulations!

I hope you liked this tutorial. Thanks for reading! 

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.