Adding PayPal, Apple Pay and Google Pay to your Web Widgets

Follow

Adding PayPal, Apple Pay and Google Pay to your Web Widget(s) makes it even easier for your supporters to donate to your charity or make a financial transaction for another purpose by replacing the need to find their physical card and tap into those all-important details. Using PayPal, Apple Pay and Google Pay is quicker, safer and more secure for your supporters.

Below are the steps that you will need to take to add the options to your donate pages that feature a Web Widget.

 

Enabling the payment options on your account

To allow people to make one-off donations by Apple Pay, or Google Pay you will first need to make some changes to the settings in your Stripe Account. 

Under the heading ‘Set up Apple Pay for your Website’ in Stripe's documentation, it provides the steps to enable Apple Pay on your Stripe account.

To enable PayPal so that people can make one-off donations via your donate pages see this article: PayPal

 

New Web Widgets

If your Donorfy is connected to PayPal then your widgets will allow one-off donations to be made by PayPal - see this article if you have existing Web Widgets you want to upgrade to allow donations by PayPal.

If your Stripe account is set up to support payments by Apple Pay or Google Pay then your Web Widgets will allow one-off donations to be made by these two payment methods if they are enabled in the browser.

Note for Apple Pay you must upload a verification file provided by Stripe to your website - this is covered in the Stripe documentation

 

Existing Web Widgets

Once the payment options have been enabled on your account (see the first section of this Knowledge Base article), adding the Apple Pay, Google Pay or PayPal payment options to your existing Web Widgets is a 3-step process:

  1. Update JavaScript
  2. Add Apple Pay and Google Pay code
  3. Add PayPal code

These steps are detailed below:

 

1. Make sure the latest JavaScript files are used in your existing Web Widgets

To enable the donation process for Apple Pay, Google Pay or PayPal on your website donate page you need to update your Web Widgets to use the latest JavaScript file.

Look at the HTML of your Web Widget and replace the reference to the Stripe payments JavaScript file, i.e. similar to this:

<script type="text/javascript" src="https://az763204.vo.msecnd.net/wwjs/stripepayments_2020.5.2.js"></script>

Update the line of HTML to the latest JavaScript version: 

<script type="text/javascript" src="https://cdn.donorfy.com/wwjs/stripepayments_2024.6.1.js"></script>

 

 

2. Update your Web Widgets to include Apple Pay and Google Pay

After you have:

  • Set up your Stripe account to accept donations by Apple Pay and Google Pay, and
  • Updated your Web Widgets to use the latest JavaScript files

You can update any existing Web Widgets you have which accept donations by payment cards to also accept ApplePay and GooglePay as described below.

 

Add a Div to contain the Apple Pay and Google Pay buttons

Add a new div to the Web Widget HTML as shown below - typically this div is placed below the existing ‘donate’ button. The Id of the div must be:

 payment-request-button

You can add CSS classes or styling as you need.

<div id="payment-request-button" style="margin-top: 20px">
<!-- Target for apple & google pay -->
</div
>

 

When the Web Widget is loaded in a browser with Apple Pay or Google Pay support enabled then the appropriate buttons will be included in the div.

 

3. Update your Web Widgets to include PayPal

After you have updated your Web Widgets to use the latest JavaScript files and connected your Donorfy to PayPal you will need to add additional HTML to your existing Web Widgets.

 

Add a Div to contain the PayPal buttons

Add a new div to the Web Widget HTML as shown below - typically this div is placed below the existing ‘donate’ button - the Id of the div must be:

 paypal-button-container 

You can CSS classes or styling as you need.

<div id="paypal-button-container">
<!-- Target for PayPal buttons -->
</div>

 

Add the hidden fields

Add the hidden fields as shown below:

<input type="hidden" id="PayPalStatementText" value="{PayPalStatementText}" />
<input type="hidden" id="PayPalClientId" value="{PayPalClientId}" />
<input type="hidden" id="ExternalPaymentReference" value="" />
<input type="hidden" id="PayPal" value="" />

 

Refer to your PayPal Settings in Donorfy and replace the placeholder

  • {PayPalStatementText} with the statement text, and
  • {PayPalClientId} with the PayPal Client Id

For example, your hidden fields would end up looking like this:

<input type="hidden" id="PayPalStatementText" value="A Great Cause" />
<input type="hidden" id="PayPalClientId" value="AbcDEF1236733ndvwdfgwy-HDJHDuw333" />
<input type="hidden" id="ExternalPaymentReference" value="" />
<input type="hidden" id="PayPal" value="" />

 

When the widget is loaded the PalPay button will be displayed.

 

 

Disabling Apple Pay, Google Pay or PayPal 

If you wish to disable these payment options from your new or updated Web Widgets, see this Knowledge Base article: [Disable Apple Pay, Google Pay or PayPal on a Web Widget]

 

Tips

Before making any changes to the Web Widgets, we would recommend that to create a copy of your Web Widget and update the copy, when you are happy with the changes you can then switch over to using the updated Web Widget.

If you are testing the changes on a staging site, then you will need to ensure that the domain for the staging or test site has been added to your Google ReCaptcha v3 account. If this is not done, then your testing will be blocked by the ReCaptcha process.

 

 

Donorfy_Professional_Image_for_Support_Guides.jpg

Web Widgets are a Professional-only feature. Essential subscribers, please contact us to find out more about upgrading.

 

Comments

0 comments
Please sign in to leave a comment.
Powered by Zendesk