Getting Started

Onboard

Onboard onto the AccelPay platform by submitting our onboarding form

Create a CNAME record

To avoid third party cookies, we subdomain our cart to create a seamless experience for our brands. Add the following CNAME record:

Button Markup

Add the button markup in all the places you wish to have an 'Add to cart' button on your site.
This will include the listing and variant ids and takes the following format:

<div data-bclistingid="..." data-bcvariantid="..."></div>

The button annotation for all the listings can be found on the settings page in the AccelPay portal.

Add Scripts

Insert the AccelPay script into the head section of your site. The script can be found on the settings page in the AccelPay portal.

Documentation per platform

Squarespace

[Squarespace] Add Scripts

In the Home menu, click Settings, click Advanced, then click Code Injection.

Add AccelPay Library and Google Analytics scripts to the header section

After adding the script, click Save

[Squarespace] Add Button Markup

Edit a page or post, click an insert point, and click Code from the menu.

Add button markup in the text field (The button will not show up in Edit mode)
Click Save to see the button in Preview

[Squarespace] Style AccelPay Buttons

In the Home menu, click Design, then click Custom CSS.
Add custom CSS and click SAVE

Wordpress (Elementor)

If you are using Elementor in Wordpress, please notify AccelPay team in order to have a proper configuration for it on AccelPay script.

[Wordpress] Add Scripts

Using a plugin is the easiest way to add a script to the header on Wordpress. In Plugin section, choose Add Plugin, search "Insert Headers and Footers by WPBeginner" and click "Install Now".

After install is complete, click Activate.

Go to Settings and click "Insert Headers and Footers

Insert AccelPay scripts to the header and Click Save

[Wordpress] Add Button Markup

In Elementor edit mode, choose HTML element and add to the page.

Add button markup in the text field (The button will not show up in Edit mode)

Click Preview to see the button

[Wordpress] Style AccelPay Buttons

In the menu, click Apperance, then click Customize.

Click Additional CSS

Add custom CSS and click SAVE

Wix

[Wix] Add Scripts

Go to Settings and choose Custom code from Advanced settings.

Click Add Code.

Add AccelPay scripts in "Paste the code snippet here" and Name "AccelPay Script". Choose "All pages: Load code once" option on Add Code to Pages.

Click Apply

[Wix] Add Button Markup

In Edit mode, Click Dev Mode from the header and click "Turn on Dev Mode"
Go to Dev Mode menu from the side menu ({} icon), and create the folder "custom-elements" in Public and create the JS file "accelpay-custom.js" inside the folder. Remove the template file and copy paste the snippet below and save.

// To debug this code, open wixDefaultCustomElement.js in Developer Tools.
class AccelpayCustomElement extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.style = 'display:flex;justify-content:center;';
    }
}

customElements.define('accelpay-custom', AccelpayCustomElement);

Click + button and choose Custom element from Embed Code

Click Choose Source and check Velo file radio button and choose accelpay-custom.js as a source file
Click Set Attributes and add data-bclistingid and data-bcvariantid with corresponding values from Accelpay Portal

[Wix] Style AccelPay Buttons

Go to Settings and choose Custom code from Advanced settings.

Click Accelpay Script that you created in the step 1

After the scripts, add css snippet wrapped with <style></style>

Example:

<style>
    .accelpay-btn {
        background: #DB3737  !important;
        color: #fff  !important;
        border: 1px solid #F4BA65  !important;
    }
</style>