Custom Paypal Button: Setup and Integration Guide

In one of our previous articles we’ve talked about adding a PayPal button to your website. It's about creating a generic PayPal button, but if you want your button to look a bit different to match the design of your website better, you can use PayPal custom buttons.

In this article, we'll show you how to create a PayPal custom button and implement it on your website. We'll also show you how you can receive payments on PayPal without losing money on fees using a multi-currency account with Wise.

Set up a PayPal account and get your API credentials

As a first step, you’d need to set up an account with PayPal and get API credentials. If you already have both - feel free to skip this section.

If you don’t have a PayPal account yet - go to “How to get started?” section of our article on how to add PayPal to your website for the full guide.

When you’re done setting up your accounts, grab your API credentials and save them somewhere - you’ll need them a bit later

Ways to add PayPal button

There are 2 ways that you can add and customise PayPal checkout button:

• Quick setup using PayPal portal - no coding required, but basic and limited
• Standard integration - more customisable, but requires coding

Both have their pros and cons and we’ll go over them, describing what are the differences and how to customise buttons using both approaches.

Quick setup via PayPal portal

PayPal portal provides a graphical user interface to customise how the button would look like. With a couple of clicks you can change PayPal buttons appearance and when you are happy with it - it’ll generate the code for you that you can copy-paste to your website.

The great thing about this approach is that it doesn’t require any coding. You will create your button by using only the interface that PayPal provides.

The drawback is that it supports only basic features. For example - it is suitable only for selling individual products, meaning that cart features are not supported and customisation options are limited as well¹.

To create button using this approach - follow these steps:

1. Go to the PayPal Checkout page in their App Center.
2. Scroll down until you see section “Quick setup for individual items”
3. Press “Start Setup” button
4. Play around with parameters on this page and instantly preview your buttons
5. Once you’re happy with it - press “Copy Code”
6. Paste it into your website
7. In that code you’ve pasted, one script tag will contain a reference to PayPal SDK, which will look something like https://www.paypal.com/sdk/js?client-id=sb¤cy=USD Replace the “sb” part API Client Id with your client id that you obtained when setting up your account, so that it would be client-id=YOUR_CLIENT_ID
8. Voilà! You can test your buttons now

This approach is good for it’s simplicity. If you don’t have a need to be able to add your products to the cart and are okay with limited customizability options - this approach would fit you well!

Otherwise, you might want to go with Standard Integration

Even though you are limited in options with this approach, once you generate the code and paste it to your page - it’s not much different from Standard integration and you can continue customising it using PayPal SDK and options that it provides.

Standard integration

Standard integration provides more features and also more customisation options. But it does require coding knowledge.

We’ve talked about basic standard integration in our previous article on How to add PayPal button to your website

If you don’t have a website that’s integrated with PayPal Checkout - you could follow the article mentioned above to quickly build an integration with PayPal.

Otherwise, you could use PayPal’s interactive code demo

Customisation options

It’s time to review the customisation options for buttons that PayPal provides us with.

PayPal button SDK accepts a style options with following properties.²

Color

Set style.color to set the color for the button

Color options are:

• “gold” - default
• “blue”
• “silver”
• “white”
• “black”

Layout

Set style.layout to change the layout, in case multiple buttons are available

Layout options are:

• “vertical” - default
• “horizontal”

Size

Set style.size to change the size of the button

By default the buttons adapt to its container, but it’s possible to customize it:

• To change button width - alter the width of the container
• To change the height - set style.height property to value from 25 to 55

Shape

Set style.shape to change the shape of the button

Shape options are:

• “rect” - default. Will result in a rectangular button
• “pill” - will result in a button with rounded corners

Label

Set style.label to change the label of the button

Label options are:

• “paypal” - default
• “checkout”
• “buynow”
• “pay”
• “installment”
• “checkout”

How do I receive international payments on PayPal and not lose money on fees

If you’re an international trader, it's essential that you allow payments in your customers’ local currency. This section will show you a cost effective way of receiving international payments on PayPal so if you want to save some money on your sales, pay close attention to this section.

PayPal doesn’t allow international payments by default so you’d have to enable this from your business account.⁴ But before you do so, add foreign currency accounts for the currencies that you want to receive on PayPal. Here’s how:

1. Click on “Money” from the main menu then click “Manage Currencies”
2. Select the currency that you want to hold then click “Add Currency”

This feature will allow you to hold funds in different currencies rather than having it converted automatically to your local currency. While that sounds convenient, it can get expensive especially with the conversion fee PayPal charges which usually ranges from 2.5% to 4%.⁵

Now, in order for you to withdraw the funds without having to convert it first, you’ll need a multi-currency account. You can get one from Wise to make sure that your funds are always converted at the real market rate without mark-up and with fees that are up to 19x cheaper than PayPal. Conversions with Wise are optimised so that the fees can be reduced up to 0.75% on average. This means 1.75% - 3.25% savings for you.

Get a multi-currency account

Once your multi-currency account is ready, you can enable international payments with PayPal. Here’s how:

1. Log in to your PayPal account
2. Go to your business profile and select “Profile and Settings”
3. Select “My selling tools”
4. Find the “Block Payments” line and click on “Update”
5. Find the “Block Payments from users who:” line and make sure that the option that disables payment in different currencies is untick to allow PayPal account holders from other countries to pay you online.

Closing Words

As you can see - PayPal buttons support some customizability.

With their Quick Setup - you have a nice GUI tool at your disposal, but are a bit limited in options.

While Standard Integration might be a bit harder, it will provide more customisation options. And you could use their Interactive Code Environment for testing it out.

Sources

1. PayPal Merchant app center
2. PayPal Developer
3. PayPal Merchant fees