CONNECT: PayQuickly Form

PayQuick.ly is a short-form donation solution enabling patrons to make quick donations using payment wallets such as Apple Pay, Google Pay, PayPal, Amazon Pay, and Stripe's Link. Forms can be embedded directly in a webpage or slide into view with the click of a button. As these forms are designed for quick payment, limited information is collected — making it easy for supporters to "Pay Quickly."

With the slide-into-view option, customized buttons can be placed around the edges (walls) or corners of your website. When a supporter clicks the button, the form slides into view. These buttons are "sticky," staying on the page as the user scrolls up and down.

With the embedded (inline) version, the form has no button and appears where placed in your website.

PayQuick.ly works seamlessly with AskQuick.ly, Click & Pledge's AI-powered donor engagement assistant. When enabled, AskQuick.ly appears as the first screen of your PayQuick.ly form, answering donor questions about your organization and guiding them toward giving — all before the donation flow begins.

In This Article

Overview

• Create an unlimited number of PayQuick.ly forms to use with your fundraising campaigns
• Since every fundraising campaign may have a PayQuick.ly, you may have a form on each webpage pointing to a different campaign — for example, a PayQuick.ly on your home page may point to general donations, while one on an events page may point to that event's campaign
• Custom questions from your payment form will be included in the PayQuick.ly flow
• Credit card and bank transfer payments are accepted inline — donors never leave the PayQuick.ly form
• PayQuick.ly donations may include trackers, SKU, GAU, FMV, and Donation Presets for recurring payments if enabled on the Payment Options for the assigned campaign
• Donations post to Salesforce if using the Salesforce Click & Pay Suite

PayQuick.ly Configurations

PayQuick.ly supports several configurations depending on the features you enable. The table below shows the available options from most to least featured. The superscript numbers in the "First Screen" column correspond to the images below the table.

The Five "First Screen" Options

Navigation

To navigate to PayQuick.ly in your Click & Pledge account:

1. Click Launcher (the four-square icon in the top right)
2. Click Fundraising
3. Click Campaigns & Forms
4. Click your campaign name
5. Click PayQuick.ly
6. Click Add New — or —
7. Click Edit (for existing PQs) under Actions ⋮

How to Create a New PayQuick.ly

• Click the blue Add New button (step 6 in Navigation above)
• In the screen that opens, Name the PayQuick.ly
• Select the donation Payment Form from which to copy the button colors
• Enter any desired Form SKU, Tracker, or Internal Notes
• Enter a Banner Label (optional) — this text appears on the banner at the top of the form. If left blank, the banner will still display in your button color
• Enter the Form Header and Payment Selection Header if desired — they will appear as shown below
• Enter the Customized Button/Pop-up Text — this will embed in the rectangular button (wall) or appear as a pop-up for the round button (corner)
• Check the box to display a progress meter on the PayQuick.ly form

Intelligent Chat Option

To enable AskQuick.ly in this form, select it from the Select AskQuick.ly dropdown. The default is None. If you have not yet created an AskQuick.ly, click the click here link to get started.

Designing PayQuick.ly for Your Website

The Position & Preview section is where you determine how your PayQuick.ly appears on your website and get the code to place it on the page. 

1. Begin by selecting a Type from the dropdown:

• Corner — a round button placed at one of the four corners of the page (positions 1, 3, 5, 7)
• Wall — a rectangular button placed along one of the four edges of the page (positions 2, 4, 6, 8)
• Inline — embedded directly on the page without a button; place the code anywhere on your site

For Corner and Wall types, complete the remaining fields:

2. Use the Position dropdown to select where the button appears on the page — refer to the Position Guide for reference
3. Click the Icon dropdown to select an icon — click Remix Icon to access an expanded icon library
4. Choose the Background Color for the button
5. Choose the Text Color for the button
6. The Button column previews your design in real time
7. Click Save when finished

If using the Remix Icon library, a popup will appear. Type to search for an icon — for example, "Bike" — then click the desired icon and click OK.

The custom icon will appear on the selected button.

After saving, a Click & Preview link and a Copy Code button will appear. The preview will show a white page with your button in the correct position. Corner buttons are animated, and the pop-up text will appear on hover.

Note: Because PayQuick.ly uses a script, the code on your website never needs to be updated — changes to your design or campaign take effect automatically.

For Inline type, no additional fields are required — simply save and copy the code to paste anywhere on your website.

Multi Account/Campaign

You can combine multiple PayQuick.ly forms into a single PayQuick.ly or AskQuick.ly on your website. This can be used to allow for multiple currencies from separate C&P accounts to be used on a single form, or multiple campaigns within a single account.

It can also be used to have multiple campaigns on a single form. 

Coming Soon - background color selection. Select custom background and text colors for tabs not selected. In the example here the selected tab is the color of the buttons, while tabs not selected are black. 

🔔Until this background color selection feature is live (September), eliminate the 
tab-bgcolor="#000000" tab-textcolor="#ffffff 
from the first line of code, so that it looks like this:
<payquickly-group>
 

Combining Multiple PayQuickly Tabs Into One Form

Each tab's embed code will look like this — one <clickandpledge-payquickly> tag followed by a <script> tag:

<clickandpledge-payquickly
    class="CnPPayQuickly"
    data-guid="YOUR-GUID">
</clickandpledge-payquickly>
<script src="https://payquickly.clickandpledge.com/v3/v3.min.js">
</script>

To combine 4 tabs into one form:

1. Wrap all 4 <clickandpledge-payquickly> tags inside a <payquickly-group> container
2. Add tab-bgcolor and tab-textcolor attributes to the <payquickly-group> tag to set the background and text color of the tab bars not selected.
3. Delete every <script> tag except one, located at the bottom in this example
4. Place that single remaining script tag right after the closing </payquickly-group> tag

The result should look like this:

<payquickly-group tab-bgcolor="#000000" tab-textcolor="#ffffff">
    <clickandpledge-payquickly
        class="CnPPayQuickly"
        data-guid="GUID-1">
    </clickandpledge-payquickly>
    <clickandpledge-payquickly
        class="CnPPayQuickly"
        data-guid="GUID-2">
    </clickandpledge-payquickly>
    <clickandpledge-payquickly
        class="CnPPayQuickly"
        data-guid="GUID-3">
    </clickandpledge-payquickly>
    <clickandpledge-payquickly
        class="CnPPayQuickly"
        data-guid="GUID-4">
    </clickandpledge-payquickly>
</payquickly-group>
<script src="https://payquickly.clickandpledge.com/v3/v3.min.js">
</script>

Duplicating a PayQuick.ly Button

PayQuick.ly buttons may be duplicated. In the PayQuick.ly list, click Actions ⋮ next to the form you want to duplicate, then click Duplicate.

How to Create a PayQuick.ly from a New Payment Form

When creating a new payment form in the CONNECT Form Builder, there is an option to automatically create a PayQuick.ly at the same time.

1. In the Form Builder, create and customize your new payment form
2. Click Save
3. In the Save dialog, check the Auto-create a PayQuick.ly Form box, then click Save

The new PayQuick.ly will appear in the PayQuick.ly list. Click Actions ⋮ > Edit to complete the setup as outlined above.

Note: The default payment form created automatically when setting up a new campaign is considered an existing form — use the Add New method above to create a PayQuick.ly for it.

Website Security Configuration (CSP Headers)

🔔 If your website uses a Content Security Policy (CSP) header, you will need to add specific directives to allow PayQuick.ly and AskQuick.ly to function correctly. Incorrect CSP configuration can cause the widget to fail silently — appearing to load but blocking payments at submission with no visible error. See CONNECT: CSP Header Setup — PayQuick.ly & AskQuick.ly for the complete list of required directives.