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:
- Update JavaScript
- Add Apple Pay and Google Pay code
- 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:
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.
Web Widgets are a Professional-only feature. Essential subscribers, please contact us to find out more about upgrading.
Comments