tag, but after the Google tag. In that snippet, you can specify a “value” in the conversion snippet OR dynamically populate the “value” using information passed in the sessions' “orderData”. **To correctly collect dynamic conversion data, you must parse orderData from sessionStorage using the correct naming conventions.** For example, one way you could modify the conversion snippet would be to include the order’s “totalAmount” and “orderId”. Be sure to use your own Google Ads AW-CONVERSION\_ID/CONVERSION\_LABEL in place of the “AW-XXXXXXX/XXXXXXXXXXXXXX” and customize as needed. ```javascript <script> var orderDataTmp = JSON.parse(sessionStorage.getItem("orderData")); if(orderDataTmp) { var orderValue = orderDataTmp.totalAmount; var transactionId = orderDataTmp.orderId; gtag('event', 'conversion', { 'send_to': 'AW-XXXXXXXX/XXXXXXXXXXXXXXXXXXXX', 'value': orderValue, 'currency': 'USD', 'transaction_id': transactionId } ); } </script> ``` Please read Google’s article on [How to Use the Google Tag for Ads Conversion](https://support.google.com/google-ads/answer/7548399?hl=en) for more information. To learn more about configuring Google Analytics, [see here for more information](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/configure-google-analytics). *** ### Facebook <a href="#trackingpixels-facebook" id="trackingpixels-facebook"></a> For Facebook the following events are fired: * Page View (by default on every page load) * Lead (when a lead page is submitted) * AddToCart (when an item is added to the shopping cart) * CustomizeProduct (when variant details are changed by the consumer) * InitiateCheckout (when a checkout page loads and there is a card number input on the page) * AddPaymentInfo (when a checkout page is submitted with card information) * Purchase (with an option to fire after initial sale or after all upsells) If you wish to fire other FB pixel events, you can use the Custom Head Tracking Code section on the right side of the page. You can optionally fire the Facebook Conversions API. Enter your access token (be sure to whitelist your domain and generate token by a system user to avoid expiration). The Conversions API fires the same events as the pixel. It can be advantageous when the pixel (client-side) is blocked by the consumer’s browser. For various Facebook pixels you would need to get the Jave script code from Facebook and then paste it in the “Custom Head Tracking Code” section on our side. *** ### Sygnal <a href="#sygnal" id="sygnal"></a> For Sygnal the following events are fired: * Page View (by default on every page load) * ViewContent (presell pages) * Lead (when a lead page is submitted) * AddToCart (when an item is added to the shopping cart) * CustomizeProduct (when variant details are changed by the consumer) * InitiateCheckout (when a checkout page loads and there is a card number input on the page) * AddPaymentInfo (when a checkout page is submitted with card information) * Purchase (with an option to fire after initial sale or after all upsells) If you wish to fire other Sygnal pixel events, you can use the Custom Head Tracking Code section on the right side of the page. *** ### SnapChat <a href="#trackingpixels-snapchat" id="trackingpixels-snapchat"></a> For SnapChat the following events are fired once the cardholder’s email address is known: * Page View (all pages) * Purchase (with an option to fire after initial sale or after all upsells) For more information on configuring your SnapChat pixel, please visit the SnapChat resource center, here:\ [SnapChat Business Help](https://businesshelp.snapchat.com/s/topic/0TO0y000000YVdJGAW/snap-pixel?language=en_US) *** ### TikTok <a href="#trackingpixels-tiktok" id="trackingpixels-tiktok"></a> For TikTok the only requirement is that the pixel ID is entered here. Using the pixel ID, TikTok's base tracking code is added to the \<head> of each page. This base code includes the standard "page view" event. All remaining configuration is done at TikTok. Any additional events would require you to use TikTok's custom script to be added in the "Custom Tracking Code" section of your funnel's "Tracking Pixels" section. <details> <summary>If using a Shopify or TikTok pixel</summary> Shopify TikTok pixels do not allow you to edit the events, you will need to add the scripts manually using your Shopify TikTok pixel ID on each page. Example: ```javascript // BASE CODE TEMPLATE: <script> //Part1 !function (w, d, t) { w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i=" https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}; //Part 2 ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.page(); }(window, document, 'ttq'); </script> ``` For more event codes visit [API Documentation (tiktok.com)](https://ads.tiktok.com/gateway/docs/index?identify_key=2b9b4278e47b275f36e7c39a4af4ba067d088e031d5f5fe45d381559ac89ba48\&language=ENGLISH\&doc_id=1701890973258754#item-link-Before%20you%20begin) <img src="/files/npUzEl0kajX8YEazqahH" alt="" data-size="original"> </details> <details> <summary>Multiple TikTok Pixels</summary> CheckoutChamp does not limit the number of pixels you can use at a time. You will however need to add them manually and place the correct events on them. On Part 2 of the code provided by TikTok you will add your pixel id’s. ```javascript // BASE CODE TEMPLATE: <script> //Part1 !function (w, d, t) { w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i=" https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}; On Part 2 you will add your multiple TikTok pixels //Part 2 ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.page(); }(window, document, 'ttq'); </script> ``` For more event codes visit [API Documentation (tiktok.com)](https://ads.tiktok.com/gateway/docs/index?identify_key=2b9b4278e47b275f36e7c39a4af4ba067d088e031d5f5fe45d381559ac89ba48\&language=ENGLISH\&doc_id=1701890973258754#item-link-Before%20you%20begin) <img src="/files/BtkEKTTOdWMXd4zNqhaw" alt="" data-size="original"> </details> **TikTok Event API Access Key** If you want to fire TikTok's Event API then enter your Access token here. This must be entered along with the TikTok Pixel ID. Events fired are the same as noted in the Pixel ID tooltip. *** ### Triple Whale <a href="#trackingpixels-triplewhale" id="trackingpixels-triplewhale"></a> Enable the Triple Whale checkbox to automatically add the Triple Whale script to the funnel. This requires a Shopify plugin attached to the funnel’s campaign. More information is [here](/crm/plugins/data-sources/triple-whale) *** ### Listrak <a href="#trackingpixels-listrak" id="trackingpixels-listrak"></a> For Listrak an email is captured as soon as it is entered on a lead or checkout page. Once that is complete an UpdateCart event is called for any product or price changes. The order is automatically submitted based on the setup option - after initial sale or after all upsells. The following information is sent to Listrak on a purchase: email address, first name, last name, order ID, customer ID, order total amount, shipping total amount, tax total amount, and item information (sku, quantity, price). *** ### Axon by AppLovin Enable Axon and enter the Product Category ID from your Axon account. All Axon events are processed through Google Tag Manager. It is required to enter your GTM id on the [Google Tag Manager](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels#trackingpixels-google) page. Follow these instructions to enable Axon within GTM <https://developers.applovin.com/en/audience-plus/google-tag-manager> Product Category ID information can be found here\ <https://developers.applovin.com/en/audience-plus/events-and-objects#category-ids> Install the Pixel Helper for testing live pages\ <https://ecomm.applovin.com/p/MkMMcd2CDvebN1/Pixel-Helper-Checklist> *** ### Custom Head/Body Tracking Code <a href="#trackingpixels-customhead-bodytrackingcode" id="trackingpixels-customhead-bodytrackingcode"></a> These sections can be used to place custom tracking scripts on all pages of your funnel. The custom tracking code is meant to be used when not using the standard tracking pixel ID inputs. You should use one or the other. Entering tracking IDs in both places could lead to tracking abnormalities. Any scripts added in this section are added programmatically and will not be seen in the HTML of the pages in the builder. Similarly, the scripts will not be seen if you "view source" on the live page. To see these scripts on the live page, right click to "Inspect" the page and find the script in the \<head> element or view the Network tab to see the network calls. {% hint style="warning" %} Scripts wrapped in a tag cannot be entered here, please use the Global Scripts for these types of scripts or place them directly on the pages. {% endhint %} *** ### Place the code directly on the page <a href="#trackingpixels-placethecodedirectlyonthepage" id="trackingpixels-placethecodedirectlyonthepage"></a> Checkout Champ allows you to directly add code to a page by clicking the Edit button in the page builder. <figure><img src="/files/hHsNIJlMJ6GAscG0TF82" alt=""><figcaption></figcaption></figure> {% embed url="<https://api.media.atlassian.com/file/b9bb7f4b-e087-47d6-aaf6-cc1d20f486d5/artifact/video_1280.mp4/binary/cdn?client=275b7238-9394-4b3c-903b-1514a78b0763&collection=contentId-1859552344&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIyNzViNzIzOC05Mzk0LTRiM2MtOTAzYi0xNTE0YTc4YjA3NjMiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0xODU5NTUyMzQ0IjpbInJlYWQiXX0sImV4cCI6MTcyNjg1MjEzMiwibmJmIjoxNzI2ODQ5MjUyfQ.ePDKCrdEty1_OcDKYtvSBLByKVUl9r7Qc3iaYcu4S24>" %} *** ### Global Scripts <a href="#trackingpixels-globalscripts" id="trackingpixels-globalscripts"></a> Scripts can be automatically added to specific funnels that you determine. For more information, please view our Global Scripts section of the [CheckoutChamp Account Settings](/funnel-builder/account-settings) article. # Server-side Google Tag Manager Coming Soon! {% embed url="<https://developers.google.com/tag-platform/tag-manager/server-side>" %} {% hint style="info" %} Server-Side e Google Tracking is well-documented at Google. This guide summarizes the steps. It is advised to review the Google documentation for the most accurate and up-to-date instructions. {% endhint %} 1. [**Create a Server-Side Container**](https://developers.google.com/tag-platform/tag-manager/server-side/overview#create_a_tag_manager_server_container) * Log in to your [Google Tag Manager](https://tagmanager.google.com/) * Click **"Create Container"** → Select **"Server"** as the target platform * Name the container and finish creation 2. **Provision a Tagging Server** 1. **Automatic (Recommended)** * Use the GTM UI to [set up on **Google Cloud Run**](https://developers.google.com/tag-platform/tag-manager/server-side/cloud-run-setup-guide?provisioning=manual) automatically 2. **Manual (Advanced)** * Deploy the server container manually using Docker (on [GCP](https://developers.google.com/tag-platform/tag-manager/server-side/app-engine-setup), [Manual](https://developers.google.com/tag-platform/tag-manager/server-side/manual-setup-guide) (AWS, or another host)) * Example Docker image:\ `gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable` 3. [**Configure a Custom Domain**](https://developers.google.com/tag-platform/tag-manager/server-side/custom-domain?option=same-origin) **(Recommended) \[optional]**\ When you first set up a tagging server, it is hosted on a domain provided by the cloud provider. When you use the default endpoint, it delivers data to the server container, but runs in a third-party context. To unlock the benefits of a [first-party context](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies#tracking_and_privacy), such as more durable cookies, your tagging server and your website have to run on the same domain. * Use a subdomain like `metrics.yourfunneldomain.com` * Update your **DNS records** to point to your tagging server * In GTM:\ **Admin > Container Settings > Add URL** → Add the custom domain 4. **Add Server-Side Tags** * Recommended: * [**Conversion Linker**](https://developers.google.com/tag-platform/tag-manager/server-side/ads-setup#step_1_set_up_the_conversion_linker_tag) (All Pages) * [**Google Ads Conversion Tracking**](https://developers.google.com/tag-platform/tag-manager/server-side/ads-setup#step_1_set_up_the_conversion_linker_tag) tag * Input your **Conversion ID and Label** from Google Ads * Trigger on appropriate events (e.g., "purchase", "sign\_up") 5. [**Set Up Clients**](https://developers.google.com/tag-platform/tag-manager/server-side/dependency-serving?tag=gtm) **in the Server Container** * The **GA4 client** is pre-installed to handle GA4 events * If you're using a **GTM Web Container**, add a "GTM Web Container" client and enter your container ID * Go to [AnalyticsMania](https://www.analyticsmania.com/post/introduction-to-google-tag-manager-server-side-tagging/), to get an in-depth tutorial 6. **Validate and Test** * Use **Tag Assistant** to preview and test your server container * Confirm tags are firing correctly * Check for any errors in the console 7. **Go Live** * Publish the server container * Remove any **duplicate tracking tags** from your web container to avoid duplication 8. **Configure CheckoutChamp** 1. Go to the funnel > Settings > Tracking Pixels 1. add the custom domain from Step 3, if configured 2. otherwise, add the GTM generated server URL * Default URL format using Cloud Run: `https://[GOOGLE_CLOUD_PLATFORM_PROJECT_ID]-[GOOGLE_CLOUD_REGION_ID].a.run.app` 2. Save 3. Publish the funnel <figure><img src="/files/bhoQeaTZM2orGPsm7TB8" alt="" width="563"><figcaption></figcaption></figure> # Offers and Upsells You can create offers and upsells for your funnel either within your Funnel or within the campaign on the [CRM side](/crm/crm-setup/campaign-setup/adding-a-product-to-a-campaign). To add or edit products in Checkout Champ, navigate to your funnel and open the settings for the funnel. <figure><img src="/files/ySLI1F1seKCzT6LPE3w2" alt=""><figcaption></figcaption></figure> After opening either option you will see all of the offers added to the funnel/campaign. You can click the pencil button to edit an offer/upsell or you can add new offers/upsells by using the “Add Existing Product” or “Add New Product” buttons. <figure><img src="/files/OFUfBRQe7vOZ1xG4y91G" alt=""><figcaption></figcaption></figure> Add Existing Product - This will allow you to configure an offer for a base product that you already have added to your Checkout Champ account. <figure><img src="/files/QG0cv5qk5laI4OQyBepv" alt=""><figcaption></figcaption></figure> Add New Product - This will allow you to add a brand new product to your Checkout Champ account and apply a billing schedule to this product as an offer <figure><img src="/files/b7DOm8rf8MqwLBChFZRD" alt=""><figcaption></figcaption></figure> * Product Name - Identifying name of your product * Client ID - Only required for a few plugins * Product Description - Description of the product being sold * Show to Affiliates? - Will show upsell stats to affiliates if checked (**Upsells only**) * Use Offer Mid - Will force upsell to always use the same mid as the main offer (**Upsells only**) * Fulfillment House - Sets the fulfillment house/software which will ship this product to the customer * Qty Per Order - Can be used for offers with quantity variants. If set to 3 for example, the CRM will send SKUx3 * Fulfillment Delay - Hold the offer for an additional length of time to satisfy same day cancellations * Product SKU - The SKU assigned to the product within your fulfillment house/software * Product Cost - Cost of the product to you, the merchant (used for expense reporting) * Shipping Cost - Cost for you to ship the product (used for expense reporting) * Merchant Account - Sets the merchant account that this offer will bill against * Weight - Internal value to store weight. Will send to fulfillment * Qty Available - Sets an available quantity to the product and will reflect on Fulfillment→Inventory Report as the products are being purchased. (See [Inventory Report](/crm/fulfillment-section/fulfillment-inventory)) * Billing Type - Sets the offer to be a one-time billing or a recurring billing offer * One Time - Customer will be billed at the time of purchase and will not bill again * Recurring - Customer will be billed at the time of purchase and will bill again at a later date * (See [Common Offer Setups](/crm/crm-setup/campaign-setup/adding-a-product-to-a-campaign/common-offer-setups) here) # Collections If you are building out your storefront inside of the CheckoutChamp funnel builder, you might find it easier to automatically populate the catalog pages with the appropriate products instead of having to manually set each product box to the appropriate items. This can be accomplished within the funnel builder by using the Collections feature. * [Create Collection](#collections-createcollection) * [Add Common Header to pages in the funnel](#collections-addcommonheadertopagesinthefunnel) * [Add “Product Row” Element to Catalog pages](#collections-add-productrow-elementtocatalogpages) * [Apply Multi Collection to Collection pages](#apply-multi-collection-to-collection-pages) * [Sort Order](#collections-sortorder) * [Create Menus in Common Page settings](#collections-createmenusincommonpagesettings) * [Apply Collection Menus to Funnel Pages](#collections-applycollectionmenustofunnelpages) * [Create Product Detail Page](#collections-createproductdetailpage) * [Finish the rest of the funnel](#collections-finishtherestofthefunnel) * [Additional notes for finishing the funnel](#additional-notes-for-finishing-the-funnel): *** ### Create Collection <a href="#collections-createcollection" id="collections-createcollection"></a> Inside [app.checkoutchamp.com](http://app.checkoutchamp.com), edit to the funnel that you would like to add collections to. Next, edit the funnel’s settings and click on Collections in the settings panel. <figure><img src="/files/JMGLbAHrXXf7KXFcoiXq" alt=""><figcaption></figcaption></figure> Inside the Collections page, create as many collections as you need by clicking the Add Collection button Next, inside the “Create New Collection” screen, add a Title for the collection, a description, and then choose if the collection type should be Manual or Automatic. **Manual** - Use the Product search bar to add the individual products into the collection. {% hint style="info" %} **Automatic** - Use conditions to automatically add existing and future products to the collect who fit within the conditions.\ \ If using Automatic, choose if the products that should be added to the collection should match ALL conditions or just ANY of the conditions.\ \ Field : Product Name, Product Tag, Price, Compare at Price, Weight, Variant Title\ \ Condition : Is Equal To, Is Not Equal To, Starts With, Ends With, Contains, Does Not Contain\ \ ![](/files/dQUKWw0gdQE6jDdaKy6v)Value : Enter in the value in which the condition should select the products. {% endhint %} After you add products to the Collection, you will see them listed in the Products section on the right side of the window. Here is an example using the Automatic Collection Type with the conditions requiring that the products in the collection must be tagged with the “mens” tag. Due to the conditions, the products tagged as “mens” automatically loaded into the Products section. Once you are complete with the collection settings, click “Save & Continue” to save and close the window so you can make any other additional collections that you might need. *** ### Add Common Header to pages in the funnel <a href="#collections-addcommonheadertopagesinthefunnel" id="collections-addcommonheadertopagesinthefunnel"></a> Please follow [this document](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to learn how to create a Common page inside the funnel and to create a Common Header which will be present across all the funnel pages that you decide. *** ### Add “Product Row” Element to Catalog pages <a href="#collections-add-productrow-elementtocatalogpages" id="collections-add-productrow-elementtocatalogpages"></a> Add a Catalog Page to your funnel and edit the page to remove any existing boxes that would contain your different products. A separate Catalog Page should be created any time a Collection/Catalog has a unique design.\ \ Next, replace each of those deleted boxes with the “Product Row” element. This is found under the Products section of the building blocks. <figure><img src="/files/4DejM2bX3cgcJOMbiESp" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Once you drag this onto the page, you will see a single product box surrounded by a larger “Product Row” element.\ \ All of the products on the page will use the same styling as the box displayed here. Feel free to adjust the font, font size, font color, and any dimensional changes.\ \ You can also add an Add To Cart button into the product box (make sure the button action is set to Add To Cart). {% endhint %} Click on the empty space of that Product Row element to choose how many columns should populate in each row, and also if the images should Lazy Load (only load images once the user scrolls and reveals the images) <figure><img src="/files/LKToU9plXCJcpfrB9ZLo" alt=""><figcaption></figcaption></figure> *** ### Apply Multi Collection to Collection pages This premade element can be dragged on the collection page to host multiple collections where each collection is hosted in multiple tabs. Pagination, lazy loading, sorting and search are supported for the multi collection element. {% hint style="info" %} Collections do not need to be assigned to collection pages that contain a multi collection element {% endhint %} <figure><img src="/files/y8xxMFqH4qYCjfNf0kWL" alt=""><figcaption></figcaption></figure> To add collections, select the multi collection element and open the settings. In the settings there is a dropdown where collections may be added. If there aren't any collections shown in the dropdown, verify that there are collections made in the funnel settings. <figure><img src="/files/8CPP5IbJZ6YOdSRQn9vw" alt=""><figcaption></figcaption></figure> With each collection selected a new tab and a new product section will be added. Each of the product sections and tabs can be styled and changed individually. Remove collection tabs from the element by clicking the 'x' on the right side of the collection name. You do not need to delete the tabs and product section manually. {% hint style="warning" %} The product sections do not need to be set to hidden. The element will only show one collection tab at a time. {% endhint %} *** ### Sort Order <a href="#collections-sortorder" id="collections-sortorder"></a> In some cases, especially with larger stores, you may want to give your customers the option to sort the products displayed. This feature is built into the builder’s options. <figure><img src="/files/oPIEBgPO0Thlqr7lv0we" alt=""><figcaption></figcaption></figure> To add this feature, add a new select to the page to your page above the Product Row. <figure><img src="/files/q79utXUqgLP6sygqDisX" alt=""><figcaption></figcaption></figure> In the select’s settings, choose the Name “Sort Order”. The sorting options will be automatically applied, so no need to set any of the options. Save the page. The sorting options will be available when the funnel is published. <figure><img src="/files/PvbedL4qanYMm3mLwrDk" alt=""><figcaption></figcaption></figure> ### Create Menus in Common Page settings <a href="#collections-createmenusincommonpagesettings" id="collections-createmenusincommonpagesettings"></a> On the funnel visualizer, click on your Common Page and then click the settings gear, and then click Main Menu. <figure><img src="/files/MWdSM1KXfvFDfqLkHuYw" alt=""><figcaption></figcaption></figure> This will open a panel called “Main Menu Navigation”. On this panel, click “Add Menu Item” to begin creating your menu. <figure><img src="/files/WRS2Cbs2ovMWUov79or8" alt=""><figcaption></figcaption></figure> On the side panel that displays, create a name for the menu option (your customers will see this), choose how the menu should link (choose collection) & the collection that should should display, and also the page that the customers will land on after clicking the menu option. This example below uses the Men’s collection from earlier in this document and routes the customers to the Men’s Catalog Page. <figure><img src="/files/3fKdoXA15uxXb7E2CHjr" alt=""><figcaption></figcaption></figure> You can create as many menu options as needed. You can reorder the Menu options by clicking and holding the three horizontal lines next to the Menu Title and dragging it to the desired location. Additionally you can also nest menu options under a parent menu option by dragging the menu to the right.\ \ Here is an example of nested menu options under the Men’s and Women’s Collection: <figure><img src="/files/SONmCbwaWzvMNP2o0MwX" alt=""><figcaption></figcaption></figure> Once you are complete, click the “Save & Return To Funnel” button. *** ### Apply Collection Menus to Funnel Pages <a href="#collections-applycollectionmenustofunnelpages" id="collections-applycollectionmenustofunnelpages"></a> At this point you have now created your Collections, adjusted your funnel pages to use Collections, and created your Navigation Menu options. The next step is to edit and save your Common Page, even if all edits are complete. Saving the Common Page will apply the Common Header (and Common Footer) to all of the pages in the funnel which contain a header with the cartCommonHeader Id.\ \ Once the funnel builder saves the Common Page, go back to the funnel visualizer and Publish the funnel. {% hint style="info" %} Any time you edit or add another page to the funnel with cartCommonHeader or cartCommonFooter, you must go back into the Common Page to save.\ \ Any time you save the Common Page, you must publish for those changes to take effect on the live site. {% endhint %} *** ### Create Product Detail Page <a href="#collections-createproductdetailpage" id="collections-createproductdetailpage"></a> Typically a Catalog page will display all the available products, and the customer can click on a product to view a Product Detail page for this specific product before adding it to the cart - especially if there variants on the offers. This Product Detail page is dynamic and has the same layout for all products.\ \ To accomplish this, drag a Product Detail page to the funnel, select a template, and make any design changes that you would like.\ \ Once you are complete, draw an arrow from each Catalog Page to the Product Detail page, and apply the Product Images option to the arrow(s). <figure><img src="/files/hvPdwvtU0jG1mKgB9HoV" alt=""><figcaption></figcaption></figure> *** ### Finish the rest of the funnel <a href="#collections-finishtherestofthefunnel" id="collections-finishtherestofthefunnel"></a> Beyond your Catalog page(s), Common Page and Product Detail Page, you will also need to add a Shopping Cart page, a Checkout Page and a Thank You page. You can also add as many upsells as you see fit. #### **Additional notes for finishing the funnel:** Be sure to add buttons/link to navigate around the funnel, and use the arrow routings to determine which buttons/links will send the customers to which page. Examples) * Your Shopping Cart page might have a “Continue Shopping” button which will redirect the customer back to a Catalog page. * Your Checkout Page might have a “Back to Cart” button which will redirect the customer back to the Shopping Cart page. * Your Shopping Cart page has an edit button, which will redirect the customer back to the Product Detail page for the appropriate product. The Product Detail page can route customers to a Shopping Cart page, or directly to the Checkout Page. After you add a Shopping Cart page and a Checkout Page; use the arrow routings to set the View Cart button to redirect to the Shopping Cart page, and set the Buy Now buttons to redirect to the Checkout Page. You can also add Buy Now buttons to your Catalog pages and route them to your Checkout Page using the arrow routings. # Coupons You can create coupons for your funnel either within your Funnel or within the campaign on the CRM side.\ \ To add a coupon from Checkout Champ, navigate to your funnel list, open the funnel, and then open edit the funnel’s settings. <figure><img src="/files/K6wEW0js535SEwC6sy5t" alt=""><figcaption></figcaption></figure> Use the coupon module to create a coupon for use within this campaign.\ \ To route to Checkout Champ with automatic coupon application, include the couponCode parameter in the URL. Coupons can be passed with or without products. Coupons must first be entered on the funnel campaign to be recognized. It is not required to pass couponCode to a checkout page. couponCode can also be passed to any page prior to checkout, and will be maintained until the cardholder completes checkout. Examples: <https://checkout.myfunnelsite.com/checkout?products=234:1&couponCode=HALFOFF> <https://checkout.myfunnelsite.com/checkout?couponCode=10OFF> For multiple coupons separate with a comma. <https://checkout.myfunnelsite.com/checkout?couponCode=10OFF,HALFOFF> {% hint style="warning" %} **Publish Required**\ Publish corresponding funnels when a **Default Coupon** is applied to a **campaign** or changed. {% endhint %} # Configure Google Analytics {% hint style="info" %} Google has made users aware of the coming end to Universal Analytics for some time, but the date is fast approaching. As of July 1, 2023, Google's Universal Analytics will stop processing data. It is imperative users migrate to Google Analytics 4 prior to July 1, 2023 as Universal Analytics will stop processing. This is a change in how your Google Analytics operates and changes your Google Analytics ID. Please follow Google's instructions on how to successfully transition to GA4, here: {% endhint %} [Make the switch to Google Analytics 4](https://support.google.com/analytics/answer/10759417?sjid=5195701527558849427-NA) Step 1. Sign in to Google, using a gmail account. Navigate to <https://analytics.google.com/> Step 2. Sign up for Google Analytics by clicking the button on the screen. <figure><img src="/files/WyGQkSRQr8VnFHButYZI" alt=""><figcaption></figcaption></figure> Step 3. Create a new account by filling in all the fields. Click "Get Tracking ID" and then accept the Terms of Service. <figure><img src="/files/226KHYliP14dDbZKp4dv" alt=""><figcaption></figcaption></figure> Step 4. Copy the Tracking ID <figure><img src="/files/S7SiieYM8yHUd7CAfvPr" alt=""><figcaption></figcaption></figure> Step 5. Follow steps here to place the Tracking ID on your site -Click edit on the campaign you are configuring. <figure><img src="/files/O4zmzztLyuZzSbR79V3W" alt=""><figcaption></figcaption></figure> Step 6. Consider handling duplicate conversions in Google Analytics. Setup a tag with transaction\_id. <figure><img src="/files/Q0jnkQWXxoJTf0cgTR4U" alt=""><figcaption></figcaption></figure> Step 7. Consider handling duplicate conversions in Google Ads <figure><img src="/files/kpQxiXWStm05VbuLGE2z" alt=""><figcaption></figcaption></figure> NOTE: Some properties will take up to 2 hours before the Real-Time section can be used. # Gateways Add the Gateways you will use on your Funnel. Once Gateways are configured in Checkout Champ CRM they can be added to your Funnel. You can find more details on configuring your Gateways in Checkout Champ CRM here: [Merchant Set Up](/crm/gateway-setup) <figure><img src="/files/ccjwYglgkORepUp7cuDo" alt=""><figcaption></figcaption></figure> You can search for a specific Gateway Account by typing in the search bar as shown above: # Affiliates You can add/remove affiliates from your Checkout Champ funnels by Editing the funnel’s settings and opening the Affiliates section <figure><img src="/files/R6399hfW1VZLTmAQGgmT" alt=""><figcaption></figcaption></figure> When adding or editing an affiliate, you have the option to adjust the Affiliate Title, AffiliateId, Passed Value, and Commissions <figure><img src="/files/lnkJV3dpcwACPTGsOWkR" alt=""><figcaption></figcaption></figure> Please see our [Tracking String article](/crm/crm-setup/affiliate-setup/affiliate-tracking-link-string) for more information on Passed Values To place pixels for your affiliate’s, please view our [Tracking Pixels article](/crm/crm-setup/affiliate-setup/affiliate-pixels) # Everflow Everflow and Checkout Champ work nicely together in a just a few easy steps. There are generally 2 types of Everflow integrations - a direct tracking string to your page OR a dynamic assignment on the page. #### **Direct** <a href="#everflow-direct" id="everflow-direct"></a> Follow these [instructions](https://help.checkoutchamp.com/checkoutchamp-help-desk/plugins/affiliate-systems/everflow-integration). There is no additional work needed on your pages. #### **Assign Transaction ID on the page** <a href="#everflow-assigntransactionidonthepage" id="everflow-assigntransactionidonthepage"></a> Step 1: Dynamically assign the Transaction ID on your page Edit the first page(s) of your funnel. A first page is any page that you will route traffic to from an outside source. Go to the code editor <figure><img src="/files/HawUhTo8X5UVst4PE0dv" alt=""><figcaption></figcaption></figure> Add the below script in the Head section of HTML. * At the top of the script, replace “YOUR-TRACKING-DOMAIN” with your Everflow tracking domain. * At the bottom of the script, replace “YOUR-AFFILIATE-ID” with your CRM affiliateId. If you are passing affId as a parameter to the page, then please remove this line. It is only necessary if affId is not passed to the page. * If you want to learn more about the Everflow SDK, see [here](https://developers.everflow.io/docs/everflow-sdk/). * If affid gets translated to “cc\_custom\_affid” in lines of code below, change line 23’s affiliate value to “cc\_custom\_affid” (excluding quotations) ```javascript <script type="text/javascript" src="https://www.YOUR-TRACKING-DOMAIN.com/scripts/sdk/everflow.js"></script> <script type="text/javascript"> function updateURLParameter(url, param, paramVal){ var newAdditionalURL = ""; var tempArray = url.split("?"); var baseURL = tempArray[0]; var additionalURL = tempArray[1]; var temp = ""; if (additionalURL) { tempArray = additionalURL.split("&"); for (var i=0; i<tempArray.length; i++){ if(tempArray[i].split('=')[0] != param){ newAdditionalURL += temp + tempArray[i]; temp = "&"; } } } var rows_txt = temp + "" + param + "=" + paramVal; return baseURL + "?" + newAdditionalURL + rows_txt; } EF.click({ offer_id: EF.urlParameter('oid'), affiliate_id: EF.urlParameter('affid'), sub1: EF.urlParameter('sub1'), sub2: EF.urlParameter('sub2'), sub3: EF.urlParameter('sub3'), sub4: EF.urlParameter('sub4'), sub5: EF.urlParameter('sub5'), uid: EF.urlParameter('uid'), source_id: EF.urlParameter('source_id'), transaction_id: EF.urlParameter('_ef_transaction_id'), } ).then(function(transactionId){ window.history.replaceState('', '', updateURLParameter(window.location.href, "c1", transactionId)); window.history.replaceState('', '', updateURLParameter(window.location.href, "affId", "YOUR-AFFILIATE-ID")); } ); </script> ``` Step 2: Setup the Postback URL. Follow the “Setting up your Postback URL in CheckoutChamp” steps [here](https://konnektive.atlassian.net/wiki/spaces/CC/pages/2098037680/Everflow+Integration#Setting-up-your-Postback-URL-in-Checkout-Champ). If you are using a direct API integration instead of Checkout Champ, place the script on the page as in Step 1 and then call the Import Click API to save the affiliate values. # Sales Tax Profiles To charge tax on a funnel/campaign, go to the funnel Settings and open the Tax Profiles section. <figure><img src="/files/MzV4xRurdiAnHEsnpqcl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/z4lUKLrvdWTD6ScwiJDF" alt=""><figcaption></figcaption></figure> Specify the **Country**, **State** (optional), and **Tax Rate**. **Include Tax in Final Price** = Include tax in the product prices displayed to customers (such as a VAT). Do not include tax in the campaign product prices. Tax will be automatically added to the prices displayed on live pages. **Exclude Rebills** = Do not charge tax on rebills Customers from that region will be charged the tax amount # Add Ons * [PAAY (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/paay-add-on) * [Route Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/insureship-add-on) * [ShipEngine Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/shipengine-add-on) * [Google Places](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/google-places) * [Fraud Manager with Checkout Champ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/fraud-manager-add-on) * [Facebook Messenger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/facebook-messenger) * [reCAPTCHA Enterprise](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/recaptcha-enterprise) Checkout Champ has integrations with several add on services that you can connect to your funnel. You can find the Add Ons section by editing the funnel’s settings and clicking Add Ons. <figure><img src="/files/k9Q8M4tuTNPe5V8dbZcf" alt=""><figcaption></figcaption></figure> # PAAY Add On Enable PAAY on any Checkout Champ funnel <figure><img src="/files/vinjYwmJ9r33kfLHrWpL" alt="" width="290"><figcaption></figcaption></figure> ### Step 1: Activate the PAAY Plugin to acquire PAAY key <a href="#paay-checkoutchamp-step1-activatepaayplugintoacquirepaaykey" id="paay-checkoutchamp-step1-activatepaayplugintoacquirepaaykey"></a> Follow instructions in [this article](/crm/plugins/authentication/paay) ### Step 2: Add PAAY to a funnel <a href="#paay-checkoutchamp-step2-navigatetofunnelwithincheckoutchampandeditthefunnelssettings" id="paay-checkoutchamp-step2-navigatetofunnelwithincheckoutchampandeditthefunnelssettings"></a> Edit the funnel on which to enable PAAY. Go to Settings > Add Ons > PAAY 3DS <figure><img src="/files/py0BGPlRzqO6B46cwteW" alt="" width="563"><figcaption></figcaption></figure> ### Step 3: Configuration <a href="#paay-checkoutchamp-step3-enterpaayapikey-acquiredfrompaayplugininstep1" id="paay-checkoutchamp-step3-enterpaayapikey-acquiredfrompaayplugininstep1"></a> **Use server-side authentication -** NEW! Secure your API Key and take advantage of fraud-protection rate limits. This option moves much of the authentication to the Checkout Champ servers. All of the options in this article are available. 1. Enabled - **Choose the PAAY plugin** - Select the plugin from Step 1 2. Disabled - **API Key (3DS)** - Enter the key obtained in Step 1 **Page Option** - Choose to authenticate Offers, Upsells, or both Offers and Upsells **Minimum Amount** - Optional. Set the minimum amount on which to authenticate with PAAY. This is entered in the campaign currency. Any orders below this amount will be skipped. **Show Challenges** - Choose No Challenge, Challenge if Required, or Force Challenge. If Force Challenge is chosen then there is also an option to enter a minimum amount to force the challenge. Orders below the minimum amount will present a challenge only if required by the issuing bank. **Merchant Name** - Optional. Enter a value to be passed on authentication. Discuss this with PAAY as it may require enablement on your PAAY account. **Requestor Name** - Optional. Enter a value to be passed on authentication. Discuss this with PAAY as it may require enablement on your PAAY account. **Data Share BINs** - Optional. Enter one or more card bins on which to authenticate with Data Only, separated by commas. To use Data Only on an entire card brand, enter "visa" or "mastercard" (without the quotes). Here is an example: **555555,520082,visa**. Data Only is priced the same as 3DS authentication. Data Only can be differentiated from 3DS on CRM reporting filters. <details> <summary>Data Only</summary> "Data Only" is the term used to describe a transaction flow in which a merchant shares only the data of a transaction with the Issuer through the 3DS rail, without presenting a challenge to the cardholder. This can be influenced by the level of challenges requested by an Issuer and has the following characteristics: * Always frictionless. The Issuer cannot enforce a challenge for the cardholder in a Data Only transaction. * There is no liability shift, meaning the merchant remains responsible for potential fraud in this case, not the issuer. * Depending on the risk of the transaction (e.g., isolated lower-value transactions) or for issuers with a low level of frictionless or technical issues in the authentication process, higher approval rates can be achieved. More information aids in decision-making. For more details on the official documentation, please review the card networks [Mastercard](https://www.mastercard.com/content/dam/public/mastercardcom/globalrisk/pdf/Data-Only-Infographic.pdf) and [VISA](https://secure.visaonline.com/home) (enter "visa secure documentation"). </details> **Fetch Rebill Parameters** - Obtain a set of authentication parameters the first rebill on recurring products (both offers and upsells) **Reject non-authenticate cards** - Do not allow checkout if card is not authenticated **Authenticated Card Types** - Choose the card types to authenticate ### Step 4: Publish <a href="#paay-checkoutchamp-step4-enterthepageeditorforapage-save-andthenpublishthefunnel" id="paay-checkoutchamp-step4-enterthepageeditorforapage-save-andthenpublishthefunnel"></a> ### Step 5: Rate Limiting If using server-side authentication, take advantage of rate limits to reduce exposure to bot attacks on the checkout page. You have control of the rate limits. Login to CRM Click your username in the top right corner Select Account Select Fraud Protection tab Enter the desired PAAY non-authentication limit for a single campaign. If a campaign reaches this limit then all traffic for that campaign will be blocked until the fraudulent activity is reduced below the entered limit. [Fraud Protection](/crm/crm-account-settings/fraud-protection) # InsureShip Add On We offer the option to add insurance to your checkout cart, providing additional protection and peace of mind to your customers while simultaneously increasing your profitability during checkout {% hint style="info" %} This article operates in conjunction with the [InsureShip Plugin](/crm/plugins/shipping-insurance/insureship). That article provides detailed information on billing and claims. {% endhint %} {% hint style="info" %} Learn more about InsureShip at [https://www.insureship.com](https://www.insureship.com/) {% endhint %} ### Setup Edit any funnel Go to **Settings > Add Ons > InsureShip** <figure><img src="/files/JWKzsRiKY5aX9vRavtFf" alt="" width="563"><figcaption></figcaption></figure> Enable the Add On <figure><img src="/files/TqBxQyXHuuj4hxNuSrrW" alt="" width="563"><figcaption></figcaption></figure> **Opt In** - by default the shipping insurance widget is enabled (opt-out). Choose this option make the widget disabled by default and require an opt-in from the customer. **Insure Rebills** - automatically add InsureShip to each scheduled rebill. There is no option to manually add InsureShip to rebills. It must be automatic. **Widget Placement** * Above checkout button - place the widget above the first checkout button found on the page * Below shopping cart total - place the widget just below the grandTotal element in the shopping cart * Custom - review the instructions on the page. This requires coding an element and custom class onto the checkout page. It provides ultimate flexibility. **Rate Per Transaction** - the rate paid on your CheckoutChamp monthly subscription per shipment. You will be charge only for orders shipped. Orders cancelled prior to shipment are not billable. Save Publish the funnel ### Additional Setup Enabling InsureShip automatically creates a campaign product. Go to **Settings > Offers** to manage the product. The default price to your customers is 3.00 (in the campaign currency). Adjust product name, price, and other details as needed. ### Checkout Pages The InsureShip widget is automatically placed on checkout pages according to the **Widget Placement** setting. The widget displays only when there are shippable products in the cart. The price is dynamic from the InsureShip campaign product. There are no edits needed on the page, unless using the Custom option for Widget Placement. <figure><img src="/files/CST6LtTXzkxYNKWwdSp8" alt="" width="563"><figcaption></figcaption></figure> # ShipEngine Add On Step 1: Go [here ](/crm/plugins/data-sources/shipengine)to enable the ShipEngine Plugin **Add ShipEngine to a Funnel** Step 2: Go to Funnel Add Ons in funnel settings. Enable the ShipEngine checkbox. Press Save & Continue. <figure><img src="/files/0MfaCc6IMKAhjRvAGCZN" alt=""><figcaption></figcaption></figure> Step 3: Edit the checkout page. If there is not already a Ship Profile element on the page, go to Forms and select the Ship Profile element. Drag it to the page and style as needed. Verify the element has Name = Ship Profile. Save the page. Exit the page builder. <figure><img src="/files/e9TFU8VVztVE6VdS5Mz6" alt=""><figcaption></figcaption></figure> Step 4: Publish the funnel Step 5: Go to the live checkout page. A Ship-To address is required to retrieve shipping rates from ShipEngine. If you have gathered that information on a previous lead or checkout page, then the Ship Profile element should be populated with the available Ship Engine rates. If Ship-To address information is on the same page as the Ship Profile element, the Ship Engine rates will not populate until that address information is entered. When a full (and valid) Ship-To address is entered, a request will be sent to ShipEngine to get the rates. That can take a few seconds. The Ship Profile element will be populated with the available Ship Engine rates. Rates will be fetched anew from ShipEngine if the products or quantities or address change. Step 6: The selected rate is included in the final order amount. The selected carrier and method are automatically passed to fulfillment when the order is submitted for checkout. **Troubleshooting** * If the ship rates are not retrieved from ShipEngine, verify the following items: * ShipEngine plugin credentials are correct * Ship-To address information is entered at checkout. This can be on a lead or checkout page prior to the page on which Shipping is selected. * The selected products must have a weight. ShipEngine will not return shipping rates without a weight. * The selection element must have Name = Ship Profile. Verify this in the page builder. * ShipEngine requires that Ship-To information is entered on the checkout page or a page prior to checkout. It will not work with a checkout where the Ship To address is retrieved from another source, such as PayPal. # Google Places Google Places can be added to your funnel to offer address suggestions to the customer as they begin to enter their address into the form. The address will then autocomplete/autofill if the customer clicks on one of the suggested addresses.\ \ To add this to your funnel, edit the funnel’s settings and open the Add Ons section. <figure><img src="/files/Ll00LR9jyhqrL6hONt9s" alt=""><figcaption></figcaption></figure> Enter the API Key provided by Google and then Save and Publish your funnel. # Fraud Manager Add On {% hint style="info" %} When Fraud Manager is added to your account and assigned to a funnel's campaign, the Device Data Collector pixel is automatically added to the funnel checkout page. This pixel sends device information to Fraud Manager/Kount for improved screening. {% endhint %} *** ### Step 1 - Enable the plugin <a href="#fraudmanagerwithcheckoutchamp-step1-enabletheplugin" id="fraudmanagerwithcheckoutchamp-step1-enabletheplugin"></a> Go to the CRM side of your account and navigate to Admin → Plugins → Fraud Services <figure><img src="/files/mxAHYdqdaIbc4tmKebV8" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Fraud Manager has a cost of $0.10 per screening. The screening only occurs on the initial sale for the customer. Any upsells or rebills will not be screened again since the customer already passed screening on the initial sale. {% endhint %} ### Step 2 - Add Fraud Manager to the campaign <a href="#fraudmanagerwithcheckoutchamp-step2-addfraudmanagertothecampaign" id="fraudmanagerwithcheckoutchamp-step2-addfraudmanagertothecampaign"></a> Adding the plugin will apply Fraud Manager to all your current campaigns. If you create a campaign after adding the plugin you can navigate to CRM → Campaigns and edit the campaign your funnel is tied to and enable the “Screen with Fraud Manager?” option. The default Fraud Manager rules will always be applied to the campaigns/funnels but you can [create your own rules](https://help.checkoutchamp.com/crm/plugins/fraud-services/fraud-manager#fraudmanager-creatingrulesets) to apply to the campaign as well. <figure><img src="/files/Jd8UbYExjojmWO6FJvkX" alt=""><figcaption></figcaption></figure> If you are unsure of the campaign the funnel is tied to, you can locate this inside the settings of the funnel within Checkout Champ ### Step 3 - Go to Checkout Champ and edit the funnel tied to the campaign <a href="#fraudmanagerwithcheckoutchamp-step3-gotocheckoutchampandeditthefunneltiedtothecampaign" id="fraudmanagerwithcheckoutchamp-step3-gotocheckoutchampandeditthefunneltiedtothecampaign"></a> <figure><img src="/files/9PHWjUw3iPr4NbVqrgP6" alt=""><figcaption></figcaption></figure> ### Step 4 - Confirm Fraud Manager is enabled within the funnel's Add-On settings <a href="#fraudmanagerwithcheckoutchamp-step4-addfraudmanagerinfunnelsettingsthenpublishthefunnel" id="fraudmanagerwithcheckoutchamp-step4-addfraudmanagerinfunnelsettingsthenpublishthefunnel"></a> <figure><img src="/files/Db06rno4wxeUgsr0oKSn" alt=""><figcaption></figcaption></figure> *** ### Rulesets and Reporting <a href="#fraudmanagerwithcheckoutchamp-creatingrulesets" id="fraudmanagerwithcheckoutchamp-creatingrulesets"></a> Please view our [Fraud Manager plugin article](/crm/plugins/fraud-services/fraud-manager) for more information on the tolerance thresholds and Fraud Manager reporting. # Facebook Messenger Facebook Messenger can be added to your site in 2 ways: 1. Enable the chat plugin on all pages 2. Enable the Messenger checkbox on checkout pages ### Chat Plugin <a href="#facebookmessenger-chatplugin" id="facebookmessenger-chatplugin"></a> The Facebook Chat Plugin can be automatically placed on all pages on your site. * Go to **Settings > Add Ons** * Enter your **Facebook Page ID** and check **Enable chat plugin** * Press Save & Continue * Publish The Chat Plugin is setup at Facebook at Page Settings > Messaging ### Messenger Checkbox <a href="#facebookmessenger-messengercheckbox" id="facebookmessenger-messengercheckbox"></a> The Facebook Messenger Checkbox can be placed on your checkout page. This allows consumers to opt in to communication with you. * Go to **Settings > Add Ons** * Enter your **Facebook Messenger App ID** and your **Facebook Page ID.** * Press Save & Continue. * Edit your checkout page(s) * Add a Form checkbox to the page. Position it where you want the Messenger checkbox to be (your checkbox will be replaced by the FB box). Give it the name “messenger”. * Save the page * Exit the page builder * Publish # reCAPTCHA Enterprise reCAPTCHA is a seamless fraud detection service from Google that stops bots and other automated attacks while approving valid users. reCAPTCHA Enterprise is supported on Lead page forms, Checkout and Login pages. ### Enable reCAPTCHA Enterprise at Google <a href="#recaptchaenterprise-enablerecaptchaenterpriseatgoogle" id="recaptchaenterprise-enablerecaptchaenterpriseatgoogle"></a> There is much documentation on Google to enable reCAPTCHA Enterprise. This is a short list of steps to accomplish this. Your Google account may require additional steps. 1. Sign into your Google account 2. Create a Google Cloud Provider (GCP) account 3. Go to <https://console.cloud.google.com/home> 4. Create a project for reCAPTCHA services and enable billing for the project 5. Create an enterprise key for the project 1. <https://console.cloud.google.com/security/recaptcha> 2. Set **Platform** = Website. Then enter one or more domains. Your funnel domain should be included. 3. It is acceptable to use a testing key. Do remember to change to a live key once testing is complete. 4. Choose to **Use checkbox challenge**. Both options are supported. 5. If using the challenge, choose any **Challenge Security** 6. Save 6. Search for "API and Services" on the top search bar or visit the "API and Services" page (you may also find this under “Explore and enable APIs”). 1. Select Credentials 2. Select **+ Create Credentials** > **API Key** 3. Edit the key * choose to restrict the key to your funnel domain (Website) - this is optional * choose to enter an API restriction to your project from step 4 - this is optional ### Enable reCAPTCHA Enterprise on a funnel <a href="#recaptchaenterprise-enablerecaptchaenterpriseonafunnel" id="recaptchaenterprise-enablerecaptchaenterpriseonafunnel"></a> reCAPTCHA will automatically be added to Lead page forms, Login and Checkout pages. Go to **Add Ons** in funnel Settings. Select the **Google reCAPTCHA Enterprise** tab. <figure><img src="/files/tFfpFskI4ij6jSPVwemc" alt=""><figcaption></figcaption></figure> **Project ID** = the project id from step 4 (this is the id, not the project name) **Site Key** = the key from step 5 **Assessment Key** = the key from step 6 **Failure Redirect URL** = the full URL to redirect an unapproved user. This page can be in the current funnel, in another funnel, or any other site. This must begin with [https://.](broken://pages/qKDCLSUeMHkRH7JqPWFj) **Type** = Choose *Challenge* if you chose *Use checkbox challenge* in step 5c. Otherwise choose *Hidden*. The selection here must match step 5c for your site to function correctly. **Minimum Assessment Threshold Score** = Choose the risk assessment level. Google has much information on this. One is here <https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment-website#:~:text=Interpret%20scores,-The%20scoring%20system&text=reCAPTCHA%20Enterprise%20has%2011%20levels,risk%20and%20might%20be%20fraudulent.> **Trigger Event** = Choose to trigger the assessment on page load or page submit. A checkout page will trigger on submit only if the checkout is a card. Any other checkout (PayPal, ApplePay, Klarna, etc) will not trigger the assessment since the next step requires user interaction. Press **Save & Continue** Publish the funnel after all updates # SMTP Accounts SMTP Accounts send transactional emails to your customers. These trigger-based emails include Order Confirmation, Fulfillment Shipped, PreBilling, and many others. To connect your SMTP account, go to **SMTP Accounts** in your funnels Settings and click **Add New Account**. <figure><img src="/files/pipSYz3JUNHUeK5eYz1e" alt=""><figcaption></figcaption></figure> Fill out the connection information as provided by your SMTP service provider. Be sure to click Save. It is recommended to send a test message to confirm the connection. Additional details about Google SMTP and SendGrid SMTP are [here](/crm/plugins/smtp-maintenance/smtp-maintenance-setup) <figure><img src="/files/yTrjm63YQoX2YbpUmAgK" alt="" width="526"><figcaption></figcaption></figure> Once the SMTP is connected, navigate to your campaign on the CRM side of your account to [configure the emails](https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/auto-responder-setup) that get sent to your customers. <figure><img src="/files/4xtCLdAgLgLtjuR0kDSs" alt=""><figcaption></figcaption></figure> Use the following guide to configure your emails once in the CRM: [Auto-Responder Setup](https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/auto-responder-setup) # Fulfillment Houses Here you can add, view or edit fulfillment houses which are added to your account. <figure><img src="/files/et9SsmSeuYLdq8rkZx2K" alt=""><figcaption></figcaption></figure> After you add the fulfillment house you can go into your [Offers and Upsells](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/offers-and-upsells) to change the fulfillment house tied to the product. # Ship Profiles Here you can add, view, edit, or remove different Shipping Profiles for your customers to choose from. You can also use shipping profiles to apply pricing rules, such as free shipping if subtotal is greater than $X <figure><img src="/files/uVHqHveI5fMRD7Ash3Ns" alt=""><figcaption></figcaption></figure> This example will only charge $5 for shipping for the entire order, but if the subtotal is greater than $50 then shipping will be free. <figure><img src="/files/ZyYxtRWBJKhoFiXJ598W" alt=""><figcaption></figcaption></figure> # Fonts * [Google Fonts](#fonts-googlefonts) * [Adding Your Own Fonts](#fonts-addingyourownfonts) ### Google Fonts <a href="#fonts-googlefonts" id="fonts-googlefonts"></a> You can specify the fonts you would like available to your Funnel Pages by selecting the Fonts option. <figure><img src="/files/vFdlC81zXJ3OUBUojgPY" alt=""><figcaption></figcaption></figure> Once Saved, selected fonts will be available as an option on text elements when designing your pages. <figure><img src="/files/UGeAr3goXA4hgfPLhGiH" alt=""><figcaption></figcaption></figure> ### Adding Your Own Fonts <a href="#fonts-addingyourownfonts" id="fonts-addingyourownfonts"></a> You may also choose to add your own , True Type, Open Type, and WOFF font files to use in the builder. Follow these steps:<br> 1. Upload your font file using the Maintenance file upload section of your funnel settings. <figure><img src="/files/e8H3SpiQ8ocwADUbrHRb" alt=""><figcaption></figcaption></figure> 2. Once the funnel is published, your font will be located at <https://yourfunneldomain.com/your-font.woff> (“yourfunneldomain.com” and “your-font.woff” will be the actual names of your funnel domain and font file). 3. In the builder, you will need to edit your page and add the new font via the @font-face and a new CSS style. This will allow you to use your new font wherever needed on that page. To add the font to the CSS, add the following information to the CSS editor: .your-font-class{\ font-family:'Your-font-Name', Helvetica, serif;\ }\ @font-face{\ font-family:'YourFontName';\ src:url(<https://yourfunneldomain.com/your-font.woff>) format('woff');\ font-weight:normal;\ font-style:normal;\ }\ \ For open Type fonts, the format would be:\ format('opentype');\ \ For True Type fonts, the format would be:\ format('truetype'); <figure><img src="/files/p5xTFrwsw84KCeuziuzU" alt=""><figcaption></figcaption></figure> 4. Once your new font file is added to the CSS with a corresponding class name, you will use that new class name to use that font wherever needed on that page. Select the text where the new font is needed and add the new class name in the settings menu. Once in th element's Settings menu, go to "Classes" and type the font class name in the area provided. Click "Enter". <figure><img src="/files/9cdmpibXS0qkO2PAPpYG" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GYNedwA4k72IHUkb1gnx" alt=""><figcaption></figcaption></figure> # Payments Checkout Champ offers multiple alternatives for configuring your gateways. See each article below to add on these payment methods. * [Affirm](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/affirm) * [Afterpay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/afterpay) * [Amazon Pay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/amazon-pay) * [Apple Pay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/apple-pay) * [Google Pay ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/google-pay) * [PayPal Seamless Checkout](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal) * [Klarna](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/klarna) * [Sezzle](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sezzle) * [Multi-Pay Rebills](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/multi-pay-rebills) * [BitPay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bitpay) * [Bancontact](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bancontact) * [BLIK ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/blik) * [iDEAL](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/ideal) * [Boleto](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/boleto) * [SEPA](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sepa) * [P24](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/p24) * Trustly * [TWINT](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/twint) # Affirm ### Step 1: Login and navigate to the funnel on which to add Affirm <a href="#affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm" id="affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm"></a> <figure><img src="/files/wvYQLE1XqMyul0JHJyUz" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#affirm-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="affirm-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/aDBXXLMnoxHZIKiPytci" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#affirm-checkoutchamp-step3-openthepaymentssection" id="affirm-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/RhQHaLv65mG9aFl1hdgC" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new Affirm gateway credentials <a href="#affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials" id="affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials"></a> <figure><img src="/files/wYxyCh168Ugph87yXKHV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UsDRNpHJYfzH1l7y1gvw" alt=""><figcaption></figcaption></figure> 1. Enter a **Gateway Title** to easily identify the Affirm account. Then add the **public\_api\_key** and **private\_api\_key** for your Affirm account. It is suggested to keep the **Limits** blank due to the fact that rates are established with each merchant though their agreement with Affirm. 2. Be sure to enter a **Mid**# and an accurate **Descriptor** value. The **Descriptor** is sent to Affirm during transaction processing. *** ### Step 5: Save and Continue <a href="#affirm-checkoutchamp-step5-saveandcontinue" id="affirm-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Affirm button <a href="#affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton" id="affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton"></a> <figure><img src="/files/3TVHGWwg10b20bV4Q0z0" alt=""><figcaption></figcaption></figure> ### Button <a href="#affirm-checkoutchamp-button" id="affirm-checkoutchamp-button"></a> <figure><img src="/files/nZLfb7IEcYLAQ0OobsGQ" alt=""><figcaption></figcaption></figure> #### Step 6-1: It is recommended you place this button either directly below the Shopping Cart Element’s Grand Total field or after the customer input fields on the checkout page since the customer will have to input their address information before being able to checkout with Affirm. <a href="#affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem" id="affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem"></a> #### Step 6-2: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/ZMoua1vDlIFSBir8yZLT" alt=""><figcaption></figcaption></figure> ### Radio <a href="#affirm-checkoutchamp-radio" id="affirm-checkoutchamp-radio"></a> <figure><img src="/files/HMbNv1s1te2nTLzhq7pM" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/GdVq4R6TuKZ5gsrn55P9" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#affirm-checkoutchamp-step7-savethepage.exitthepagebuilder" id="affirm-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: Choose the Affirm button on the arrow leaving the checkout page. <a href="#affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage" id="affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage"></a> {% hint style="danger" %} If you offer affirm as a payment option you must route the customer directly to the thank you page after purchase. They do not allow for upsell processing. {% endhint %} <figure><img src="/files/mcO5gPeKGtHvdqfwiei0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#affirm-checkoutchamp-step9-publish.youredoneandreadytotest" id="affirm-checkoutchamp-step9-publish.youredoneandreadytotest"></a> <figure><img src="/files/Q0pa52qy95i70oflps70" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Afterpay {% hint style="warning" %} **Disclaimers:** * ***No card details are stored for merchants using Afterpay’s Payment Gateway*** * ***Afterpay will only work for one-time purchases and will NOT support one-click upsells nor recurring billing/subscriptions*** * ***You can enable the “Multi-Pay Rebills” setting which will require a credit card on the checkout pages to accept one-click upsells and recurring payment*** * **Customer info fields are required for this alternate payment method.** {% endhint %} {% hint style="info" %} Afterpay is supported on Afterpay, Adyen V2, and Stripe V2 gateways {% endhint %} {% hint style="info" %} **Clearpay** is also supported. Please follow the same documentation using Afterpay and drag on the Clearpay button instead of the Afterpay button on step 6. {% endhint %} <figure><img src="/files/bIq0bCNxy2nAJMnevcI1" alt=""><figcaption></figcaption></figure> *** ### Step 1: Login and navigate to the funnel you’d like to add Afterpay to <a href="#afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto" id="afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto"></a> <figure><img src="/files/jjhmZONMsVsvtUZlKJDE" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/zDj6zQDEPcvrB2Qe1JMp" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#afterpay-checkoutchamp-step3-openthepaymentssection" id="afterpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/TQ3km7U2IHEpUmfvs6JA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add or select existing Afterpay or Adyen V2 or Stripe V2 gateway credentials <a href="#afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials" id="afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials"></a> <figure><img src="/files/LKqIyldT9DUHIRB8ynhv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EQwQ3yv2HIDPiYs1wMFV" alt=""><figcaption></figcaption></figure> {% hint style="info" %} * Enter a **Title** to easily identify your Afterpay account. * **Merchant\_ID** - Found on the footer of the Home page inside your Afterpay account. * **Secret\_Key** - This is emailed to the account owner upon the account's creation. If you are having difficulties finding this you can reach out to your Business Development Manager or you can reach Afterpay Merchant Support: <https://developers.afterpay.com/afterpay-online/docs/merchant-support> * Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#afterpay-checkoutchamp-step5-saveandcontinue" id="afterpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Afterpay button <a href="#afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton" id="afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton"></a> <figure><img src="/files/tiY8CuIZ1gATBTNjRJCg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/eCoqpv2y4JVlKnY8ihSo" alt=""><figcaption></figcaption></figure> *** #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn" id="afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn"></a> <figure><img src="/files/kXcljmNE3o0v31mjSbfV" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page. Exit the page builder. <a href="#afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/z6lSUjhpko3fZWT3ZBkU" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Afterpay button. <a href="#afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton" id="afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton"></a> <figure><img src="/files/eCh66Xu3QBz58QRmo2Kk" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#afterpay-checkoutchamp-step9-publish.youredoneandreadytotest" id="afterpay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # Amazon Pay ### Step 1: Login and navigate to the funnel on which to add Amazon Pay <a href="#amazonpay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddamazonpay" id="amazonpay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddamazonpay"></a> <figure><img src="/files/n6npYKOADbAqSUU8cDtZ" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#amazonpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="amazonpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/LVamMbTZQdCXCueYEc5Z" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#amazonpay-checkoutchamp-step3-openthepaymentssection" id="amazonpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/d876nLJBAVll1rlc333q" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add Amazon Pay credentials <a href="#amazonpay-checkoutchamp-step4-addamazonpaycredentials" id="amazonpay-checkoutchamp-step4-addamazonpaycredentials"></a> <figure><img src="/files/jwTD3xpYW6JoH1QWwUb5" alt=""><figcaption></figcaption></figure> {% hint style="info" %} * Select or add an Amazon Pay merchant account. * Client ID, Seller ID, and Access Key values can be found in the **Amazon SellerCentral Portal** by logging into <https://sellercentral.amazon.com/> and going to Integration → MWS Access Key. * The **Enable Recurring** checkbox determines whether to use Amazon billing agreements to enable recurring purchases. If checked, the customer will be required to check the “Use my selected payment method for future purchases and payments to this merchant” box in the Amazon-generated consent widget to complete the purchase. If unchecked, the order will be processed as a one-time payment. {% endhint %} <figure><img src="/files/WXqp5AV3HxVCvEWzqA44" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#amazonpay-checkoutchamp-step5-saveandcontinue" id="amazonpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Amazon Pay button <a href="#amazonpay-checkoutchamp-step6-editcheckoutpageandaddamazonpaybutton" id="amazonpay-checkoutchamp-step6-editcheckoutpageandaddamazonpaybutton"></a> You can choose a gold, light, or dark Amazon Pay button. The difference is color only. Add only one button to the page. <figure><img src="/files/5dRvkTcsKzdUbB1DDtwT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8ccS46q2l3tVGKrt0EPu" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page and exit the page builder <a href="#amazonpay-checkoutchamp-step7-savethepageandexitthepagebuilder" id="amazonpay-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/3MCHLQFz6eem43XJ8175" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Amazon Pay button for navigation. <a href="#amazonpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheamazonpaybuttonfornavigation" id="amazonpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheamazonpaybuttonfornavigation"></a> <figure><img src="/files/ZmPFaDCjrguxtKcGhOPv" alt=""><figcaption></figcaption></figure> ### Step 9: Publish the funnel. You’re done and ready to test! <a href="#amazonpay-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest" id="amazonpay-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/kwM7ArIRYgqxGXFHoKiu" alt=""><figcaption></figcaption></figure> *** ## Creating Amazon Pay App And Adding Your Domain <a href="#amazonpay-checkoutchamp-creatingamazonpayappandaddingyourdomain" id="amazonpay-checkoutchamp-creatingamazonpayappandaddingyourdomain"></a> 1. Log in to <https://sellercentral.amazon.com> 2. Go to **Integration → Integration Central** 3. Go to **Manage client ID/store ID(s)** section at the bottom of the page and click “**Create new client ID/store ID**” or click “**View client ID/store ID(s)**” and “**Edit**” to update existing app. 4. Add “**<https://funnels-build.Checkout> Champ.com**“ and “**<https://funnels.Checkout> Champ.com**“ or your custom funnel domain to **JavaScript origins** and **return URLs** and create or update. Upon clicking the Amazon Pay button on your checkout page, you will get the message “We’re sorry The payment method that you chose isn\['t available for this purchase. Please choose another. Integration error summary” in the login popup window if your funnel domain is not added to your Amazon Pay client ID configuration. *** ## Transaction Flow <a href="#amazonpay-checkoutchamp-transactionflow" id="amazonpay-checkoutchamp-transactionflow"></a> ### The Customer will click the Amazon-generated Amazon Pay button <a href="#amazonpay-checkoutchamp-thecustomerwillclicktheamazon-generatedamazonpaybutton" id="amazonpay-checkoutchamp-thecustomerwillclicktheamazon-generatedamazonpaybutton"></a> <figure><img src="/files/nh80GVXPKPFAt5HXxnxF" alt=""><figcaption></figcaption></figure> ### A window will popup for the customer to sign into Amazon <a href="#amazonpay-checkoutchamp-awindowwillpopupforthecustomertosignintoamazon" id="amazonpay-checkoutchamp-awindowwillpopupforthecustomertosignintoamazon"></a> <figure><img src="/files/AXUiBzBzvuyRkWSpHK6W" alt=""><figcaption></figcaption></figure> ### The customer will return to your checkout page, select shipping address and payment method from the Amazon-generated widgets, and click the Amazon Pay button to complete the purchase. <a href="#amazonpay-checkoutchamp-thecustomerwillreturntoyourcheckoutpage-selectshippingaddressandpaymentmetho" id="amazonpay-checkoutchamp-thecustomerwillreturntoyourcheckoutpage-selectshippingaddressandpaymentmetho"></a> <figure><img src="/files/blBHe2MulzCv1sAPrIAd" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8KPaBithxyM6vlkjq9a8" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Apple Pay Use these instructions for Apple Pay processing on CheckoutChamp hosted pages {% hint style="danger" %} **Not all gateways support Apple Pay. Apple Pay is supported on Acquired3DS, AdyenV2, Airwallex, Authorize.netV2, Bambora, cardstream, Celerispay, CheckoutV2, EasyPay Direct, eMerchantPay, Fluid Pay, Gala Technology, Merchant Warrior, MerchantConnect, MerchantConnectV2, Mollie, NMI, NomuPay, Payarc, PaysafeV2, Priority, Solid, SquareV2, SquareV2, Stripe, Surgeify, Swipen, TotalApps, Truevo, Trust Payments, Vantiv, VantivV2, Verifi, Whitelabel Payments, WorldlineV2, Worldnet, and Worldpay.** Fluid Pay, NMI, Stripe, Adyen, Airwallex, Checkout.com, Payarc, and Trust Payments offer a special onboarding workflow. See the section below specific to those gateways. {% endhint %} {% hint style="warning" %} Apple Pay is generally one-time use. As of November 14th, 2025, Rebills and 1-click upsells are supported on AdyenV2, Airwallex, eMerchantPay, Fluid Pay, Merchant Warrior, Payarc, Stripe, Checkout.com, and Trust Payments. NMI supports rebills and 1-click upsells on some processors. It must be used in conjunction with the customer vault functionality. Confirm with your gateway and test thoroughly before starting live traffic. {% endhint %} {% hint style="info" %} ***The Apple Pay button ONLY displays on live pages if the customer's Apple Pay wallet is configured AND the device supports Apple Pay (Mac or iPhone with touch ID).*** {% endhint %} *** ### Use an existing Apple Pay Merchant ID? {% hint style="info" %} You can use an existing Apple Pay Merchant ID if: * The Merchant ID is from your own Apple Developer account * The Merchant ID was created for you by your gateway The Apple Pay Merchant ID always begins with **merchant.** {% endhint %} #### Update your gateway with your existing Apple Pay Merchant ID 1. Login to [crm.checkoutchamp.com](http://crm.checkoutchamp.com/). Go to Gateways > Gateway List > edit the gateway on which to transact Apple Pay. *Note: Not all gateways support Apple Pay. See the list at the top of this article.* 2. Under the **Apple Pay** section, enable the **Use an existing Apple Pay Merchant ID?** option and enter your Apple Pay Merchant ID in the **Existing Apple Pay Merchant ID** field. <figure><img src="/files/6mVJmKkqsUOwiLZJklCx" alt=""><figcaption><p>Use an existing Apple Pay Merchant ID</p></figcaption></figure> 3. Click the Update button to update the gateway. <figure><img src="/files/J6bW0fEMP99a7iL6b38P" alt=""><figcaption><p>The Success Message After Updating Your Gateway</p></figcaption></figure> The Apple Pay section will now show your uploaded Apple Pay Merchant ID. <figure><img src="/files/nIM2YdnrJQ8MJL58uvO9" alt=""><figcaption><p>Example Enabled Apple Pay Merchant ID</p></figcaption></figure> Proceed to [Step 4](#step-4-register-apple-pay-domains). *** ### Use an Apple Pay Merchant ID generated by CheckoutChamp {% hint style="danger" %} **You do not need your own Apple Developer account for this process!** The Apple Merchant ID used with your gateway will be created by and maintained by CheckoutChamp. {% endhint %} *** #### Fluid Pay, NMI, Stripe, Adyen, Airwallex, Checkout.com, Payarc, and Trust Payments These gateways do not require a certSigningRequest file. Proceed to [Step 4](#step-4-register-apple-pay-domains). Using one of these gateways also allows for selection of an ATRI profile on your funnel. Placing multiple of these gateways into an ATRI profile or cascade will allow routing and cascades for Apple Pay. See [Step 7](#step-8-enter-apple-pay-details). *** #### Other Gateways {% hint style="warning" %} **Payments cannot be processed without a valid Payment Processing Certificate from your payment processor.** \ The **Payment Processing Certificate** is a file obtained from your gateway that usually ends with a **.certSigningRequest** or **.csr** file extension. You will need to follow this guide to obtain the file from your gateway (see [Step 1](#step-1-obtain-payment-processing-certificate)) and upload this file to CheckoutChamp using the **Upload Certificate** button under the Apple Pay section on the gateway edit page in the CRM (see [Step 2](#step-2-load-certificate-into-checkoutchamp)). CheckoutChamp will upload this file to Apple, and Apple will use the public key from the certificate to encrypt Apple Pay tokens during checkout. Your gateway will then use the private key from the certificate to decrypt the Apple Pay token in order to process the payment. That is why certificates are gateway specific, and the same certificate cannot be used across gateways. \ Some gateways require that a **.cer** file be uploaded back to them. This is a file that is generated by Apple that can be downloaded via the **Download Apple File** button on the gateway edit page in the CRM after CheckoutChamp has completed on-boarding of the certificate and enabled the gateway for Apple Pay (see [Step 3](#step-3-upload-apple-pay-file-back-to-gateway)). {% endhint %} {% hint style="warning" %} **Please Note: Your Gateway’s Payment Processing Certificate **<mark style="color:orange;">**EXPIRES every 25 months**</mark>**. You will need to generate and upload a NEW certificate to your CheckoutChamp gateway prior to the expiration date.** {% endhint %} *** ### Step 1: Obtain Payment Processing Certificate <a href="#step-1-obtain-payment-processing-certificate" id="step-1-obtain-payment-processing-certificate"></a> Obtain an Apple Pay Payment Processing Certificate (.certSigningRequest file) from your gateway. If your gateway requires that you provide an Apple Pay Merchant ID to obtain a certificate, copy the **Pending Apple Pay Merchant ID** from the gateway edit page in the CRM. <figure><img src="/files/4USFXGnh7FRVnsjdXR5U" alt="" width="410"><figcaption></figcaption></figure> {% tabs fullWidth="true" %} {% tab title="Authorize.net" %} * Log in to the Authorize.net portal - <https://login.authorize.net/> * Select **Account** from the main toolbar. * Choose **Digital Payment Solutions** from the menu on the left. * Click **Apple Pay**. * Go to the gateway edit page for your Authorize.net gateway inside of the CRM and click the copy button next to the **Pending Apple Pay Merchant ID**. * Fill in the Pending Apple Pay Merchant ID copied from the CRM in the Apple Merchant ID Field. * Click the **Generate Apple CSR** button. <https://support.authorize.net/knowledgebase/Knowledgearticle/?code=000001505> {% endtab %} {% tab title="Airwallex" %} <mark style="color:red;">**NO NOT USE THESE STEPS FOR AIRWALLEX**</mark>. This is a legacy workflow and is retained here for reference only. Any new Airwallex gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. Inside of Airwallex: * Go to **Payments > Settings**. * Click **Manage** next to the Apple Pay row. * Click the **Upload Certificate** in the iOS certificates section. * Click **Download CSR file**. * A .certificateSigningRequest file will download. Keep that page open and in a new tab go to the gateway edit page in the CRM of your Airwallex gateway. From there: * Click the **Upload Certificate** button in the Apple Pay section and upload the **.certificateSigningRequest** file downloaded from Airwallex. * Wait for CheckoutChamp to board this certificate onto Apple Pay. This may take some time. You will be notified by email when it is complete. * Once on-boarding has been completed in CheckoutChamp, return to the gateway edit page and click **Download Apple File**. * A **.cer** file will download. Return to the iOS certificates page in Airwallex. From there: * Click **Select file** under the Upload your certificate file step. * Select the **.cer** file downloaded from the gateway edit page in the CRM. * Click **Upload**. {% embed url="<https://www.airwallex.com/docs/payments__global__apple-pay__enable-apple-pay-via-web-application__apple-pay-for-ios>" %} Step 1 is relevant from this help doc. {% endembed %} {% endtab %} {% tab title="NMI" %} * <mark style="color:red;">**NO NOT USE THESE STEPS FOR NMI**</mark>. This is a legacy workflow and is retained here for reference only. Any new NMI gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. * Go to the gateway edit page for your NMI gateway inside of the CRM and click the copy button next to the **Pending Apple Pay Merchant ID**. * In the NMI portal, go to **Options -> Apple Pay** and choose the **App** tab. <https://secure.nmi.com/merchants/options.applepay.v2.php?Action=ApplePay&subaction=SetupApp> <figure><img src="/files/9Bx4FK8qgEPN9tEEprox" alt=""><figcaption></figcaption></figure> * Fill in the Pending Apple Pay Merchant ID copied from the CRM in the Apple Pay Merchant ID field. * Click **Generate Certificate Signing Request**. * The Gateway.certSigningRequest file will automatically download. {% endtab %} {% tab title="Stripe" %} <mark style="color:red;">**NO NOT USE THESE STEPS FOR STRIPE**</mark>. This is a legacy workflow and is retained here for reference only. Any new Stripe gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. Stripe may require a new application * In Stripe, go to **Settings > Business settings > Payments methods > Apple Pay > Configure > iOS certificates > Add new application**. * Click **Add new application** on the iOS certificates panel. * There will be a popup asking to download a CSR file. Click **Continue**. A **.certSigningRequest** file will download. Keep that page open and in a new tab go to the gateway edit page in the CRM of your Stripe gateway. From there: * Click the **Upload Certificate** button in the Apple Pay section and upload the .certificateSigningRequest file downloaded from Stripe. * Wait for CheckoutChamp to board this certificate onto Apple Pay. This may take some time. You will be notified by email when it is complete. * Once on-boarding has been completed in CheckoutChamp, return to the gateway edit page and click **Download Apple File**. * A **.cer** file will download. Return to the iOS certificates new application page in Stripe. From there: * Upload the **.cer** file downloaded from the gateway edit page in the CRM. <https://docs.stripe.com/apple-pay?platform=ios#csr> {% endtab %} {% endtabs %} *** ### Step 2: Load Certificate into CheckoutChamp <a href="#step-2-load-certificate-into-checkoutchamp" id="step-2-load-certificate-into-checkoutchamp"></a> Login to [crm.checkoutchamp.com](http://crm.checkoutchamp.com/). Go to Gateways > Gateway List > edit the gateway on which to transact Apple Pay. *Note: Not all gateways support Apple Pay. See the list at the top of this article.* Click the green **Certificate** button on the right side and upload the certSigningRequest file. {% hint style="warning" %} Be sure the file matches the gateway (e.g., a Stripe file is valid only on a Stripe gateway). {% endhint %} <figure><img src="/files/ZIvH5Bsfi1Ktq2wu7f9L" alt="" width="406"><figcaption></figcaption></figure> The gateway certificate will be automatically boarded onto Apple Pay and the gateway enabled for Apple Pay. If successful, the edit page will refresh with the enabled Apple Pay Merchant ID displayed. You will be notified by email and CRM notification that the gateway has been successfully enabled for Apple Pay. Proceed to [Step 3](#step-3-upload-apple-pay-file-back-to-gateway). Otherwise, the page will refresh, and the name of the uploaded file will be displayed. There is a button to remove the file and a button to upload a new certificate. Use these buttons if a file was uploaded in error. <figure><img src="/files/KmdUnDR89yh0TK18JpiL" alt="" width="408"><figcaption></figcaption></figure> Please review these [gateway instructions for obtaining a payment processing certificate](#step-1-obtain-payment-processing-certificate). If the certificate is already in use at another Apple Developer account, then you could remove the file and follow these [instructions to use an existing Apple Pay Merchant ID](#use-an-existing-apple-pay-merchant-id). *** ### Step 3: Upload Apple Pay file back to gateway <a href="#step-3-upload-apple-pay-file-back-to-gateway" id="step-3-upload-apple-pay-file-back-to-gateway"></a> Step 2 is complete when Apple Pay is enabled on the CheckoutChamp gateway. Your payment gateway may require an Apple Pay Certificate File (.cer) be uploaded for their verification. Use the **Apple Pay File** button to download the file. <figure><img src="/files/eGjLgXgzEQ4GRWQ53Hvq" alt="" width="410"><figcaption></figcaption></figure> *** ### Step 4: Navigate to each funnel on which to add Apple Pay <a href="#step-4-register-apple-pay-domains" id="step-4-register-apple-pay-domains"></a> <figure><img src="/files/yRJuw7wuYV8ALd803dox" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 5: Click the gear button on the top left to open the funnel settings <a href="#step-6-click-the-gear-button-on-the-top-left-to-open-the-funnel-settings" id="step-6-click-the-gear-button-on-the-top-left-to-open-the-funnel-settings"></a> <figure><img src="/files/dcK69wX3XDInllomBB9J" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 6: Open the Payments section <a href="#applepay-checkoutchamp-step8-saveandcontinue" id="applepay-checkoutchamp-step8-saveandcontinue"></a> <figure><img src="/files/fDZ5Wl8Xy17BSkFa4YQr" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 7: Enter Apple Pay details <a href="#step-8-enter-apple-pay-details" id="step-8-enter-apple-pay-details"></a> Enter these details and Save * **Gateway**: Choose any gateway that has an Apple Pay merchant id. ATRI profiles are also allowed, if they contain one or more of the required gateways noted earlier in this article. * **Partner Merchant Identifier**: automatically filled in with the Apple Pay merchant id * **Merchant Name**: Customizable merchant name to display to customers while authorizing payment. * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" * **Country**: Country to use for each Apple Pay Session * **Require Address**: choose to require address entry on the checkout page prior to launching Apple Pay <figure><img src="/files/fdpf96WRiXKTT2AGYZlo" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 8: Edit Checkout page and add Apple Pay button <a href="#applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton" id="applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton"></a> <figure><img src="/files/MWi0rz7z7wvYbxcZUt3U" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/XAG7G8XoZJStdflG4Gcq" alt="" width="563"><figcaption></figcaption></figure> #### Step 8-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> <figure><img src="/files/AMDNZtBrrThuoN8fUpPg" alt="" width="288"><figcaption></figcaption></figure> #### An Apple Pay button on a published page will be visible only on Apple devices, and its appearance will follow Apple Pay button CSS styling. <a href="#applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara" id="applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara"></a> <figure><img src="/files/eO5XHu8R5S8HXdNDeYy9" alt="" width="350"><figcaption><p><strong>Apple Pay Buttons as shown in the page builder</strong></p></figcaption></figure> <figure><img src="/files/moriQNwDrkg9HVkDuTSn" alt="" width="563"><figcaption><p><strong>Apple Pay Buttons as shown on published checkout page on Apple devices</strong></p></figcaption></figure> *** ### Step 9: Save the page and exit the page builder. <a href="#applepay-checkoutchamp-step11-savethepageandexitthepagebuilder" id="applepay-checkoutchamp-step11-savethepageandexitthepagebuilder"></a> <figure><img src="/files/wpY7OGWi7xQ1Lhn53VA5" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 10: On the arrow leaving the checkout page, choose the Apple Pay button for navigation. <a href="#applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation" id="applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation"></a> <figure><img src="/files/taxKGjFn0CPXWrl81bGM" alt="" width="466"><figcaption></figcaption></figure> *** ### Step 11: Upsell pages <a href="#applepay-checkoutchamp-step13-upsellpages" id="applepay-checkoutchamp-step13-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Apple Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have an Apple Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on upsell pages instead of an Apple button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Apple Pay or non-Apple Pay based on the checkout. Apple Pay will redirect the consumer to Apple to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have an Apple button on upsell pages.** Place one or more standard buttons AND one or more Apple Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Apple Pay. Pressing the Apple Pay buttons will redirect the consumer to Apple to complete the upsell. When the live page loads the Apple Pay buttons are removed if the checkout was not Apple Pay. The standard buttons will submit the upsell. *** ### Step 12: Publish the funnel. You’re done and ready to test! <a href="#applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest" id="applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/4WOuYALNmZqgS90hTOIi" alt="" width="563"><figcaption></figcaption></figure> ***Apply Pay checkout is available only on Apple devices. Apple Pay buttons on a live page will only display on Apple devices.*** <https://support.apple.com/en-us/HT208531> # Legacy Apple Pay Setup (Apple Pay Plugin) {% hint style="danger" %} **Not all gateways support Apple Pay. Apple Pay is supported on Acquired3DS, Adyen, Authorize.netV2, Bambora, cardstream, Celerispay, CheckoutV2, Easy Pay Direct, Gala Technology, Merchant Warrior, MerchantConnect, MerchantConnectV2, NMI, NomuPay, PaysafeV2, Priority, SquareV2, SquareV2, StripeV2, Surgeify, Swipen, TotalApps, Truevo, Vantiv, VantivV2, Verifi, Whitelabel Payments, WorldlineV2, Worldpay.** {% endhint %} {% hint style="danger" %} **This Apple Pay setup method should only be used if you are using your own Apple Pay Developer Account with the Apple Pay plugin.** {% endhint %} {% hint style="warning" %} **Apple Pay setup requires successful configuration of your Apple Pay Certificates, Identifiers & Profiles in your Apple Developer account. You can find more information on how to properly configure your Apple Pay account on the Apple side in the Apple Developer docs:** [**Configure Apple Pay**](https://developer.apple.com/help/account/configure-app-capabilities/configure-apple-pay) {% endhint %} {% hint style="warning" %} **Payments cannot be processed without a valid Payment Processing Certificate from your Gateway. You will upload your Gateway’s Payment Processing Certificate (a “csr” file with a .certSigningRequest file extension) to your Apple Developer account.** {% endhint %} {% hint style="warning" %} **Please Note: Your Gateway’s Payment Processing Certificate **<mark style="color:orange;">**EXPIRES every 25 months**</mark>**. You will need to generate and upload a NEW certificate to your Apple Developer account prior to the expiration date.** {% endhint %} {% hint style="info" %} ***The button ONLY displays if customer's Apple Pay wallet is configured AND device supports Apple Pay (mac or iphone with touch ID).*** {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to add Apple Pay <a href="#applepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddapplepay" id="applepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddapplepay"></a> <figure><img src="/files/POL4K3dsVFuvMMgVq90L" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#applepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="applepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/t0VD5eEp4gumihgk7XgR" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#applepay-checkoutchamp-step3-openthepaymentssection" id="applepay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/rWElE5lZD24v3KtDXzQI" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 4: Choose an existing Apple Pay plugin / Merchant ID configuration or click the plus sign to create a new one. <a href="#applepay-checkoutchamp-step4-chooseanexistingapplepayplugin-merchantidconfigurationorclicktheplussig" id="applepay-checkoutchamp-step4-chooseanexistingapplepayplugin-merchantidconfigurationorclicktheplussig"></a> <figure><img src="/files/hqLcSTm7FZmiAVklF6cz" alt="" width="494"><figcaption></figcaption></figure> {% hint style="info" %} ***If you click the plus sign to create a new plugin, you will need to copy and paste the credentials detailed in Step 5.*** {% endhint %} *** ### Step 5: Add the Apple Pay Merchant credentials <a href="#applepay-checkoutchamp-step5-addtheapplepaymerchantcredentials" id="applepay-checkoutchamp-step5-addtheapplepaymerchantcredentials"></a> <figure><img src="/files/uJwoq6JqXu4C8ny0yLGg" alt="" width="563"><figcaption></figcaption></figure> **merchantIdentifier**: * Your Apple Pay **Merchant Identifier** * Can be found on your Apple Developer Account at <https://developer.apple.com/account/resources/identifiers/list/merchant> **Download your Merchant Identity Certificate and its Private Key** <figure><img src="/files/KaEXok729e59PgpR4fqs" alt="" width="563"><figcaption></figcaption></figure> * To download your Merchant Identity Certificate and its Private Key, first open Keychain Access. * Navigate to the “Certificates” section. * Highlight both the certificate and the key (down arrow). * Right click. * Export 2 items. * File format Personal Information Exchange (.p12) * Convert the .p12 file to PEM format * Launch the terminal on your Mac. * Change directory to the folder where you have saved the .p12 file. * Run the following openssl pkcs12 command to generate a .pem file: * openssl pkcs12 -in pushcert.p12 -out pushcert.pem -nodes -clcerts **merchantCert**: * Your Apple Pay **Merchant Identity Certificate** * As noted above, this must be downloaded from your Apple Account and converted to PEM format. * Open your new PEM file in a text editor, like Notepad. Copy the contents of the text file and paste into the “merchantCert” box. * Pasted text must include everything from “-----BEGIN CERTIFICATE-----” to “-----END CERTIFICATE-----”. **certPrivateKey**: * The **private key** of your Merchant Identity Certificate * This must be converted to PEM format along with your downloaded Apple Pay Merchant Identity Certificate * Open your new PEM file in a text editor, like Notepad. Copy the contents of the text file and paste into the “certPrivateKey” box * Pasted text must include everything from “-----BEGIN PRIVATE KEY-----” to “-----END PRIVATE KEY-----”. **displayName**: * Default merchant name to display to the customer while authorizing payment * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" *** ### Step 6: Save and Continue <a href="#applepay-checkoutchamp-step6-saveandcontinue" id="applepay-checkoutchamp-step6-saveandcontinue"></a> *** ### Step 7: Configure Apple Pay funnel settings. <a href="#applepay-checkoutchamp-step7-configureapplepayfunnelsettings" id="applepay-checkoutchamp-step7-configureapplepayfunnelsettings"></a> <figure><img src="/files/ARlguFXffcldt7396q9Y" alt="" width="494"><figcaption></figcaption></figure> * **Gateway**: Gateway on which to process a transaction the with Apple Pay token. Gateway is optional. Not entering a gateway will process the transaction on the gateway assigned to the product purchased. Do ensure the gateway is in the supported list at the top of this document. Also ensure you have uploaded a valid Payment Processing Certificate from your Gateway in your Apple Developer account. * **Plugin**: Apple Pay plugin / Merchant ID configuration settings to use to create Apple Payment Sessions. This is required. * **Merchant Name**: Customizable funnel merchant name to display to the customer while authorizing payment. If not entered, the session will default to the plugin settings displayName. * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" * **Country**: Country to use for Apple Pay Session * You will upload **Domain File** in Step 9. *** ### Step 8: Save and Continue <a href="#applepay-checkoutchamp-step8-saveandcontinue" id="applepay-checkoutchamp-step8-saveandcontinue"></a> *** ### Step 9: Upload Apple’s Domain Verification File and verify your domain on your Apple account <a href="#applepay-checkoutchamp-step9-uploadapplesdomainverificationfileandverifyyourdomainonyourappleaccount" id="applepay-checkoutchamp-step9-uploadapplesdomainverificationfileandverifyyourdomainonyourappleaccount"></a> 1. Go to <https://developer.apple.com/account/resources/identifiers/list/merchant> and select the Merchant ID that you are using with this funnel. 2. On the Edit or Configure Merchant ID page, go to Merchant Domains section and click Add Domain. 3. Enter your funnel domain and save. 4. Click Download and download the apple-developer-merchantid-domain-association txt file. 5. On your funnel Payments settings, click Choose File next to the Domain File label. 6. Select your downloaded verification text file and click Open. 7. Publish the funnel. This will upload the file to the .well-known folder on your funnel. 8. Click Verify back on your Apple Merchant Domain page. {% hint style="danger" %} When using Apple Pay in multiple funnels published to the same domain, you will need to upload the file to a single funnel and publish that funnel as the default funnel. {% endhint %} {% hint style="info" %} ***If integrating with Stripe and verification returns a 404 error from Stripe, you may need to submit a Checkout Champ support ticket to have our development team manually remove the “.txt” file extension from the uploaded file.*** ***Likewise, submit a Checkout Champ support ticket in the event an incorrect Domain File is uploaded, or an existing file needs to be replaced.*** {% endhint %} *** ### Step 10: Edit Checkout page and add Apple Pay button <a href="#applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton" id="applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton"></a> <figure><img src="/files/7HffDIJSP3supyMsm3XZ" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/tn42JT1rHnocVYsvl2sf" alt="" width="563"><figcaption></figcaption></figure> #### Step 10-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> <figure><img src="/files/HAC6gtFTC3MYfXFpCSQn" alt="" width="288"><figcaption></figcaption></figure> #### An Apple Pay button on a published page will be visible only on Apple devices, and its appearance will follow Apple Pay button CSS styling. <a href="#applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara" id="applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara"></a> <figure><img src="/files/fHGmeS55TTFMRKq9bynX" alt="" width="350"><figcaption><p>Apple Pay buttons as shown in the page builder</p></figcaption></figure> <figure><img src="/files/W9pXC5tTIGZUCUK3WY7R" alt="" width="563"><figcaption><p><strong>Apple Pay Buttons as shown on published checkout page on Apple devices.</strong></p></figcaption></figure> *** ### Step 11: Save the page and exit the page builder. <a href="#applepay-checkoutchamp-step11-savethepageandexitthepagebuilder" id="applepay-checkoutchamp-step11-savethepageandexitthepagebuilder"></a> <figure><img src="/files/ot0Ux6GEzBerL6ZcqtC8" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 12: On the arrow leaving the checkout page, choose the Apple Pay button for navigation. <a href="#applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation" id="applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation"></a> <figure><img src="/files/RqNAxK7pCNfpOUKoMHH1" alt="" width="466"><figcaption></figcaption></figure> *** ### Step 13: Upsell pages <a href="#applepay-checkoutchamp-step13-upsellpages" id="applepay-checkoutchamp-step13-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Apple Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have an Apple Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on upsell pages instead of an Apple button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Apple Pay or non-Apple Pay based on the checkout. Apple Pay will redirect the consumer to Apple to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have an Apple button on upsell pages.** Place one or more standard buttons AND one or more Apple Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Apple Pay. Pressing the Apple Pay buttons will redirect the consumer to Apple to complete the upsell. When the live page loads the Apple Pay buttons are removed if the checkout was not Apple Pay. The standard buttons will submit the upsell. *** ### Step 14: Publish the funnel. You’re done and ready to test! <a href="#applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest" id="applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/j2mduMSg7LZvAUdwD5Fy" alt="" width="563"><figcaption></figcaption></figure> ***Apply Pay checkout is available only on Apple devices. Apple Pay buttons on a live page will only display on Apple devices.*** <https://support.apple.com/en-us/HT208531> # Multi-Pay Rebills If enabled, a credit card will be required on your checkout page during third-party multi-pay checkout. The card can then be used for rebills and upsells. This option works with Affirm, Afterpay, Klarna, and Sezzle. Example: You want the customer to be able to choose to pay for the initial one-time offer in multiple payments with Afterpay and also start a recurring subscription that will be charged via credit card. A credit card will be required and validated before processing the order at Afterpay. If the Afterpay payment is successful, then a recurring subscription will be processed via credit card. {% hint style="info" %} This is also the method to offer upsells along with Multi-Pay checkout. The card will be used for the upsells. {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to enable Multi-Pay Rebills. <a href="#multi-payrebills-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoenablemulti-payrebills" id="multi-payrebills-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoenablemulti-payrebills"></a> <figure><img src="/files/3vkkJE5SkFESahdklJbu" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#multi-payrebills-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="multi-payrebills-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/nbBtHqD3QaFObcqnPK2G" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#multi-payrebills-checkoutchamp-step3-openthepaymentssection" id="multi-payrebills-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/IICnZ0XGfmGCt02Ys85q" alt=""><figcaption></figcaption></figure> *** ### Step 4: Check Enable checkbox under Multi-Pay Rebills. <a href="#multi-payrebills-checkoutchamp-step4-checkenablecheckboxundermulti-payrebills" id="multi-payrebills-checkoutchamp-step4-checkenablecheckboxundermulti-payrebills"></a> <figure><img src="/files/eeBbpWcdA3Fd2RWtJ8HA" alt=""><figcaption></figcaption></figure> *** ### Step 5: Click the Edit button next to the Multi-Pay Rebills checkbox. <a href="#multi-payrebills-checkoutchamp-step5-clicktheeditbuttonnexttothemulti-payrebillscheckbox" id="multi-payrebills-checkoutchamp-step5-clicktheeditbuttonnexttothemulti-payrebillscheckbox"></a> <figure><img src="/files/bEUnOSDiO9bVyRwtXbfz" alt=""><figcaption></figcaption></figure> *** ### Step 6: Click Create Product Configuration. <a href="#multi-payrebills-checkoutchamp-step6-clickcreateproductconfiguration" id="multi-payrebills-checkoutchamp-step6-clickcreateproductconfiguration"></a> <figure><img src="/files/AOgUIPdqP5TIH6oiQzJV" alt=""><figcaption></figcaption></figure> *** ### Step 7: Select the Base Product, Multi-Pay Product, and Rebill Product (optional) and Save and Continue. <a href="#multi-payrebills-checkoutchamp-step7-selectthebaseproduct-multi-payproduct-andrebillproduct-optional" id="multi-payrebills-checkoutchamp-step7-selectthebaseproduct-multi-payproduct-andrebillproduct-optional"></a> <figure><img src="/files/00HmvAxIKDxdpUap2bFJ" alt=""><figcaption></figcaption></figure> **Base Product**: The product that will trigger the multi-pay rebill process. This product must be in the cart or on the checkout button. **Multi-Pay Product**: The one-time product that will be billed using the multi-pay gateway. This can be the same product as **Base Product**. **Rebill Product**: The recurring product that will be charged in credit card rebills. This is optional. Not setting a rebill product will still allow the credit card to be used on upsells. This must be a different product than **Base Product** and **Multi-Pay Product**. *** ### Step 8: Close the Multi-Pay Product Configuration window and click Save & Continue on the Payments window. <a href="#multi-payrebills-checkoutchamp-step8-closethemulti-payproductconfigurationwindowandclicksave-and-con" id="multi-payrebills-checkoutchamp-step8-closethemulti-payproductconfigurationwindowandclicksave-and-con"></a> <figure><img src="/files/4hvU1sOOLIgUaca7vum4" alt=""><figcaption></figcaption></figure> *** ### Step 9: Edit and save your checkout page and links as needed to have both a credit card input and the button of the multi-pay gateway (Affirm, Afterpay, Klarna, Sezzle) in the same parent element. <a href="#multi-payrebills-checkoutchamp-step9-editandsaveyourcheckoutpageandlinksasneededtohavebothacreditcar" id="multi-payrebills-checkoutchamp-step9-editandsaveyourcheckoutpageandlinksasneededtohavebothacreditcar"></a> <figure><img src="/files/0EEkOQy7qkmjePhtrOWH" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#multi-payrebills-checkoutchamp-step9-publish.youredoneandreadytotest" id="multi-payrebills-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # BitPay {% hint style="warning" %} **Disclamers:** * ***BitPay does not support rebills*** * ***BitPay does not support an Auth/Capture model***<br> * ***Upsells are supported on BitPay. However the process requires the consumer to repeat the entire checkout flow with their BitPay wallet. 1-click upsells are not possible with cryptocurrency.***<br> * **Customer info fields are required for this alternate payment method.** {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add BitPay to <a href="#bitpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddbitpayto" id="bitpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddbitpayto"></a> <figure><img src="/files/vhVeycxQ3E2Jt5vJ18O0" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#bitpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="bitpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/fmhEGfVfRYRl3ItbAEAi" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#bitpay-checkoutchamp-step3-openthepaymentssection" id="bitpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/1ANoV0AsbDzlKBHbHX9G" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new BitPay gateway credentials <a href="#bitpay-checkoutchamp-step4-addnewbitpaygatewaycredentials" id="bitpay-checkoutchamp-step4-addnewbitpaygatewaycredentials"></a> <figure><img src="/files/PUXGyfc49Lc9RL7wzYTN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/CPxmzDDtVc2OrPOdf7IT" alt=""><figcaption></figcaption></figure> * Enter **token** from your BitPay account * Login to BitPay Account > Payment Tools > API Tokens (Under the Integration Resources) * Click “Add New Token” * Enter your token label * Do not check "Require Authentication" * Click "Add Token" *** ### Step 5: Save and Continue <a href="#bitpay-checkoutchamp-step5-saveandcontinue" id="bitpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and drag the BitPay button to the page <a href="#bitpay-checkoutchamp-step6-editcheckoutpageanddragthebitpaybuttontothepage" id="bitpay-checkoutchamp-step6-editcheckoutpageanddragthebitpaybuttontothepage"></a> <figure><img src="/files/ySwPWdkoJLBr6VBukqb5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/WL2Hg8vOFtXoCGPTD4qB" alt=""><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#bitpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="bitpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/STs2oyRyrYJZP4l8ssFS" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page. Exit the page builder. <a href="#bitpay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="bitpay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/EkPzi1BKfE9mYGgr7dIG" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the BitPay button. <a href="#bitpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebitpaybutton" id="bitpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebitpaybutton"></a> <figure><img src="/files/tiyxVaVYcW60xt7KCSpF" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#bitpay-checkoutchamp-step9-publish.youredoneandreadytotest" id="bitpay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # Bancontact {% hint style="info" %} Bancontact is supported through Stripe V2, Checkout.com, Adyen V2, Airwallex, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add Bancontact <a href="#bancontact-checkoutchamp-step1-loginandnavigatetothefunneltoaddbancontact" id="bancontact-checkoutchamp-step1-loginandnavigatetothefunneltoaddbancontact"></a> <figure><img src="/files/c6bHgShPG2QtQ0wHQSyp" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#bancontact-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="bancontact-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/Bs1WC3sX2jUuZNsnwcNN" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#bancontact-checkoutchamp-step3-openthepaymentssection" id="bancontact-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/eBsOANlLxPfZSJdAhPwH" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#bancontact-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="bancontact-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Stripe, Checkout.com, Airwallex, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, and NomuPay gateways can be selected here <figure><img src="/files/YsiGNDCyEQTMXTb9xaup" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#bancontact-checkoutchamp-step5-saveandcontinue" id="bancontact-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the Bancontact button <a href="#bancontact-checkoutchamp-step6-editcheckoutpagetoaddthebancontactbutton" id="bancontact-checkoutchamp-step6-editcheckoutpagetoaddthebancontactbutton"></a> <figure><img src="/files/Keafn0vHYrgAW2EStWGA" alt=""><figcaption></figcaption></figure> ### Button <a href="#bancontact-checkoutchamp-button" id="bancontact-checkoutchamp-button"></a> <figure><img src="/files/wOTHxbbd8SePv4uzfkGZ" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#bancontact-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighli" id="bancontact-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighli"></a> ### Radio <a href="#bancontact-checkoutchamp-radio" id="bancontact-checkoutchamp-radio"></a> <figure><img src="/files/UvAn89F3j7FuvwJBWKX6" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#bancontact-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="bancontact-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/OulQSzdePsuTct8sG1Tx" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to BANCONTACT (in all caps). <a href="#bancontact-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_m" id="bancontact-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_m"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#bancontact-checkoutchamp-step7-savethepage.exitthepagebuilder" id="bancontact-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/E1qi80YBBqCS1nurFky0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Bancontact button. <a href="#bancontact-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebancontactbutton" id="bancontact-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebancontactbutton"></a> <figure><img src="/files/M4aFUy0csPKbSAvEi9o9" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#bancontact-checkoutchamp-step9-publish.youredoneandreadytotest" id="bancontact-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # BLIK {% hint style="info" %} BLIK is supported through Stripe, Mollie, and Airwallex gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add BLIK <a href="#giropay-checkoutchamp-step1-loginandnavigatetothefunneltoaddgiropay" id="giropay-checkoutchamp-step1-loginandnavigatetothefunneltoaddgiropay"></a> <figure><img src="/files/lYvRtjG64hB50AeHcjNu" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#giropay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="giropay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/oBXpFCLIVbBF54QmTXgX" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#giropay-checkoutchamp-step3-openthepaymentssection" id="giropay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/HhyokdLBTjLPyaRZY6mo" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#giropay-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="giropay-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * StripeV2, Mollie, and Airwallex gateways can be selected here <figure><img src="/files/xZZc4zFdK0dMLiqM6NgL" alt="" width="375"><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#giropay-checkoutchamp-step5-saveandcontinue" id="giropay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit the Checkout page and add the BLIK button or radio <a href="#giropay-checkoutchamp-step6-editthecheckoutpageandaddthegiropaybutton" id="giropay-checkoutchamp-step6-editthecheckoutpageandaddthegiropaybutton"></a> <figure><img src="/files/GlVpScQho7LiMCadY4RB" alt="" width="183"><figcaption></figcaption></figure> ### Button <a href="#giropay-checkoutchamp-button" id="giropay-checkoutchamp-button"></a> <figure><img src="/files/VaiLLWYm1Vcj1BvjMeMa" alt="" width="563"><figcaption></figcaption></figure> #### Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#giropay-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlight" id="giropay-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlight"></a> ### Radio <a href="#giropay-checkoutchamp-radio" id="giropay-checkoutchamp-radio"></a> <figure><img src="/files/udBiaPMkH1zJLmGfklg9" alt="" width="563"><figcaption><p>A</p></figcaption></figure> #### Add a form radio button to the page. Design this to your preference. <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> #### Select the radio button. Set the Name to “payment\_method” and Value to "BLIK". <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> <figure><img src="/files/7bSv4kX8IkFAeRws4DWf" alt="" width="297"><figcaption></figcaption></figure> #### This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“ <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate conflicts. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#giropay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="giropay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZriPHZhfFUqagGCkbBVY" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the BLIK button. If using radio or checkbox then choose the standard checkout button. <a href="#giropay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegiropaybutton" id="giropay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegiropaybutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#giropay-checkoutchamp-step9-publish.youredoneandreadytotest" id="giropay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Boleto {% hint style="info" %} Boleto is supported through Stripe V2 and Checkout V2 payment gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add Boleto to <a href="#boleto-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddboletoto" id="boleto-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddboletoto"></a> <figure><img src="/files/v9xd2pS1IfRWOjUSSBB5" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#boleto-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="boleto-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/8iXEKqN0cPEp7nX0RSE3" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#boleto-checkoutchamp-step3-openthepaymentssection" id="boleto-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/p4CepPMXA0XXqrGkFgCm" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add StripeV2 and CheckoutV2 gateway credentials <a href="#boleto-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials" id="boleto-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials"></a> * StripeV2 and CheckoutV2 gateways can be selected here <figure><img src="/files/vYtoEFKht7tL73f3P2BX" alt=""><figcaption></figcaption></figure> {% hint style="info" %} 1. Enter a **Title** to easily identify your Boleto account 2. Add the **public\_key** and **private\_key** obtained from your Boleto account 3. Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#boleto-checkoutchamp-step5-saveandcontinue" id="boleto-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Boleto button <a href="#boleto-checkoutchamp-step6-editcheckoutpageandaddboletobutton" id="boleto-checkoutchamp-step6-editcheckoutpageandaddboletobutton"></a> <figure><img src="/files/nMhaeFZ3v11L4BRqBMWe" alt=""><figcaption></figcaption></figure> ### Button <a href="#boleto-checkoutchamp-button" id="boleto-checkoutchamp-button"></a> <figure><img src="/files/DlmKDJJpxMr4qWmwToOn" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#boleto-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="boleto-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#boleto-checkoutchamp-radio" id="boleto-checkoutchamp-radio"></a> <figure><img src="/files/CS4hFppySMmatn2ps0zu" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#boleto-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="boleto-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/Efyy0OZdb0IPCGWZc1tr" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to “BOLETO“ in all caps. <a href="#boleto-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="boleto-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#boleto-checkoutchamp-step7-savethepage.exitthepagebuilder" id="boleto-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/rk38RywrlV5eBMjyJzGv" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Boleto button. <a href="#boleto-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheboletobutton" id="boleto-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheboletobutton"></a> <figure><img src="/files/mD11TgldGo4USLCtHSaC" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#boleto-checkoutchamp-step9-publish.youredoneandreadytotest" id="boleto-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # EPS {% hint style="info" %} EPS is supported through Stripe V2, Airwallex, eMerchantPay, Mollie, Worldline, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add EPS <a href="#sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort" id="sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort"></a> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> *** ### Step 3: Open the Payments section <a href="#sofort-checkoutchamp-step3-openthepaymentssection" id="sofort-checkoutchamp-step3-openthepaymentssection"></a> *** ### Step 4: Add the payment gateway on which to transact <a href="#sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Select the gateway here here *** ### Step 5: Save and Continue <a href="#sofort-checkoutchamp-step5-saveandcontinue" id="sofort-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the EPS button <a href="#sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton" id="sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton"></a> ### Button <a href="#sofort-checkoutchamp-button" id="sofort-checkoutchamp-button"></a> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#sofort-checkoutchamp-radio" id="sofort-checkoutchamp-radio"></a> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to EPS in all caps. <a href="#sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> Use either all buttons or radios for pay source selection to mitigate any conflicts *** ### Step 7: Save the page. Exit the page builder. <a href="#sofort-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sofort-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: On the arrow leaving the checkout page, choose the EPS button. <a href="#sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton" id="sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sofort-checkoutchamp-step9-publish.youredoneandreadytotest" id="sofort-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Google Pay {% hint style="danger" %} **Not all gateways support Google Pay**. Google Pay is supported on Acquired3DS, Adyen, Airwallex, Authorize.netV2, Braintree, cardstream, Celerispay, CheckoutV2, Easy Pay Direct, Fluid Pay, Fondy, Gala Technology, Merchant Warrior, NMI, NomuPay, Pay.com , Payarc, PaysafeV2, Priority, Revolve3, Solid, SquareV2, StripeV2, Surgeify, Swipen, TotalApps, Truevo, VantivV2, Whitelabel Payments, WorldlineV2, Worldpay. {% endhint %} {% hint style="warning" %} Google Pay is generally one-time use. Rebills and 1-click upsells are supported on AdyenV2, Airwallex, eMerchantPay, NMI, Stripe, CheckoutV2, and Trust Payments. Confirm with your gateway and test thoroughly before starting live traffic. {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to add Google Pay <a href="#googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay" id="googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay"></a> <figure><img src="/files/jvoD14QOIaGEvZnsZy34" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/YrC62eUdod7DLyAPk903" alt="" width="373"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#googlepay-checkoutchamp-step3-openthepaymentssection" id="googlepay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/N5E5xV9EOvK5T9QmqNq7" alt="" width="359"><figcaption></figcaption></figure> *** ### Step 4: Add the Google Pay credentials <a href="#googlepay-checkoutchamp-step4-addthegooglepaycredentials" id="googlepay-checkoutchamp-step4-addthegooglepaycredentials"></a> Select the **Gateway** that you want your Google Pay transactions to run to. Ensure the gateway is in the supported list at the top of this document. Please review the tooltips in the app for a detailed explanation of each credential. <figure><img src="/files/mA9fU2xyDDGbB1ugJtKl" alt="" width="375"><figcaption></figcaption></figure> **Gateway Value** can be found here <https://developers.google.com/pay/api/web/reference/request-objects#gateway> <figure><img src="/files/M0zdEYUZzzPvbiNQYQzA" alt="" width="563"><figcaption><p><strong>searching for NMI on Google's gateway list</strong></p></figcaption></figure> <figure><img src="/files/0PcSHVoEYB7KrjJLfmja" alt="" width="563"><figcaption><p><strong>searching for Stripe on Google's gateway list</strong></p></figcaption></figure> **Gateway Merchant ID** is the Merchant Id provided by your gateway (you may need to reach out to the gateway or merchant provider for this value). It is the same value found on your VAR sheet and should be the same value as entered here on your gateway configuration: <figure><img src="/files/nLNgrHRx7SCN8ydeAwYd" alt="" width="375"><figcaption></figcaption></figure> {% hint style="info" %} Stripe requires entry of a Publishable Key instead of Gateway Merchant Id. This is a long value that starts with pk\_ and is appended with your account ID. Enter pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/\[the accountId from your StripeV2 gateway in Checkout Champ - without the brackets] It should look something like this when fully entered pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/acct\_12345678 {% endhint %} {% hint style="info" %} Google documents are wrong on Fluid Pay. Gateway must be "gatewayprocessing" (without quotes) and gatewayMerchantId must be the public api key from your Fluid Pay portal. {% endhint %} **Merchant ID** is retrieved from your business console <https://pay.google.com/business/console/> Place your page in **Test Mode** to enable testing with Google. Do be sure to uncheck when testing is complete. Click [here ](#googlepay-checkoutchamp-testmodetestmode)for more details on testing. <figure><img src="/files/cd0w9Cb66q5wmB0Vhs18" alt="" width="234"><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#googlepay-checkoutchamp-step5-saveandcontinue" id="googlepay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Google Pay button <a href="#googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton" id="googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton"></a> You can choose a white or black Google Pay button. Do not add both to the page. The difference is color only. <figure><img src="/files/MlG1b5r6ZH2PB0foaQkp" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/g00vYWuinmEfcin63bZO" alt="" width="563"><figcaption></figcaption></figure> #### Step 6-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> #### Step 6-2: Alternatively Google Pay can be launched from the standard page checkout button with use of a payment radio. Drag a form radio button to the page. Set Name=payment\_method, Value=GOOGLEPAY. If the radio is selected on the live checkout page then Google Pay will launch when the page checkout button (or link) is pressed. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> *** ### Step 7: Save the page and exit the page builder. <a href="#googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder" id="googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/PduiyJ6OqcjqPSzSeCun" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Google Pay button for navigation. <a href="#googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation" id="googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation"></a> <figure><img src="/files/CkUMt5bFJTkK5mhTYfOX" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 9: Upsell pages <a href="#googlepay-checkoutchamp-step9-upsellpages" id="googlepay-checkoutchamp-step9-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Google Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have a Google Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on the upsell page instead of a Google button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Google Pay or non-Google Pay based on the checkout. Google Pay will redirect the consumer to Google to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have a Google button on the upsell page.** Place one or more standard buttons AND one or more Google Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Google Pay. Pressing the Google Pay buttons will redirect the consumer to Google to complete the upsell. When the live page loads the Google Pay buttons are removed if the checkout was not Google Pay. The standard buttons will submit the upsell. ### Step 10: Publish the funnel. You’re done and ready to test! <a href="#googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest" id="googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/n3FDbOCQkhfyB1UO9qbZ" alt="" width="563"><figcaption></figcaption></figure> *** ### Test Mode <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a> {% hint style="warning" %} **This section is used for Google to approve your implementation. You must uncheck the Test Mode box and enter your live Merchant ID and Merchant Name once approved.** {% endhint %} {% hint style="info" %} ***In Test Mode a transaction will not go to the gateway for approval. The transaction will automatically approve.*** {% endhint %} Full testing details can be found [here](https://developers.google.com/pay/api/android/guides/resources/test-card-suite) You may need to enable test cards on your Google Pay account. See [here](https://groups.google.com/g/googlepay-test-mode-stub-data). Follow these steps to test Google Pay on CheckoutChamp: 1. Set **Gateway, Gateway Value,** and **Gateway Merchant ID** using instructions in Step 4 2. Set **Merchant ID** to “12345678901234567890” (without the double quotes) 3. Set **Merchant Name** to “Merchant Name” (without the double quotes) 4. Select the **Test Mode** box <figure><img src="/files/o6U2SlbxsWkqTpxvlsev" alt="" width="563"><figcaption></figcaption></figure> Additional Test Mode Notes:<br> Inside of the Google Pay Business Console you will locate your "Merchant ID" After you have joined the Google Group providing access to the test cards and test addresses provided by Google, Google Pay requires the Merchant to create an Integration inside of the Google Pay business console, inside of the "Google Pay API" section. Select "Web Integration". The integration configuration will request for a few inputs. \ First it will request "Your Website", this will be your domain registered into Checkout Champ(whichever domain the Checkout Page is tied to). Second, it will ask "Your Google Pay API integration type"- Select "Gateway" Last request from Google is to supply screenshots of your buyflow/order flow. "Item Selection"- will be your Product Selection page\ "Pre-purchase Screen"- will be your Checkout Page (Important: make sure Google Pay button is visible in your screenshot) "Payment Method Screen"- will be a screenshot of the pop-up of the Google login the consumers will interact with"Google Pay API Payment Screen"- You will need to log into a Google account following selecting the "Google Pay" button on your page, this will show the Test Card Number and Test Address provided by Google, grab this as a screenshot. (Tip: Android won't allow you to take a screenshot of this screen, so take a picture of the screen using another device.) "Post-Purchase Screen"- this will be a screenshot of a Thank you page, Google requires a Google Pay mark on the thank you page in order to approve integration. Feel free to upload this supplied image if you would like: <figure><img src="/files/rBWNMiRrge2z3bgNCDAq" alt=""><figcaption></figcaption></figure> *** ### Style <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a> In the Visualizer settings under **Payments → Google Pay**, the **Button Type** setting updates the Google Pay button text according to the selected option. After selecting a button type, save and publish. <figure><img src="/files/bPrut589XAxDVeZDPEGB" alt=""><figcaption></figcaption></figure> <table><thead><tr><th width="175">Button Type</th><th>Dark</th><th>Light</th></tr></thead><tbody><tr><td>book</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>buy</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>checkout</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>donate</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>order</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>pay</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>plain</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>subscribe</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr></tbody></table> {% hint style="warning" %} The Google Pay brand name must not be translated. Don't create buttons with your own localized text. {% endhint %} {% embed url="<https://developers.google.com/pay/api/web/guides/brand-guidelines#mark>" %} # iDEAL {% hint style="info" %} iDEAL is supported through Stripe V2, Checkout.com, Adyen V2, Celeris, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add iDEAL <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/kufkqs9Kd8j7aEvzBUd5" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#ideal-checkoutchamp-step3-openthepaymentssection" id="ideal-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/oFoxHqtWEvwTXKw1EkYA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Stripe V2, Checkout.com, Adyen V2, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, and NomuPay gateways can be selected here. Press the + button to add a new gateway. <figure><img src="/files/RU4XVOjFYmEIr6DVfu5U" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the iDEAL button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/juXVHcddnZAeMF4HVy2f" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> <figure><img src="/files/0Mm0AuTJq3iRpwpzXpPh" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/jIghZncW62YOg2htFuWF" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZebPiV3bykg9xeeVehL0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the iDEAL button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/pLYKez0gx88IyqCNOZr0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Klarna Klarna is supported through Klarna, Adyen V2, Airwallex, Checkout.com, Cardstream, Mollie, NomuPay, Swipen, Sotpay, Stripe V2, WithReach, and Worldpay V2 payment gateways {% hint style="info" %} SOFORT is now available through Klarna Payments. If you already offer Klarna’s alternative payment options, then you will need to activate the **pay by bank transfer** module in your Klarna payments integration. {% endhint %} {% hint style="info" %} Rebills and 1-click upsells are supported on Klarna, Adyen, and Airwallex. Stripe supports rebills for Klarna, but not 1-click upsells. The other gateways in this article do not offer those features. {% endhint %} {% hint style="warning" %} **Disclaimers:** * **No card details are stored for merchants using Klarna’s Payment Gateway** * **Customer info fields are required for Klarna payment method. Klarna does not return customer information to the page.** {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add Klarna to <a href="#klarna-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddklarnato" id="klarna-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddklarnato"></a> <figure><img src="/files/i9aOuJ0vBrVDmkQ3PYWC" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#klarna-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="klarna-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/DXY1WNaUF93s9QXDX20u" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#klarna-checkoutchamp-step3-openthepaymentssection" id="klarna-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/FmMAZWw01xpWn5zEXlYo" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 4: Add new Klarna gateway credentials <a href="#klarna-checkoutchamp-step4-addnewklarnagatewaycredentials" id="klarna-checkoutchamp-step4-addnewklarnagatewaycredentials"></a> * Klarna, Adyen V2, Airwallex, Cardstream, Checkout.com, Mollie, NomuPay, Swipen, Sotpay, Stripe V2, and Worldpay V2 gateways can be selected here <figure><img src="/files/sgmsyCq5dzsKdOHGT92Q" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/02qLGKAlHLeVb5tOBs1w" alt="" width="563"><figcaption></figcaption></figure> <br> {% hint style="info" %} 1. Enter a **Title** to easily identify your Klarna account 2. Enter the following information specific to Klarna: 3. **Region -** choose your region. Europe, North America, or Oceania. 4. **Username** - Obtained from your Klarna’s Settings > API page 5. **Password** - Obtained from your Klarna API page * You may want to create a new set of API credentials for your CRM connection. Klarna provides a dropdown to view different API Keys/store connections. 6. **Descriptor** - Obtained from your Klarna API page 7. **Mid #** - Obtained from your Klarna API page. Located before the “\_” of the username Click the green **Create Gateway** button to save your changes and create the gateway {% endhint %} {% hint style="info" %} ***For descriptor information please review the*** [***Klarna Merchant Guidelines***](https://docs.klarna.com/guidelines/merchant-assets/#payment-descriptors) ***documentation with Klarna*** {% endhint %} *** ### Step 5: Save and Continue <a href="#klarna-checkoutchamp-step5-saveandcontinue" id="klarna-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add a Klarna button <a href="#klarna-checkoutchamp-step6-editcheckoutpageandaddklarnabutton" id="klarna-checkoutchamp-step6-editcheckoutpageandaddklarnabutton"></a> <figure><img src="/files/ysrhFk5k7akHh1T1eEj5" alt="" width="122"><figcaption></figcaption></figure> ### Button <a href="#klarna-checkoutchamp-button" id="klarna-checkoutchamp-button"></a> <figure><img src="/files/2IbHV4UgI60ZZvrbUhPX" alt="" width="563"><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#klarna-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="klarna-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/WerXZYbUmeg5pAJC1HVu" alt="" width="563"><figcaption></figcaption></figure> *** ### Radio <a href="#klarna-checkoutchamp-radio" id="klarna-checkoutchamp-radio"></a> If you would prefer to have users checkout using the main checkout button, rather than the individual Klarna button, you can use the “payment\_method” radio button. <figure><img src="/files/ZurIgJF0pZfr1yKiEvNg" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#klarna-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="klarna-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/UXzWEOMSq2bSSzrvk1Pt" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#klarna-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="klarna-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#klarna-checkoutchamp-step7-savethepage.exitthepagebuilder" id="klarna-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/HNOcScW2hIsBSxVzZVbY" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Klarna button. <a href="#klarna-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheklarnabutton" id="klarna-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheklarnabutton"></a> <figure><img src="/files/hMrmS4KBrg8meVYkkOkk" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#klarna-checkoutchamp-step9-publish.youredoneandreadytotest" id="klarna-checkoutchamp-step9-publish.youredoneandreadytotest"></a> <figure><img src="/files/hHrngRYiCKjxr9ZMSF1N" alt="" width="563"><figcaption></figcaption></figure> # Link by Stripe Link autofills your customers’ payment information to create an easy and secure checkout experience. {% hint style="success" %} Link enables customers to save their preferred payment methods to their account and access those credentials at any of the hundreds of thousands of Link-enabled businesses. For your business, this means a fast, streamlined, and better-converting checkout experience. {% endhint %} {% hint style="info" %} <https://stripe.com/payments/link> {% endhint %} {% hint style="info" %} This document is for CheckoutChamp hosted pages. If you need to integrate Link on your own hosted pages, install Link onto your checkout page using Stripe instructions and include the following parameters on the [Import Order API](https://apidocs.checkoutchamp.com/#275a54c6-b4b0-414c-819b-7387e9a81f58) call: * prepaidType = STRIPE\_LINK * paySource = PREPAID * forceMerchantId = the Stripe gatewayId in CheckoutChamp * formCardNonce = the Link payment method id {% endhint %} ## Gateway Setup Configure a standard [Stripe gateway](/crm/gateway-setup/gateway-integrations/stripe) ## Funnel Setup Go to any funnel. Settings > Payments > Alternate Payment Methods. Choose the Stripe gateway for Link. Save. <figure><img src="/files/pVGVzmR1GELvhH1nEwny" alt="" width="563"><figcaption></figcaption></figure> ## Checkout Page Setup There are 2 options for checkout page design. Explore carefully to choose the best option for you. Link requires customization of the checkout page. Choose one of our Link checkout page templates to obtain these customizations automatically. Make the modifications manually on all other checkout pages. If Link is not working as expected then first verify each of these requirements is in place on the page. ### Option 1: Stripe is the only card checkout on the page Link can process direct credit cards using its standard web components which are displayed on page load. {% hint style="warning" %} This option is compatible with other payment providers, such as PayPal and Apple Pay, that do not require address entry on the page. Any provider that requires address entry on the page is not compatible with this option. Consider Option 2 below. {% endhint %} 1. Edit a checkout page 2. Drag a Box element onto the page. Give it class **cc-stripe-link-email**. This element replaces the standard email address input. Remove any other email inputs on the page. 3. Remove phone number input from the page 4. Remove all shipping address inputs from the page. Add a Box element in place of shipping inputs. Give it class **cc-stripe-link-shipping**. 5. Remove all billing address inputs from the page. Add a Box element in place of billing inputs. Give it class **cc-stripe-link-billing**. 6. Remove card inputs, payment option elements and all payment buttons on the page. Add a Box element on page in place of card inputs. Give it class **cc-stripe-link-payment**. 7. Replace the standard checkout Submit button with the Link payment button. You may drag on a new Link payment button or simply go to the existing button Settings and change Type to Link. In either case, add the class "cc-stripe-link-submit" to the Link button. 8. Save 9. Exit the page builder 10. On the arrow leaving the checkout page, choose the Link payment button 11. Publish the funnel ### Option 2: Allow card checkouts on non-Stripe gateways If you choose to process direct credit card payments with non-Stripe gateways then Link becomes a checkout option for the consumer. This is similar to Klarna, Apple Pay, Google Pay, etc. This option involves an extra button click for the consumer to choose Link. {% hint style="warning" %} This option is compatible with all other payment providers {% endhint %} {% hint style="warning" %} This option is compatible with PayPal Fastlane. Add the proper classes as defined in Option 2 of [Fastlane instructions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal/fastlane). Some elements will have both Fastlane and Link classes. {% endhint %} 1. Edit a checkout page 2. Place a Link button on the checkout page. Go to Blocks > Buttons > drag Link to the page. 3. Drag a standard button onto the page near the Link button. Add class **cc-stripe-link-cancel** to the button. This button is used to cancel Link checkout. 4. Place a Box element on top of the page near the email address input . Give it class **cc-stripe-link-email**. 5. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-shipping** to the box. 6. Find the billing address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-billing** to the box. 7. Find the card inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-payment** to the box. 8. Add class **cc-stripe-link-hide** to the parent element of email address input, phone number input, shipping inputs, billing inputs, all other payment options and buttons, and any **billShipSame** checkbox. This may be multiple parent elements. Add the class to each. Do not add the class to the parent of the main checkout button or link. 9. Save 10. Exit the page builder 11. On the arrow leaving the checkout page, choose the the standard checkout Submit button 12. Publish the funnel # MobilePay {% hint style="info" %} MobilePay is supported through Stripe V2 and Adyen V2 gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add MobilePay <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings > Payments <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/blYDuC7TrdUMjw7Sif5c" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 3: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Choose the gateway for MobilePay. Press the + button to add a new gateway. <figure><img src="/files/ELxyrVX2AUHKVMwKSniR" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 4: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 5: Edit Checkout page to add the MobilePay button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/XiUx6BuhJJGkEi9kvwnm" alt="" width="563"><figcaption></figcaption></figure> #### Customize button size by clicking on the button and dragging the highlighted corners or use the Settings tab for advanced edits. On the Settings tab, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> #### Add a form radio button to the page. Design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Select the radio button and set Name = payment\_method. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Set the Value of the radio button to MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> <figure><img src="/files/fPQqkilzImzBpva7AI6h" alt=""><figcaption></figcaption></figure> #### <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 6: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 7: On the arrow leaving the checkout page, choose the MobilePay button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/Wbkqp3FbyuUgLoYyAns5" alt=""><figcaption></figcaption></figure> *** ### Step 8: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # P24 {% hint style="info" %} P24 is supported through Stripe V2, Checkout.com, Adyen V2, Airwallex, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, and NomuPay gateways {% endhint %} ### Step 1: Login and navigate to the funnel to add P24 <a href="#p24-checkoutchamp-step1-loginandnavigatetothefunneltoaddp24" id="p24-checkoutchamp-step1-loginandnavigatetothefunneltoaddp24"></a> <figure><img src="/files/AQsdDih2FAqvnMhwQxbs" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#p24-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="p24-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/N4GUt1x0lG1hkAeVbRmC" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#p24-checkoutchamp-step3-openthepaymentssection" id="p24-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/LgJdijl9cx2889o28qO7" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#p24-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="p24-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * StripeV2, CheckoutV2, Airwallex, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, and NomuPay gateways can be selected here <figure><img src="/files/P6M335qDReabO4L6l6X9" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#p24-checkoutchamp-step5-saveandcontinue" id="p24-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add a P24button <a href="#p24-checkoutchamp-step6-editcheckoutpagetoaddthep24button" id="p24-checkoutchamp-step6-editcheckoutpagetoaddthep24button"></a> <figure><img src="/files/uKEKEKyM07ShZS1z9hTk" alt=""><figcaption></figcaption></figure> ### Button <a href="#p24-checkoutchamp-button" id="p24-checkoutchamp-button"></a> <figure><img src="/files/frtyrSLfeK1ogzf1kqKH" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#p24-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedco" id="p24-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedco"></a> ### Radio <a href="#p24-checkoutchamp-radio" id="p24-checkoutchamp-radio"></a> <figure><img src="/files/1Jhm98nYke6FLdlP1gem" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#p24-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="p24-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/IaB8mwmzdl9M6rZ6V6Xp" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#p24-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="p24-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#p24-checkoutchamp-step7-savethepage.exitthepagebuilder" id="p24-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/usY3JQ9VCKHTAsn5jZPA" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the P24 button. <a href="#p24-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethep24button" id="p24-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethep24button"></a> <figure><img src="/files/XSoGCeN7nvPGPlCREifm" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#p24-checkoutchamp-step9-publish.youredoneandreadytotest" id="p24-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # PayPal {% hint style="danger" %} **Authorization trials (such as Hold Trial Charge, Authorize and Void, etc.) are not supported through PayPal Seamless Checkout** {% endhint %} {% hint style="warning" %} **“Security error: Security header is not valid” means you are using sandbox credentials against the live PayPal endpoint.** {% endhint %} {% hint style="info" %} If you are wanting to integrate PayPal on the WithReach gateway, see [here](/crm/gateway-setup/gateway-integrations/withreach) {% endhint %} {% hint style="info" %} Before beginning these steps you must [register your PayPal account](/crm/gateway-setup/gateway-integrations/paypal-commerce-checkout) {% endhint %} ### Step 1: Login and navigate to the funnel on which to add PayPal <a href="#paypalseamlesscheckout-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddpaypal" id="paypalseamlesscheckout-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddpaypal"></a> <figure><img src="/files/Xy0dnkJWG4Nll7kHJ3ZX" alt=""><figcaption></figcaption></figure> *** ### Step 2:Click the Settings button on the top left to open the funnel settings <a href="#paypalseamlesscheckout-checkoutchamp-step2-clickthesettingsbuttononthetoplefttoopenthefunnelsettings" id="paypalseamlesscheckout-checkoutchamp-step2-clickthesettingsbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/w8lO2UlH9lYM3KmBVdYi" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#paypalseamlesscheckout-checkoutchamp-step3-openthepaymentssection" id="paypalseamlesscheckout-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/GzxODMwfDwoRP40Z8j9E" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add a new PayPal gateway or select an existing PayPal gateway <a href="#paypalseamlesscheckout-checkoutchamp-step4-addanewpaypalgatewayorselectanexistingpaypalgateway" id="paypalseamlesscheckout-checkoutchamp-step4-addanewpaypalgatewayorselectanexistingpaypalgateway"></a> *Note: you can also select a WithReach gateway here. FraudNet, Venmo, and Pay Later are not valid on WithReach.* <figure><img src="/files/MpZq2DCglGaErsWVbLuE" alt="" width="563"><figcaption></figcaption></figure> When checked, the Venmo and Buy Now Pay Later buttons automatically appear alongside the PayPal button. {% hint style="info" %} Note: Using the Venmo and Pay Later options require the use of the Pay Pal button. These options will not display when using the Radio “payment\_method” alternative. {% endhint %} {% hint style="danger" %} If using PayPal's SDK the page currency will be sent, please make sure you have 'Send To Gateway' enabled for those currencies in the campaign. (Venmo, Pay Later, Fastlane) {% endhint %} #### Step 4-1: Adding New PayPal account <a href="#paypalseamlesscheckout-checkoutchamp-step4-1-addingnewpaypalaccount" id="paypalseamlesscheckout-checkoutchamp-step4-1-addingnewpaypalaccount"></a> <figure><img src="/files/mO0wCa35DtKMbTK9ZAx0" alt=""><figcaption></figcaption></figure> Enter a **Title** and optionally add **brandName**.<br> {% hint style="info" %} **secure3DS** - Choose this option if accepting credit cards through PayPal and are in need of 3D Secure protection (Strong Customer Authentication) **force3DS** - Check this box to require 3D Secure on all credit card payments. An unchecked box will use 3D Secure only when the issuing bank requires it. **useTestServer** - use sandbox credentials to test the integration. Be sure this is unchecked for live processing. Using sandbox credentials on a live account will result in an error reading “Client Authentication failed”. See [here ](/crm/gateway-setup/gateway-integrations/paypal-commerce-checkout#paypalcommercecheckout-testserverusingthetestserver)for more details. **guestCheckout** - Will redirect the customer to PayPal’s guest checkout page instead of the PayPal login page **referenceTransactions** - Required if using PayPal for upsells and/or recurring billings **sendFulfillmentTrackingNumber** - Send the tracking numbers for orders to PayPal **skipAddressNonShippable** - If there are only digital products on an order then do not require selection of a delivery address at PayPal {% endhint %} Click “Save & Continue” when you are finished with the PayPal configuration. *** ### Step 5: Save and Continue <a href="#paypalseamlesscheckout-checkoutchamp-step5-saveandcontinue" id="paypalseamlesscheckout-checkoutchamp-step5-saveandcontinue"></a> {% hint style="info" %} Before saving, consider if you need to use Venmo, Pay Later, or FraudNet. Check the appropriate box as needed. Venmo and Pay Later are supported only when **referenceTransactions** is disabled OR **referenceTransactions** and **vaultEnabled** are both enabled. You cannot choose different payment types for checkout and upsells. For example, if a checkout is done on Venmo then the upsell must also be on Venmo. Rebills are supported on Venmo when **referenceTransactions** and **vaultEnabled** are both enabled. Rebills are never supported on Pay Later. {% endhint %} <figure><img src="/files/7oN3OjbEPAkkcTma64xX" alt=""><figcaption></figcaption></figure> *** ### Step 6: Edit Checkout page and add PayPal button <a href="#paypalseamlesscheckout-checkoutchamp-step6-editcheckoutpageandaddpaypalbutton" id="paypalseamlesscheckout-checkoutchamp-step6-editcheckoutpageandaddpaypalbutton"></a> There are 2 PayPal buttons from which to choose. The difference is style only. You can add multiple PayPal buttons to a page. <figure><img src="/files/3YMsSEpJedu1CdHwYFu3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MlxOWJF6VdWCIMyLs3In" alt=""><figcaption></figcaption></figure> **Step 6-1(button)**: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <figure><img src="/files/R2N8P8y9iaAQEHrnhRSM" alt=""><figcaption></figcaption></figure> *** ### Radio <a href="#paypalseamlesscheckout-checkoutchamp-radio" id="paypalseamlesscheckout-checkoutchamp-radio"></a> <figure><img src="/files/ILx7SKMJlKA7gnSAbCby" alt=""><figcaption></figcaption></figure> **Step 6-1(radio)**: Add a radio button to the page. You may design this to your preference. <figure><img src="/files/KFHMMJBPMm7dCSYYA5Nh" alt=""><figcaption></figcaption></figure> **Step 6-2(radio)**: Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps (CREDITCARD, PAYPAL, etc). {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page and exit the page builder <a href="#paypalseamlesscheckout-checkoutchamp-step7-savethepageandexitthepagebuilder" id="paypalseamlesscheckout-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/ZXEqfDkbGRmM1pZk99uv" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the PayPal button(s) for navigation. <a href="#paypalseamlesscheckout-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethepaypalbutton-s" id="paypalseamlesscheckout-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethepaypalbutton-s"></a> <figure><img src="/files/QgQug0r2U3ofoWNKoYa4" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish the funnel. You’re done and ready to test! <a href="#paypalseamlesscheckout-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest" id="paypalseamlesscheckout-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/PGTIRZ8Z1cm63Jhh90Nj" alt=""><figcaption></figcaption></figure> *** ### Recurring Billing without Reference Transactions enabled <a href="#paypalseamlesscheckout-checkoutchamp-recurringbillingwithoutreferencetransactionsenabled" id="paypalseamlesscheckout-checkoutchamp-recurringbillingwithoutreferencetransactionsenabled"></a> {% hint style="warning" %} #### Unfortunately, it is not possible to do recurring billings with PayPal if you cannot enable Reference Transactions on your PayPal account. Contact PayPal to have Reference Transactions enabled. <a href="#paypalseamlesscheckout-checkoutchamp-unfortunately-itisnotpossibletodorecurringbillingswithpaypalify" id="paypalseamlesscheckout-checkoutchamp-unfortunately-itisnotpossibletodorecurringbillingswithpaypalify"></a> {% endhint %} *** ### Upsells without Reference Transactions enabled <a href="#paypalseamlesscheckout-checkoutchamp-upsellswithoutreferencetransactionsenabled" id="paypalseamlesscheckout-checkoutchamp-upsellswithoutreferencetransactionsenabled"></a> If Reference Transactions is not enabled on your PayPal account, you can still use PayPal for upsells by redirecting the customer back to PayPal for each upsell. CheckoutChamp knows if the customer paid with a credit card or PayPal on the initial sale and will process with the same payment method on the upsell pages. This means you don’t need to design your upsell pages any differently than they already are. Using your existing “Yes” button on the upsell pages, a PayPal customer will redirect to PayPal if the PayPal gateway added into CheckoutChamp does not have Reference Transactions enabled. # Fastlane Enter your payment details once. Then checkout with just a click wherever Fastlane is available. {% embed url="<https://www.paypal.com/us/fastlane>" %} <figure><img src="/files/Ho7FcPykERcoRzhrsBPf" alt=""><figcaption></figcaption></figure> ## PayPal Commerce Setup Go to funnel Settings > Merchant Accounts > choose the PayPal Commerce account. Enable **referenceTransactions**. Verify that **vaultEnabled** is enabled. These 2 options are required for Fastlane. {% hint style="info" %} Fastlane is available for US customers only. {% endhint %} {% hint style="warning" %} Reference transactions must also be enabled on your PayPal account. Please confirm with PayPal if this is unknown. {% endhint %} ## Funnel Setup Go to any funnel. Settings > Payments > PayPal. Choose the PayPal Commerce gateway and enable Fastlane. Fastlane is compatible with the other PayPal setup options. Save. <figure><img src="/files/B9jjZqERoGlsb0FhDnBo" alt="" width="375"><figcaption></figcaption></figure> ## Checkout Page Setup There are 2 options for checkout page design. Explore carefully to choose the best option for you. Fastlane requires customization of the checkout page. Choose one of our Fastlane checkout page templates to obtain these customizations automatically. Make the modifications manually on all other checkout pages. If Fastlane is not working as expected then first verify each of these requirements is in place on the page. ### Option 1: PayPal is the only card checkout on the page PayPal can process direct credit cards in addition to venmo, pay later, and standard PayPal. If you use the PayPal gateway for direct credit card payments then you can save your customers an extra click with Fastlane. The Email Address input will be open for Fastlane on page load. {% hint style="warning" %} This option is compatible with other payment providers, such as Apple Pay, that do not require address entry on the page. Any provider that requires address entry on the page is not compatible with this option. Consider Option 2 below. {% endhint %} 1. Place the Email Address input near the top of the page. This should come before address and phone. 2. Drag a Box element onto the page below Email Address. Set id=**cc-fastlane-watermark**. This element is used to show the Fastlane messaging. 3. ``` <figure><img src="/files/gMeAHAQcwZbG5kZpF9C5" alt="" width="375"><figcaption></figcaption></figure> ``` 4. Drag a standard button onto the page. Give it class **cc-fastlane-profile**. This button should be near Email Address. This button is used to trigger email lookup at Fastlane. 5. ``` <figure><img src="/files/NmuSlNDmXPTSyA5ZutFE" alt="" width="375"><figcaption></figcaption></figure> ``` 6. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Give the box class **cc-fastlane-shipping**. 7. ``` <figure><img src="/files/czQr0a4RJ9dpNeM5MaWA" alt="" width="375"><figcaption></figcaption></figure> ``` 8. Add class **cc-fastlane-member-hide** to the parent element of shipping inputs, billing inputs, and any billShipSame checkbox. This is likely to be multiple elements. Add the class to each. 9. ``` <figure><img src="/files/h4b6UdxNqlWdqrtzAA5v" alt="" width="375"><figcaption></figcaption></figure> ``` 10. Remove any card inputs from the page (cardNumber, expiry month, and cardSecurityCode) 11. Drag a Box element onto the page where the card inputs previously existed. Set id=**cc-fastlane-payment**. 12. ``` <figure><img src="/files/hgk06IQPv1CP7iVJ94uj" alt="" width="375"><figcaption></figcaption></figure> ``` 13. Find the Checkout button on the page. Add class **cc-fastlane-submit** to the button. 14. ``` <figure><img src="/files/LalGeHGOKejxFRdGO5Ow" alt="" width="375"><figcaption></figcaption></figure> ``` 15. Save 16. Exit the page builder 17. Publish the funnel ### Option 2: Allow card checkouts on non-PayPal gateways If you choose to process direct credit card payments with non-PayPal gateways then Fastlane becomes a checkout option for the consumer. This is similar to Klarna, Apple Pay, Google Pay, etc. This option involves an extra button click for the consumer to choose Fastlane. {% hint style="warning" %} This option is compatible with all other payment providers {% endhint %} {% hint style="warning" %} This option is compatible with Stripe Link. Add the proper classes as defined in Option 2 of [Link instructions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/link-by-stripe). Some elements will have both Fastlane and Link classes. {% endhint %} 1. Place a Fastlane button on the checkout page. Go to Blocks > Buttons > drag Fastlane to the page. 2. Place the Email Address input near the top of the page. This should come before address and phone. 3. Drag a Box element onto the page below Email Address. Set id=**cc-fastlane-watermark**. This element is used to show the Fastlane messaging. 4. ``` <figure><img src="/files/q90PA1ZxR0OdILVnO7Gi" alt="" width="375"><figcaption></figcaption></figure> ``` 5. Drag a standard button onto the page. Add class **cc-fastlane-profile** to the button. This button should be near Email Address. This button is used to trigger profile lookup at Fastlane once email is entered on the page. 6. ``` <figure><img src="/files/7T7L3wbBNVHf8jMqyDrO" alt="" width="375"><figcaption></figcaption></figure> ``` 7. Drag a second standard button onto the page. Add class **cc-fastlane-cancel** to the button. This button should be near Email Address and the button in step 4. This button is used to cancel Fastlane checkout. 8. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-fastlane-shipping** to the box. 9. Add class **cc-fastlane-member-hide** to the parent of shipping inputs, billing inputs, and any billShipSame checkbox. This may be multiple elements. Add the class to each. 10. Clone (duplicate) the credit card payment option element 11. Set radio value to "PAYPAL\_FASTLANE" for the cloned element 12. Add class **cc-fastlane-show** to the cloned element 13. Remove any card inputs from the cloned element (cardNumber, expiry month, and cardSecurityCode) 14. Drag a Box element inside the cloned element where the card inputs previously existed. Set id=**cc-fastlane-payment**. 15. ``` <figure><img src="/files/vCmJZ7NtLf52EYX8kFC7" alt="" width="375"><figcaption></figcaption></figure> ``` 16. Save 17. Exit the page builder 18. On the arrow leaving the checkout page, choose the button suffixed with "-PAYPAL\_FASTLANE" to route the Fastlane checkout. 19. Publish the funnel # SEPA {% hint style="info" %} SEPA is supported through Global Payments, StripeV2, AdyenV2, Airwallex, Mollie, Trust Payments, Worldline, Worldpay, Celeris, and CheckoutV2 payment gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add SEPA to <a href="#sepa-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddsepato" id="sepa-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddsepato"></a> <figure><img src="/files/Qmr4FdhcF4KjeL55dZCE" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sepa-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sepa-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/f29KkQa3o8aI6pG0nXZ4" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#sepa-checkoutchamp-step3-openthepaymentssection" id="sepa-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/JRNkTdA4AVaf9CqOehZL" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#sepa-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials" id="sepa-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials"></a> * Global Payments, StripeV2, AdyenV2, Airwallex, Trust Payments, Worldline, Worldpay, and CheckoutV2 gateways can be selected here <figure><img src="/files/IAWeayytJoFmfGbaNQvb" alt=""><figcaption></figcaption></figure> {% hint style="info" %} 1. Enter a **Title** to easily identify your SEPA account 2. Add the **public\_key** and **private\_key** obtained from your SEPA account 3. Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#sepa-checkoutchamp-step5-saveandcontinue" id="sepa-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add a SEPA button <a href="#sepa-checkoutchamp-step6-editcheckoutpageandaddsepabutton" id="sepa-checkoutchamp-step6-editcheckoutpageandaddsepabutton"></a> <figure><img src="/files/VL6EkFY43Q1odTgQhY74" alt=""><figcaption></figcaption></figure> ### Button <a href="#sepa-checkoutchamp-button" id="sepa-checkoutchamp-button"></a> <figure><img src="/files/XTfatwJAt7kmvXrrWZ8P" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sepa-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedc" id="sepa-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedc"></a> ### Radio <a href="#sepa-checkoutchamp-radio" id="sepa-checkoutchamp-radio"></a> <figure><img src="/files/B1ZKijSm7ClhHBGAO4UC" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sepa-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sepa-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/JCGUk8WFSS2rgbzUK3wp" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to “SEPA\_DEBIT“ in all caps. <a href="#sepa-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="sepa-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#sepa-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sepa-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/erNqNsr0RBOtLJDpAj1t" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the SEPA button. <a href="#sepa-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesepabutton" id="sepa-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesepabutton"></a> <figure><img src="/files/y2Scr2mhNxtFOoN7XKxp" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sepa-checkoutchamp-step9-publish.youredoneandreadytotest" id="sepa-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} SEPA payments require the customer pass their IBAN number * Choose the building blocks and navigate to Forms <figure><img src="/files/CM6r3IszVRKOQV8toUev" alt=""><figcaption></figcaption></figure> * Drag an Input around the SEPA button and set it to IBAN <figure><img src="/files/6KCsdhgih17lK8Un8dWE" alt=""><figcaption></figcaption></figure> # Sezzle ### Step 1: Login and navigate to the funnel on which to add Sezzle <a href="#sezzle-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddsezzle" id="sezzle-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddsezzle"></a> <figure><img src="/files/EveDVuoQ4JxSEYfZTRES" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sezzle-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sezzle-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/G92J2jLcjGagOFLaERLP" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#sezzle-checkoutchamp-step3-openthepaymentssection" id="sezzle-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/JcY5LuP0WW7tG2UijZln" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new Sezzle gateway credentials <a href="#sezzle-checkoutchamp-step4-addnewsezzlegatewaycredentials" id="sezzle-checkoutchamp-step4-addnewsezzlegatewaycredentials"></a> <figure><img src="/files/6vWc2iWzbSiZZRVL8zwV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ygLZukUvZcxSG22dQwii" alt=""><figcaption></figcaption></figure> Enter a **Gateway Title** to easily identify the Sezzle account. Then add the **public\_key** and **private\_key** obtained from your Sezzle account. Add **Limits** and also the **Merchant Descriptor** and **Mid #** *** ### Step 5: Save and Continue <a href="#sezzle-checkoutchamp-step5-saveandcontinue" id="sezzle-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add the Sezzle button <a href="#sezzle-checkoutchamp-step6-editcheckoutpageandaddthesezzlebutton" id="sezzle-checkoutchamp-step6-editcheckoutpageandaddthesezzlebutton"></a> <figure><img src="/files/tsRL3ZIRJcPtaY5NKl4f" alt=""><figcaption></figcaption></figure> ### Button <a href="#sezzle-checkoutchamp-button" id="sezzle-checkoutchamp-button"></a> <figure><img src="/files/OLg8dtsBsqLI60e0w4bZ" alt=""><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sezzle-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="sezzle-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/kZLlp7SI3koLhFQ6H20H" alt=""><figcaption></figcaption></figure> ### Radio <a href="#sezzle-checkoutchamp-radio" id="sezzle-checkoutchamp-radio"></a> <figure><img src="/files/mkaRug1ibqB3KeTcYx1a" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sezzle-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sezzle-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/oeokxwem6vr5K9w9biYn" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#sezzle-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sezzle-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#sezzle-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sezzle-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/Wz3rqXeQLi9RyrnfGQU7" alt=""><figcaption></figcaption></figure> *** ### Step 8: Choose the Sezzle button on the arrow leaving the checkout page. <a href="#sezzle-checkoutchamp-step8-choosethesezzlebuttononthearrowleavingthecheckoutpage" id="sezzle-checkoutchamp-step8-choosethesezzlebuttononthearrowleavingthecheckoutpage"></a> <figure><img src="/files/qAGX81ftrnbNGnObuWmR" alt=""><figcaption></figcaption></figure> ### Step 9: Publish. You’re done and ready to test! <a href="#sezzle-checkoutchamp-step9-publish.youredoneandreadytotest" id="sezzle-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Swish {% hint style="info" %} Swish is supported through Stripe V2, Mollie, Swipen, Cardstream, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add Swish <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/kufkqs9Kd8j7aEvzBUd5" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#ideal-checkoutchamp-step3-openthepaymentssection" id="ideal-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/oFoxHqtWEvwTXKw1EkYA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Stripe V2, Swipen, Cardstream, and NomuPay gateways can be selected here. Press the + button to add a new gateway. <figure><img src="/files/RU4XVOjFYmEIr6DVfu5U" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the Swish button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/juXVHcddnZAeMF4HVy2f" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> <figure><img src="/files/0Mm0AuTJq3iRpwpzXpPh" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/jIghZncW62YOg2htFuWF" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to SWISH (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZebPiV3bykg9xeeVehL0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Swish button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/pLYKez0gx88IyqCNOZr0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # TWINT {% hint style="info" %} TWINT is supported through the Stripe V2 and Mollie gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add TWINT <a href="#sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort" id="sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort"></a> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> *** ### Step 3: Open the Payments section <a href="#sofort-checkoutchamp-step3-openthepaymentssection" id="sofort-checkoutchamp-step3-openthepaymentssection"></a> *** ### Step 4: Add the payment gateway on which to transact <a href="#sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Stripe V2 gateways can be selected here *** ### Step 5: Save and Continue <a href="#sofort-checkoutchamp-step5-saveandcontinue" id="sofort-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the TWINT button <a href="#sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton" id="sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton"></a> ### Button <a href="#sofort-checkoutchamp-button" id="sofort-checkoutchamp-button"></a> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#sofort-checkoutchamp-radio" id="sofort-checkoutchamp-radio"></a> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to TWINT in all caps. <a href="#sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> Use either all buttons or radios for pay source selection to mitigate any conflicts *** ### Step 7: Save the page. Exit the page builder. <a href="#sofort-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sofort-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: On the arrow leaving the checkout page, choose the TWINT button. <a href="#sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton" id="sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sofort-checkoutchamp-step9-publish.youredoneandreadytotest" id="sofort-checkoutchamp-step9-publish.youredoneandreadytotest"></a> Customer info fields are required for this alternate payment method. # Social Proof Go to funnel Settings and select **Social Proof**. Social Proof displays up to 50 recent orders on checkout pages or lead pages in reverse chronological order, so that visitors can see the most recent buyers and their products. This can help increase conversions and trust among potential customers. The selection criteria are: * funnel campaign * past 7 days * no test cards * status Complete orders only (cancelled and refunded orders are excluded) * from the same country as current checkout country. If country is changed on the checkout page then orders will be fetched anew. Choose to **Enable Social Proof**. Set the remaining configuration options as desired. Your configuration is displayed on the left side. Press Save & Continue when finished. Social Proof displays on checkout pages with a Country or Ship Country element. Social Proof can also display on lead pages. Scroll to the bottom of the configuration options to enable lead pages. {% hint style="warning" %} Be sure to Publish your funnel for these changes to take effect. {% endhint %} <figure><img src="/files/6oydffqeIqlWMUBi5w3m" alt=""><figcaption></figcaption></figure> # Order Perks Deliver relevant low-friction perks to customers for making a purchase Order Perks displays additional offers to your customers on Thank You pages. The offers are targeted based on behavior, context, and preferences. This can be an easy source for increased revenue. Revenue is generated for every customer that clicks. Additional revenue is generated for every customer that purchases. The revenue varies based on the market value of the perk offered, but a reasonable estimate is $0.30-0.35 per click. This revenue is given directly as a credit on your Checkout Champ subscription each month. Go to funnel Settings and select **Order Perks.** Choose to **Enable Order Perks**. Set the remaining configuration and style options as desired. Read all the tooltips for additional information. Your configuration is displayed on the left side. Press Save & Continue when finished. **Order Perks** displays on Thank You pages after completed orders. **Order Perks** does not display in preview mode or for test cards. {% hint style="warning" %} Be sure to Publish your funnel for these changes to take effect {% endhint %} <figure><img src="/files/DTtngjOKOfYHaJQ0cdx1" alt="" width="563"><figcaption></figcaption></figure> # Maintenance This menu option hosts Maintenance utilities for your funnel * [SEO](#maintenance-seo) * [Upload Files](#maintenance-uploadfiles) *** ### SEO <a href="#maintenance-seo" id="maintenance-seo"></a> CheckoutChamp will automatically place search engine tags in the head of the default page in your funnel. This is placed only on the default page. This makes it easy to have your page crawled by search engines. It is then your responsibility to optimize your page content for SEO. CheckoutChamp adds OpenGraph and Twitter meta tags to the page head. 1. Edit your checkout funnel 2. Go to **Settings > Maintenance** 3. Choose to allow search engines to crawl your pages 4. **Page Title** - enter a title to be displayed in search engine results. This value defaults to the funnel title. 5. **Description** - enter a short page description to be displayed in search engine results. 6. **Feature Image** - select an image that will show on social media search results 7. Close the Maintenance window 8. Edit the default page in the funnel 9. Save the page (you do not have to make any changes to the page) and exit the page builder 10. Publish <figure><img src="/files/byjU3UWVwm8IMovTstgN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/AeCOJT1msgPiHHQvbcd5" alt=""><figcaption></figcaption></figure> Here is a page example with SEO tags automatically added <figure><img src="/files/2e1W1PG0OnZE5LHeElOh" alt=""><figcaption></figcaption></figure> *** ### Upload Files <a href="#maintenance-uploadfiles" id="maintenance-uploadfiles"></a> Upload any files needed by your site, such as a web app manifest. When you are complete, edit the default page in the funnel, save the page (you do not have to make any changes to the page) and exit the page builder, and then Publish the funnel. You can reference your uploaded file from your published URL. For example, assuming your published funnel is located at “<http://www.yourfunnelhere.com”>, a recently uploaded js file named “generic.js” would be found at “<http://www.yourfunnelhere.com/generic.js”>. <figure><img src="/files/2B9UkP5tZ7Z6R63Mdbfa" alt=""><figcaption></figcaption></figure> *** ## Geolocation <figure><img src="/files/lystf1kUp3SjTDE3cQK5" alt=""><figcaption></figcaption></figure> In the Geolocation tab there are 3 options and a toggle. **None -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to disable this functionality. **Browser -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to use the browsers geolocation. **Server -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to use the server-side geolocation service. **Default a country if no geolocation match** (toggle) - If geolocation does not match a country in the campaign, then default the first country in the campaign onto the order. {% hint style="info" %} If this is not toggled the page will load with the place holder {% endhint %} *** ## Miscellaneous <figure><img src="/files/earDvRNczKqD0DUQWcPY" alt=""><figcaption></figcaption></figure> **Show exceptions in a popup -** Check this box to show exceptions in a popup. By Default all exceptions are shown as a label on the page. **Update currency on change of country -** Automatically update the order currency when the billing country is changed. The campaign base currency will be used if the country currency is not on the campaign. **Enable phone format by country -** Allows consumers to choose a phone country. Show a country flag. Enforce the country phone format. **Verify Out-of-Stock products -** Do not allow purchase of out-of-stock shippable products. Show an out-of-stock indication to consumers. **Disable removal of default coupon -** Do not allow removal of the default coupon. The default coupon will count against the max coupons allowed on the order. **Disable shipping price display -** Do not show shipping prices as part of the shipping method selection. **Disable lazy loading -** Disable lazy loading of media (Image, Video, iframe) on all pages. {% hint style="danger" %} **Don't forget to publish your changes.** {% endhint %} # URL Customization ### Slugs <a href="#urlcustomization-slugs" id="urlcustomization-slugs"></a> There are several instances in Checkout Champ in which it would be helpful or even necessary to add a slug to the end of your URL. First, here is how you can add a slug to your page, then we can look at a few different examples of when you would use them. #### Adding a Slug - <a href="#urlcustomization-addingaslug" id="urlcustomization-addingaslug"></a> By default all published pages in Checkout Champ will have a randomly generated slug attached to the end of the URL for identification purposes. (see Image below) <figure><img src="/files/ZT3JdXJRuMwE2vTEGf6n" alt=""><figcaption></figcaption></figure> To change this, go to the visualizer, select a page you want to give a slug. Then select the gear icon in the bottom left of the tool bar. (Pictured below) <figure><img src="/files/5za6XcnXOIR5MPxkcg78" alt=""><figcaption></figcaption></figure> On the right side settings panel that pops up, select the “**Published Page Name**” input. Add whatever slug you would like to appear at the end of your URL and then be sure to **Tab off of the input to save it**. (Pictured below) <figure><img src="/files/Uqr3blokovsF3dAPTVue" alt=""><figcaption></figcaption></figure> **You’ll see the following prompt to publish your funnel to see the changes.** <figure><img src="/files/O5ILvWlgExlg5hF0lQwa" alt=""><figcaption></figcaption></figure> When you return to your site, you will see the slug at the end! <figure><img src="/files/kvMdCmAesvy1rcXBSlS3" alt=""><figcaption></figcaption></figure> *** ### When to add a slug: <a href="#urlcustomization-whentoaddaslug" id="urlcustomization-whentoaddaslug"></a> #### Split Tests - <a href="#urlcustomization-splittests" id="urlcustomization-splittests"></a> If you want to run a split test to try out what versions of your site works best, you can add a slug to the end of both URLs to better differentiate them for yourself. See [Creating a Split Variation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/creating-a-split-variation) on how to do that. Once your splits are created, you will need to select the gear icon for each A and B variation inside the page settings to add the slug. **Remember to tab off the Split Name to save the slug**. <figure><img src="/files/zdmmAcmImnVtFayYgItX" alt=""><figcaption></figcaption></figure> #### Shopify Redirect - <a href="#urlcustomization-shopifyredirect" id="urlcustomization-shopifyredirect"></a> If you are creating a redirect from Shopify, it is highly recommended to add a slug to each page in your funnel. This way you can use the same domain and the slug will indicate which page someone is on. For example: [www.myshop.com/checkout](http://www.myshop.com/checkout). It will also create a more consistent experience for customers as they redirect from Shopify to Checkout Champ. Contact your Account Manager for more details on redirects. #### Funnel Clones - <a href="#urlcustomization-funnelclones" id="urlcustomization-funnelclones"></a> In some instances, you might want to duplicate your entire funnel and run them both with some variations instead of split testing just one page. ***Assuming you will be using the same domain for both funnels, you will need to add slugs to every page in one or both funnels***. Follow the instructions in [Duplicating Pages & Funnels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicating-pages-and-funnels) then once all the pages load, you will need to add a slug to each page in the funnel so the domains are unique from your other funnel. # Page Templates <figure><img src="/files/W22vKXgQ9mcMuL11qxdn" alt=""><figcaption></figcaption></figure> Within Checkout Champ we provide a number of templates for each page type. Many people get bogged down in design, so hopefully these will save you much time! We recommend you use our templates for several reasons: * They will save you time as designing your own page from scratch can take some time to perfect. * Templates are easy to edit and designed to work in the Checkout Champ platform. * They provide great examples of the design possibilities within Checkout Champ. * They have been tested and approved for use. * Superior support for templates compared to custom pages. *Don't see a template that fits your needs?* **Let us know!** We are always designing more based on feedback! ### Selecting a Template <a href="#pagetemplates-selectingatemplate" id="pagetemplates-selectingatemplate"></a> When you drag a new page type onto the visualizer, you will need to select a template first. Do this by selecting the page settings cog icon. <figure><img src="/files/fthvYRMcZ4iTXuwLpMPJ" alt=""><figcaption></figcaption></figure> From here you can select a template to edit, or select the first blank template (in red below) if you want to build your page from scratch. <figure><img src="/files/LzinwQIGjUjv2zb7dkhK" alt=""><figcaption></figcaption></figure> Once you select a template you can edit the images and text to fit your needs. Templates are designed to need minimal editing. Just replace our info with yours and you’re ready to start selling! <figure><img src="/files/joyn8ZX613Zm2cwptW67" alt=""><figcaption></figcaption></figure> # Page Builder After you drag a page type to the funnel visualizer, click on the page and then click the settings gear icon to select a template. You can choose from My Pages (pages you’ve already created), Free Pages, or Premium Pages <figure><img src="/files/y59D7MIcXKJby2OOtiId" alt=""><figcaption></figcaption></figure> <figure><img src="/files/JJ1T1x9irNxuD5hyKuz1" alt=""><figcaption></figcaption></figure> After you select a template, click on the page again and click the Pencil button to begin editing the page <figure><img src="/files/q787kpxpnwuMwCe0ndny" alt=""><figcaption></figcaption></figure> ### Relative Links {% hint style="info" %} These links are deprecated content. Please use [Page Builder 2.0](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0). {% endhint %} * [Builder Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar) * [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles) * [Layer Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/layer-manager) * [Building Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) * [Adding Local HTML Files](/funnel-builder/creating-and-editing-funnels-pages/adding-local-html-files) # Builder Toolbar The Builder Toolbar is a quick navigation menu which supports valuable functions and can be found at the top of every Checkout Champ page within the Page Builder. <figure><img src="/files/RE3c8k571SO0tc0lcrkf" alt=""><figcaption></figcaption></figure> [Back](#bac) | [Blocks Menu](#blocks-menu) | [Show Hidden Layers](#show-hidden-layers) | [Code Editor](#code-editor) | [Pages](#pages) | [Chat GPT](#chat-gpt) | [View Components](#view-components) | [Popups](#popups) | [Sticky Bar](#sticky-bar) | [Page Import](#page-import) | [Undo and Redo](#undo-and-redo) | [Help](#help) | [Clear Canvas](#clear-canvas) | [Absolute/Relative](#absolute-relative) | [Light/Dark Mode](#light-dark-mode) | [Preview](#preview) | [Save](#save) | [Cart](#cart) ## Back The "back" button will exit the page back to the funnel visualizer. If the page has not been saved since its last edit, you will receive a prompt asking if you would like to save before exiting. <figure><img src="/files/UMlQiHumUpA0MqJUMG7w" alt=""><figcaption></figcaption></figure> ## Blocks Menu The blocks menu opens the Blocks toolbar which houses all of the builder's draggable elements. <figure><img src="/files/FdKqD51OfTyKQJpDiAxk" alt=""><figcaption></figcaption></figure> ## Show Hidden Layers Clicking the Hidden Layers button will bring you into your Layer Manager, highlighting any layers that have been hidden from view. <figure><img src="/files/QOJaZl211t9zu1Hlyx0j" alt=""><figcaption></figcaption></figure> ## Code Editor The Code Editor allows you to view and edit the HTML and CSS code using a popup containing a two-sided popup. <figure><img src="/files/D9JElnwL1IMDcPldlzrY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ynePvigaqHmT8od4lj6C" alt=""><figcaption></figcaption></figure> ## Viewports Clicking the Viewports dropdown allows you to view and edit your pages in 5 pre-defined screen sizes (Desktop, Large Tablet, Tablet, Large Mobile, and mobile). Being able to navigate between views allows you to view and edit your layout with mobile responsiveness in mind. <figure><img src="/files/75eYXUSLf6rIAfy0Uj3j" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bRmQvpNPLdDhm22Bhdgd" alt=""><figcaption></figcaption></figure> ## Pages The pages dropdown allows you to switch to any other page in your funnel without leaving the builder. If the current page has not been saved since its last edit, you will receive a prompt asking if you would like to save before switching to the next page. <figure><img src="/files/mz72kN4wd0dIluSpDkNR" alt=""><figcaption></figcaption></figure> ## Chat GPT Clicking the Chat GPT icon will launch Chat GPT in a new window. This allows users to easily create marketing copy on the fly to copy/paste back in the editor. <figure><img src="/files/PXBEAGCtD5O4zC9YSaBB" alt=""><figcaption></figcaption></figure> ## View Components By selecting or deselecting View Components, you can hide or reveal the component borders to view the page with or without visible element sections. <figure><img src="/files/eJrySslshO0M6u5meCtq" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TH1jrHaicl1AYmPxeBp1" alt=""><figcaption></figcaption></figure> With the component view enabled, you will see dotted lines surrounding each of the individual components/blocks on the page. ## Popups Upon clicking the Popups button, the Popup Manager will display so you can add a new popup or to edit existing popups. <figure><img src="/files/6SzW9WvvjUbercFAlTOz" alt=""><figcaption></figcaption></figure> ## Sticky Bar Selecting Sticky Bar allows you to add or edit your page's sticky bar. A sticky bar adds a box/bar that "sticks" to the top or bottom of the page to display a message, product button, picture or anything interesting so that it is always displayed prominently, yet non-intrusively. <figure><img src="/files/dD2ov7j8d5ehRT7Y0f5d" alt=""><figcaption></figcaption></figure> ## Page Import The Page Import tool allows users to import pages built outside of Checkout Champ using a live URL. <figure><img src="/files/lJM9EWLuORNSaKrZyJsF" alt=""><figcaption></figcaption></figure> ## Undo and Redo Undo and Redo allow you to easily remove or add changes back as you are editing. <figure><img src="/files/Hb6rhKHz8X9VbbOJO8m6" alt=""><figcaption></figcaption></figure> ## Help By selecting the ' ? ' you can easily access the Checkout Champ Knowledge base articles, like this one! <figure><img src="/files/PCQcVRp6fHWIEWOqNsW4" alt=""><figcaption></figcaption></figure> ## Clear Canvas Clear Canvas will allow you to wipe the canvas clear and start with a blank page. <figure><img src="/files/YVt5C53EoZQMhwIDbrBg" alt=""><figcaption></figcaption></figure> When you click the icon, you will receive a prompt ensuring you intend to clear the canvas. <figure><img src="/files/Y5UNHsek4HBqmt1AxjD4" alt=""><figcaption></figcaption></figure> ## Absolute/Relative Toggling between Absolute and Relative adjusts how elements are placed on the canvas. When in Absolute mode, elements remain where they are dragged on the canvas (like images placed on top of each other). In Relative mode, elements are placed onto the canvas relative to their parent elements. <figure><img src="/files/IhxogWU9kavj0doPYlnq" alt=""><figcaption></figcaption></figure> ## Light/Dark Mode The Light/Dark Mode switch allows you to change the Funnel Builder color scheme based on your preference. <figure><img src="/files/19muHwwZkqwD5BtN6Fyg" alt=""><figcaption></figcaption></figure> ## Preview By selecting the eye, you can Preview your page as you are building to check your progress. <figure><img src="/files/RngpA3uo4xR7V1i9Etnv" alt=""><figcaption></figcaption></figure> ## Save Save your changes as you work in the Page Builder. <figure><img src="/files/qgI95ErW9Jd2zXjybUCW" alt=""><figcaption></figcaption></figure> ### Cart On pages containing a Header element, you will see the Cart icon in the toolbar. The Cart icon opens the side cart element for you to view and edit as needed. Note: The side cart is not available on checkout pages. <figure><img src="/files/MimvPbLdsK6cEoZpcd4d" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ynHvRToSqROoRNWHtoGR" alt=""><figcaption></figcaption></figure> # Device View Changer Checkout Champ gives you all the necessary tools you need to optimize your pages so that they are responsive and beautiful on any device. While many responsive features are automatically applied to your page, you can customize your layout as needed. Using the Device View Changer, you can view and edit your page layout using 5 preset screen sizes reflecting commonly used devices: <figure><img src="/files/bRmQvpNPLdDhm22Bhdgd" alt=""><figcaption></figcaption></figure> (Desktop, Laptop/Large Tablet, Tablet, Large Mobile and Mobile) By selecting the different device views in the editor, you can see how your page will look on the 5 different screen sizes. You can also modify your page design to reflect styling specific to the different device layouts. As you edit, the styling changes cascade downward. <figure><img src="/files/iMtc9aWswhNYJF9S8UxF" alt=""><figcaption></figcaption></figure> Any styling edits made on the desktop view will cascade down across all screen sizes. However, you can use the Device View Changer to edit the smaller screen sizes independently. This allows you to change the styling for tablet and mobile screens or even hide elements you don’t want visible on the smaller screen sizes. # Popups Popups can be used in a variety of ways, but the generally the purpose is to keep the customers engaged on your site. Upon clicking the Popup button within the Page Builder Toolbar, the Popup Manager will display so you can add a new popup or to edit an existing one. There is no limitation on how many popups you can create. <figure><img src="/files/U98KljDR8VOOLvDCHN5p" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9eDrqiLO96Lgd39Ct4yG" alt=""><figcaption></figcaption></figure> Once you have clicked the “Add new popup” button or the Edit button on an existing popup, the popup will display within the builder and you can edit elements as you normally would. The Popup-body element (the outermost parent element of the popup) has settings within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles) to further customize your popup. <figure><img src="/files/yUzGiEcd2XtG1rtBOemW" alt=""><figcaption></figcaption></figure> **Delay (Min and Sec)**: Delay the popup from triggering for a determined amount of time. **Trigger On** options include: Trigger On Load - The popup displays when the page initially loads completely.\ Trigger On Scroll - The popup displays when the user starts to scroll down on the page.\ Trigger On Exit - The popup displays when the user's mouse cursor leaves the window.\ \*\*See below for triggering a popup upon the click of a button or link **Popup Width**: Choose between Small, Medium, and Large sized popup. **Corner Radius**: Choose how rounded the corners of the popup should be. **Edges**: Choose if All, None, the Top Only, or the Bottom Only edges should use the corner radius selection. **Animate**: Add an animation to your popup. **Animation Duration (Sec)**: Set how long, in seconds, that the animation for your popup should last. When you have finished designing your popup, click the Popup button again within the Page Builder Toolbar to close the popup. {% hint style="info" %} If you ever want to disable a popup, you can either set the Trigger On setting to None, or you can delete the popup from the Popup Manager. {% endhint %} *** ### \*\*Trigger Popup when a button or link is clicked <a href="#popups-triggerpopupwhenabuttonorlinkisclicked" id="popups-triggerpopupwhenabuttonorlinkisclicked"></a> There may be cases where you would prefer the popup to display when the customer clicks a button or link on the page. To do this, make sure the Trigger On setting within your popup is set to None. Next, close the popup designer and click on the button or link that you would like to trigger the popup. With the button or link highlighted, click the Style Manager button and open the Settings for the element. Finally, set the button/links Action selection to Open Popup and set the Popup selection to the popup you would like to display when the button/link is clicked. **\*Required fields will need to be filled before the Popup will load** <figure><img src="/files/wlU0JF9HJ3ZH0dHsG223" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} If you ever decide to remove the popup, make sure you edit your button/link to adjust the action accordingly. {% endhint %} # Settings and Styles Select Settings or Styles to quickly reveal the settings or style management pane to edit as needed. **Settings** - Each element has different settings <figure><img src="/files/pcggFnceL4Q1dqwuYRki" alt=""><figcaption></figcaption></figure> The Style manager has Basic and Advanced settings with the Advanced settings allowing for slightly more control and flexibility than the Basic settings. <figure><img src="/files/mk2RKJcUxHhm0CdwJ4uw" alt=""><figcaption></figcaption></figure> **Dimension/Size & Spacing** - Adjust the height, width, margins and padding of the element **Font** - Adjust the font type, color, size, etc **Border** - Adjust the border for the element **Shadow** - Apply a shadow to the element **Background/Effects** - Control the background and/or shadow style of the element **Extra** - Adjust the opacity of an element **Flex** - Control flex properties of the element # Layer Manager The Checkout Champ Layer Manager allows you to manage your page structure to nest components and manage page elements quickly and easily. To find a specific element in the layer manager, open the layer manager with the hamburger icon on the far right of the tool bar. Once the layers are displayed, go ahead and click on the element you would like to find. Once you do so the element will be displayed inside the layer manager. <figure><img src="/files/PjkkxoBbZSuSqA4P8FmJ" alt=""><figcaption></figcaption></figure> As your page grows, you can reposition elements by dragging the element up or down in the layer manager, view and hide elements (eye icon), lock elements to prevent editing (lock icon), and reveal nested layers (arrow icon) to manage nested elements. <figure><img src="/files/oa3Q0F7YNoHc5CQB6O7w" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Hiding an element from the desktop view will hide the element across all device views. However, you can hide an element on the tablet and/or mobile view and it will remain on the desktop view. {% endhint %} # Hiding and Revealing Elements The layer manager can be used in powerful ways to optimize a page layout for different devices. For example, you could have a large, wide image displayed on desktop but hide it on mobile devices and instead reveal a smaller, narrower design for mobile. This feature allows you to create a different visual experience based on screen size using the built-in viewports (Desktop, Large Tablet, Tablet, Large Mobile and Mobile). You can see your page across all 5 viewports by clicking the different screen sizes in the top toolbar. <figure><img src="/files/iMtc9aWswhNYJF9S8UxF" alt=""><figcaption></figcaption></figure> ### Here's how you can Show or Hide elements The initial screen in the builder is the Desktop layout. Should you need to see some items on desktop, but no on the on the smaller screens, you can open the Layer Manager. Once open, click on the element in the Layer Manger or directly on the page. Then, click the eye icon to hide that element from view. <figure><img src="/files/KCgnmXlgbTDUaE1QUj8C" alt=""><figcaption></figcaption></figure> The eye icon now has a strikethrough line through the icon to show the layer is hidden from view. <figure><img src="/files/GxDk4UMpSK6CDM4Bkb6i" alt=""><figcaption></figcaption></figure> To show the element once more, click the eye icon again. You will need to repeat this process for each screen size. ### Visibility Toggles Alternately, you may also show and hide elements using the Visibility toggles in that element's settings. Click the element and open the Settings menu. Then click the Visibility toggles to turn visibility on or off for each screen size as needed. <figure><img src="/files/qirw4IZq310kL24ctigA" alt=""><figcaption></figcaption></figure> # Building Blocks Blocks are elements you can add to your page using a quick and easy drag and drop action. Blocks have unique styling and configuration options and are described below. When editing a page you will find the Building Blocks on the top right of the screen. <figure><img src="/files/C8ossvqhQ95v08Z0dwwN" alt=""><figcaption></figcaption></figure> You find links for each Building Block section below: * [Basic Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks) * [Form Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks) * [Button Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks) * [Product Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/product-blocks) * [Carousel / Slider Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/carousel-slider-blocks) * [Icon Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/icon-blocks) * [Social Media Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/social-media-blocks) * [Testimonial Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/testimonial-blocks) * [Extra Blocks](https://help.konnektive.com) * [My Element Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/my-element-blocks) # Basic Blocks Basic blocks are webpage elements which are common to most pages. <figure><img src="/files/qjraChQRJWIF8LwQq8ss" alt=""><figcaption></figcaption></figure> *** ## **Columns** <a href="#basicblocks-columns" id="basicblocks-columns"></a> Columns allow you to divide your page into sections and edit unique sections of your page. An inner column can divide column elements into smaller sections of your page. {% hint style="info" %} *You need at least a single column added to the page builder to begin placing other elements.* {% endhint %} <figure><img src="/files/hRgfniJJH7o1TAWN4ADr" alt=""><figcaption></figcaption></figure> ### Custom Block <a href="#basicblocks-box" id="basicblocks-box"></a> **Custom Block is an interface used to create content-ready Rows.** <figure><img src="/files/ZRPmcO7oBWVpNkAyREyj" alt=""><figcaption></figcaption></figure> Custom Block presents a series of settings to create a customized Row using basic options from the [Bootstrap framework](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/bootstrap-integration). Drag the block onto the page where needed. A popup will show with the available options. <figure><img src="/files/w0FcnXuCLNu28hzqQ4zH" alt=""><figcaption></figcaption></figure> **Using the Row Confiuration, you will choose how many Columns you need in your Row and assign basic styling, as needed. Then set your Column configuration.** <figure><img src="/files/8lXHIzn1BCt04vZI13QV" alt=""><figcaption></figcaption></figure> Column configuration includes several basic content selections. The available options include: * Text blocks * Cards * Image Placeholders * Buttons * Form Elements. Each selection gives you a basic element ready to edit and style. The Cards selection is a basic layout including an image placeholder, a title, a text block and a button. Once your selections are made, click "Generate Layout" to add the content to the page. This layout generator includes only basic styling. Once generated, you can use the [Style Manger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager#select-styles-to-reveal-the-style-management-panel) to edit and style the individual components as needed. <figure><img src="/files/6xOFIi9xrpc5bV06IEjA" alt=""><figcaption></figcaption></figure> A word on Margin and Padding: You'll note there is no option for Margin in the Column Configuration. Margins interfere with the Bootstrap grid layout. Column width is determined by the number of columns in the row, 1-12 columns total. To add space around the content in a column, set the column padding as needed. If you need space around the outer edge of all columns in the Row, set your Row padding accordingly. Margin is the space outside the Row. Padding is the space inside the Row/outside the columns. ### Box <a href="#basicblocks-box" id="basicblocks-box"></a> Box is an additional div element to use as a container of other elements * Elements not supported inside a Box: Header, Footer, Inner Row. * Box cannot be dropped inside the following elements: Body, Row, Product Row, Text, Headline, Link, Image, Video, Map, Horizontal Line, Select, Input, Checkbox, Radio, Buttons, Label, Survey Options, Carousel. ## **Header** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Header to your page which can be styled to your liking. This element is used to apply a [Common Header](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to your funnel pages. <figure><img src="/files/9W0rjGuPptROh9TJZKR8" alt=""><figcaption></figcaption></figure> ## **Footer** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Footer to your page which can be styled to your liking. This element is used to apply a [Common Footer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to your funnel pages. <figure><img src="/files/QEoUO1JM5baIhP9h4jJp" alt=""><figcaption></figcaption></figure> ## **Headline and Text** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drage a Headline or Text element to your page. <figure><img src="/files/tLE3aJaE56HJDNWhWgZv" alt=""><figcaption></figcaption></figure> Text inside Headline and Text elements can be modified from the inline Text Editor menu. You can change the style of the text by making it bold, italicized, underlined or applying strike through. A text element can also be converted to a link. <figure><img src="/files/MH6gCLqfDVn3hGZwUN6m" alt=""><figcaption></figcaption></figure> Text can also be styled and managed in the Font styling menu. <figure><img src="/files/1umMkJKb8AhxMdJ1MuMB" alt=""><figcaption></figcaption></figure> ## **Link** <a href="#basicblocks-link" id="basicblocks-link"></a> Drag a link element to embed a link onto the page. <figure><img src="/files/zmetc5bQGjhvxfljZlRx" alt=""><figcaption></figcaption></figure> Within the Style menu for the link you can define the following attributes and behaviors: <figure><img src="/files/oyXobZm9Q2Vrr8z3eUAb" alt=""><figcaption></figcaption></figure> * Title: (Required) The text displayed for your link. * Link: When a link is defined, the visitor will be taken to an external redirect. * Action: (Required) What to do when your visitor selects the link. * Full details are [here](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks/button-and-link-actions) * Target: Defines which window the visitor will navigate to the url in: * This Window * New Window * Product: Assign a product to the link * Variant: Assign a variant to the link (must select Product first) * Replacement: Assign the product that should be replaced when the customer buys an "upgrade" * Animation: Apply an animation to your link * Delay (Sec): Add a delay (in seconds) before your link animation starts * Speed: Select the speed at which the animation plays * Loop: Choose if the animation should loop or not * Align: Define the alignment of your link respective to its parent element (column, inner column, etc.) ## **Image** <a href="#basicblocks-image" id="basicblocks-image"></a> You can add images to your Checkout Champ Page and asset folder by dragging the Image Block to your page. <figure><img src="/files/bQA6JSYji9jvlRPp8yHB" alt=""><figcaption></figcaption></figure> When you drag an image to your page, the image folder will display which will allow you to perform the following actions: #### Select an image from your Checkout Champ Assets Folder: <figure><img src="/files/VoJAHUsy0DEvrDEHP4hI" alt=""><figcaption></figcaption></figure> #### Upload an image to your Checkout Champ Assets Folder: <figure><img src="/files/Ih13oRhV2OgZSsRmmkJl" alt=""><figcaption></figcaption></figure> #### Select an icon from the Checkout Champ Icon Library: <figure><img src="/files/UszSQg3hKCyiu8uFb1UY" alt=""><figcaption></figcaption></figure> #### Select a Stock image from Unsplash: <figure><img src="/files/4yFM3hQQL7JcHlNAYLiJ" alt=""><figcaption></figcaption></figure> #### Enter the image's source URL: <figure><img src="/files/NBOZLC2Uv25Pz641pHKA" alt=""><figcaption></figcaption></figure> Once your image is added to your page, you will be able to format and style it in the following ways: <figure><img src="/files/RACXfhVZeivCCAuqOI7Z" alt=""><figcaption></figcaption></figure> * Title: Define a Title for your image. * Alt: Define alternative text for your image. * Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. * Alt tags will be displayed in place of an image if an image file cannot be loaded. * Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly. * Link: You can configure a link to your image so that when a visitor selects the image, they can be taken to a different site. * Target: If you have configured a link on your image, you can define whether the user will be taken to a different site in the same browser window or if a new browser window will be opened. * Align: Define the alignment of your image respective to its parent element (column, inner column, etc.) ## **Video** <a href="#basicblocks-video" id="basicblocks-video"></a> You can easily add exciting video content to your Checkout Champ page. <figure><img src="/files/hDEMZqz4IChvOIYjlnkC" alt=""><figcaption></figcaption></figure> After dragging the Video element to the page, open the style manager to define the settings for your video. <figure><img src="/files/SfQL8bJhpGTyTh7UVxzN" alt=""><figcaption></figcaption></figure> * Provider: Checkout Champ can support video content from the following providers: * HTML 5 Source * YouTube * YouTube (No cookie) * Vimeo * Wistia * JW Player * Rumble * Source: Once you select the video provider, you can define where your content is stored with that provider by setting the source. * Poster: If you want a specific image to display before your video plays, you can define a poster. * Autoplay: By enabling autoplay, your video content will begin as soon as the visitor arrives at your site. * Loop: By enabling loop, the video will restart once it has been completed. * Controls: By enabling controls, your visitor will be able to control your page’s video to pause, play, enable full-screen mode, and more. * Aspect Ratio: Choose from a set of predeteremined aspect ratios #### Videos: Call to action <a href="#basicblocks-videos-calltoaction" id="basicblocks-videos-calltoaction"></a> {% hint style="info" %} **This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers** {% endhint %} Call-to-action displays an element at a set time in a video **Step 1**: Select the video element. Open the video manager by clicking the clock icon. <figure><img src="/files/CSJszI5mESD1jppAsHC4" alt=""><figcaption></figcaption></figure> **Step 2**: Enter the time and the Id of the element to open at that time. <figure><img src="/files/9v1axjlmdHUcKKeZt40O" alt=""><figcaption></figcaption></figure> Press “Add new time log” to enter as many open times as needed **Step 3**: Save and Publish # Rows & Columns Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows. <figure><img src="/files/W98Q6tWoyAhF4IXLzL4s" alt=""><figcaption></figcaption></figure> #### CSS styling in Checkout Champ <a href="#rows-and-columns-cssstylingincheckoutchamp" id="rows-and-columns-cssstylingincheckoutchamp"></a> Our rows and columns rely on the Bootstrap CSS framework, a set of styles which adds structure to the page. As such, new columns will be be dragged onto the page with the Bootstrap class "col". This is the base Bootstrap CSS column class signifying "auto" width and will be automatically adjusted based on the page layout and number of columns in the row. #### Column Sizing <a href="#rows-and-columns-columnsizing" id="rows-and-columns-columnsizing"></a> The proper way to size columns is by using the Bootstrap Grid System and its associated classes, as explained below. You may manually adjust column widths, but that may have unintended consequences on the responsiveness of your design and is not recommended. #### Flexbox (Flex) A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry! Checkout Champ has a Flex interface built into the Advanced Styles menu. <figure><img src="/files/cETJs2Frw4szhjWyZRP5" alt=""><figcaption></figcaption></figure> You can adjust the Flex settings by making selections from the available options. <figure><img src="/files/rgn0rKxFccKQKyyCREWu" alt=""><figcaption></figcaption></figure> Alternately, you could click one of the nine options available in the Flex graph. This graph is a visual way to set the same Flex settings. Clicking the graph options will change the Flex settings accordingly. However, if you want uniform columns and rows across all devices, you’ll want to add and edit the Bootstrap column classes. These classes are explained in detail on the Bootstrap Grid System page. Please visit the following link to read more about the Bootstrap Grid System:\ <https://getbootstrap.com/docs/4.3/layout/grid/> Example Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem! You would use Bootstap column classes to set the proper layout.\ \ When looking at the classes assigned to each column, you will notice each column comes “fk-col” and "col". Similarly, each row uses “fk-row”. Both “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes automatically give each row and column the default style you see. <figure><img src="/files/10PXIQkqNITtnuNMDgLI" alt=""><figcaption></figcaption></figure> Using these default classes, Checkout Champ rows and columns are designed to automatically resize across screens sizes and stack on top of each other on smaller screens, like different mobile devices. But you can also control exactly where columns stack on top of one another by specifying the col classes. Let’s say you want to adjust the layout. On large mobile devices you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into the Bootstrap Grid System. (See this page for reference - <https://getbootstrap.com/docs/4.3/layout/grid/>) <figure><img src="/files/Dk1X3A9QyIAEvb9H3fd3" alt=""><figcaption></figcaption></figure> First, let's design for mobile views. (See our article on [device view](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar/device-view-changer)). On the desktop view, click in the box to "Add class here". Type your new class. In this case, type “col-lg-8” and click "Enter". Flex styling operates on fractions of Twelve, so “col-lg-8” assigns the column to span 8 horizontal fractions of the viewable screen. That is Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. You will then add "col-12" to make the column span full-width, all 12 spots of the 12-spot grid, and stack on top of each other on smaller, mobile screens. <figure><img src="/files/e4QQFoAED2yGTRSxU7Lz" alt=""><figcaption></figcaption></figure> Now you would add “col-lg-4” and "col-12" to Column 2's classes and click "Enter". <figure><img src="/files/evi1TPpJS1gfgpDIs53J" alt=""><figcaption></figcaption></figure> Your two columns are now different widths on desktop and other large screens. On smaller screens, those same two columns will take up the full-width of the page, stacking on top of each other. The Bootstrap Grid Systems, and its associated classes, make responsive design a breeze. Rather than specifying pixel widths for all of your columns, you only need to set the appropriate Flex classes, 1-12. Your columns will resize in each row on their own, showing the columns at the desired width across screen sizes.\ \ Again, visit the [Bootstrap Grid System page](https://getbootstrap.com/docs/4.3/layout/grid/) to learn more about all you can do with Column Classes and Flex settings. #### Manual Adjustment (Not recommended) To manually edit the width of your column, first delete the "col" class from the column's Classes by clicking "X" icon next to the "col" class. <figure><img src="/files/5EL7QEnrx2YYtdt84GNK" alt=""><figcaption></figcaption></figure> Then adjust the width in the Styles menu. <figure><img src="/files/K1YhiNl2XHM3RkVIXvgv" alt=""><figcaption></figcaption></figure> \ Using the Styles menu, you could move the width slider to the desired width or type a numerical width. Widths can be set in pixels or percentage. To resize on its own, you could also type "auto" (without the quotation marks) rather than specific numbers.\ \ Again, manual width adjustment is not the recommended approach as it can lead to unintended consequences across your page layout. # Form Blocks heckout Champ allows you to build custom forms or use premade form templates. The form templates available are dependent on the page type you are creating. <figure><img src="/files/J4JZXilcLy8mKTlKi5tE" alt=""><figcaption></figcaption></figure> * [Forms](#formblocks-form) * [Input](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicate-input-indicator) * [Label](#formblocks-label) * [Radio Button](#formblocks-radiobutton) * [Checkbox](#formblocks-checkbox) * [Select](#formblocks-select) * [Select Month & Select Year](#formblocks-selectmonth-and-selectyear) * [Shopping Cart](#formblocks-shoppingcart) *** ### Forms <a href="#formblocks-form" id="formblocks-form"></a> <figure><img src="/files/i2cYuqGLShj2JDRSyNQX" alt=""><figcaption></figcaption></figure> The forms element will add a basic form to your page which you can add more inputs to and style to your needs and preferences. This form includes the following fields: * Name - Input Field for First Name * Email - Input Field for Email address * Gender - Radio Buttons with Male/Female options * Save/Submit Button - Button element which can be configured to perform specific actions based on your preference. <figure><img src="/files/FH8Zpen753ltbsiphpSv" alt=""><figcaption></figcaption></figure> *** ### Input <a href="#formblocks-input" id="formblocks-input"></a> <figure><img src="/files/ap8sjaipJkVIdloX5ElX" alt=""><figcaption></figcaption></figure> A form input field which can be used to collect custom data. After selecting an Input element, use the Settings inside the Style Manager to determine which field that the input represents. {% hint style="success" %} Additional instructions for Custom Fields: [Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs) Additional instructions for Placeholder formats: [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats) {% endhint %} <figure><img src="/files/2OBbYI7AIpbXxSYwf1kU" alt=""><figcaption></figcaption></figure> *** ### Label <a href="#formblocks-label" id="formblocks-label"></a> <figure><img src="/files/R77LukSEUjUG5aZgBTSK" alt=""><figcaption></figcaption></figure> Use labels to define form elements.<br> *** ### Radio Button <a href="#formblocks-radiobutton" id="formblocks-radiobutton"></a> <figure><img src="/files/HfZf1oCzQ3Y8936kdJw5" alt=""><figcaption></figcaption></figure> Add a radio button element to your page when you want your visitors to make a selection. A radio button can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your radio button. <figure><img src="/files/Cn0jFH1jjCtyrHTiUNTW" alt=""><figcaption></figcaption></figure> *** ### Checkbox <a href="#formblocks-checkbox" id="formblocks-checkbox"></a> <figure><img src="/files/EqN6uPOfzcm8nav6o1U4" alt=""><figcaption></figcaption></figure> Add a checkbox element to your page when you want your visitors to select or acknowledge something on your page. A checkbox can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your checkbox. <figure><img src="/files/OkFw9IFq0ZdLNm1H6xJp" alt=""><figcaption></figcaption></figure> *** ### Select <a href="#formblocks-select" id="formblocks-select"></a> <figure><img src="/files/B6PR4VcUd2d7TTHrirYX" alt=""><figcaption></figcaption></figure> This element can be used to provide a drop down menu of different options.\ \ After dropping the Select element to your page, click on the element and view it’s settings under the Style Manager. <figure><img src="/files/njvmBa8KbHuUhjfk20il" alt=""><figcaption></figcaption></figure> Set the Name of the element from the dropdown options. If you choose Card Month, Card Year, Ship Profile, State, Ship State, Country or Ship Country, the options for the customer will automatically appear on the live page. *** ### Select Month & Select Year <a href="#formblocks-selectmonth-and-selectyear" id="formblocks-selectmonth-and-selectyear"></a> <figure><img src="/files/7XQewuppDKlqWgd4p6zR" alt=""><figcaption></figcaption></figure> These are premade versions of the Select element which are preset to be a month/year selector. *** ### Shopping Cart <a href="#formblocks-shoppingcart" id="formblocks-shoppingcart"></a> <figure><img src="/files/uWRv0Sz9MIKZXqsH4S5R" alt=""><figcaption></figcaption></figure> Please view [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks/shopping-cart-element) for more information about the Shopping Cart element. *** # Shopping Cart Element * [Legacy Cart](#shoppingcartelement-legacycart) * [Product Images](#shoppingcartelement-productimages) * [Shopping Cart](#shoppingcartelement-shoppingcart) * [Additional Features/Settings](#shoppingcartelement-additionalfeatures-settings) * [Side Cart / Drawer Cart](#shoppingcartelement-sidecart-drawercart) The shopping cart elements are used to dynamically display the customer’s chosen product details and the corresponding prices and amounts. The shopping cart element blocks are also sometimes known as an “order summary”, but the elements in the builder are labeled as a “Shopping Cart”. ### Legacy Cart <a href="#shoppingcartelement-legacycart" id="shoppingcartelement-legacycart"></a> The Legacy Shopping Cart element displays the chosen product details, including a **per unit price\*** for each product in the table and can be found under the Forms section of the Building Block elements. **\*See instructions below to make the price in the table reflect the quantity chosen.** <figure><img src="/files/iCaJPxOjULqKsSrusIWJ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/h0XS3oPGPUL4SYTPBNRk" alt=""><figcaption></figcaption></figure> This element comes with two options for displaying the quantity. You can remove either the quantity bubble or the entire quantity column (both parts). <figure><img src="/files/5ROFC8ASnK2Dcvl0e7rW" alt=""><figcaption></figcaption></figure> If you decide to use the quantity column, this provides the customer with the ability to adjust the quantity of the products the chose by default, but these buttons can be removed if you don’t want the customer to adjust the quantity. <figure><img src="/files/psqye9hIjKerJJEYYW3S" alt=""><figcaption></figcaption></figure> **\*The table can be adjusted so the price on the table reflects the quantity chosen.** To do so, open the code editor inside the page and perform a CTRL+F for “Price”. Find the section that looks like the screenshot below where you can see the table headers for Item, Quantity (if not removed), and Price. <figure><img src="/files/Qcx2VcTq0bOycBFAxcpX" alt=""><figcaption></figcaption></figure> Go to the title within this table which is defined as “Price” and change “Price” to “Total” Once that is changed, be sure to save the editor, then save the page and publish the funnel. ### Product Images <a href="#shoppingcartelement-productimages" id="shoppingcartelement-productimages"></a> If product photos are stored in Checkout Champ CRM, when a shopping cart element with an image is added to a page, the CRM image will display on the page when the product is selected. Make sure your base product has an image under CRM→Products . <figure><img src="/files/7NLNQmUDmXNLNFUZEs2V" alt=""><figcaption></figcaption></figure> Once your page is previewed or published and the product is selected, the image will be presented from CRM: <figure><img src="/files/DPHhnrCDGz5qVQ7tQXmz" alt=""><figcaption></figcaption></figure> ### Shopping Cart <a href="#shoppingcartelement-shoppingcart" id="shoppingcartelement-shoppingcart"></a> Our Shopping Cart element comes with all of the features and data of the Legacy cart. However, the Shopping Cart element has more flexibility when it comes to styling. The cart is built on Bootstrap rows and columns which allows users to utilize flex settings to change the layout across all screen sizes. It also allows users to change how the order information is displayed given users more options when designing pages. <figure><img src="/files/a1DqipQxemOakUsJuBSY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/mQgUVAO9Y9YWh8gVvjt5" alt=""><figcaption><p>Default mobile view</p></figcaption></figure> ### Additional Features/Settings <a href="#shoppingcartelement-additionalfeatures-settings" id="shoppingcartelement-additionalfeatures-settings"></a> The Shopping Cart also allows features not available in the Legacy Cart. By duplicating the default product price box and changing the associated CSS classes, you can also show customers the product compare at price, product savings and/or product savings percentage. Then you can style each new figure as needed, even adding additional text boxes to show any additional text you may want to show (as shown below). <figure><img src="/files/ZfaoURHRXQefwlTWq6Oi" alt=""><figcaption><p>Additional Features</p></figcaption></figure> To add these features to your cart, you would need to duplicate the default product price box and edit the CSS classes to display the desired data. <figure><img src="/files/FJtrZ6NSoaabohHI50f6" alt=""><figcaption><p>Edit CSS Classes</p></figcaption></figure> The additional CSS classes are below: To display the product compare at price, use "cc-cart-row-prod-compare"![](/files/bGpehh48qv6Za3xr567o) To display the product savings, use "cc-cart-row-prod-saving" ![](/files/DYWbBGZUaSXurGrtFoxY) To display the product saving percentage, use "cc-cart-row-prod-saving-perc"![](/files/heN7fbW1CDTB3Hxs1Qvr) To display product savings with a minus sign before the currency sign, use “cc-negative-savings”. Once added, you can style as needed using the font settings for each element. **Items of note:** These additional elements are displayed “per product” in the cart. The “Compare At Price” is set on the Campaign Offer. <figure><img src="/files/s27on4Bt5yR1TFCru1GU" alt=""><figcaption></figcaption></figure> The calculations are done as follows: “Product Savings” = Compare At Price - Offer Price “Product Savings Percentage” = (Compare At Price - Offer Price) / Compare At Price X 100 <details> <summary>How to adjust the cart to horizontal on mobile view</summary> * Search for the column with class col-sm-9 and replace it with col-9 ![](/files/LRe9DK1ai9k0uXlalerQ) * Search for the column with class col-sm-3 and replace it with col-3 ![](/files/qjpPEfKqaVfxDCWSRQ8N) * In the CSS set padding and margin to 1px on cc-cart-container * In the CSS set cc-cart-row to font-size:13px on @media (max-width:480px) * Set the text to align left it already isn't ![](/files/if4dHNYwv4Jj9g6SeG9t) </details> ### Side Cart / Drawer Cart <a href="#shoppingcartelement-sidecart-drawercart" id="shoppingcartelement-sidecart-drawercart"></a> Several of our pages will have a side cart (also called a drawer cart) available in the header element. Clicking the cart icon will open a side cart containing an order summary similar to our other order summaries with button to move to a cart page or go straight to your checkout page. In order to style the details of this element, you will first need to add a Header element, then open the side cart. <figure><img src="/files/jlPmJdW3ACJQfU09xLua" alt=""><figcaption></figcaption></figure> Once the Header element has been added to the page, you may open the side cart by clicking on the shopping cart icon in the top menu of the builder. Clicking the shopping cart icon visible on the page itself will not open the side cart in the builder. Once the side cart is open you are free to style as needed. <figure><img src="/files/nRPtwnt1Tb9IYeaxxY4F" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Clicking the shopping cart icon visible on the page’s Header element will open the Font Awesome icon selector allowing you to choose a different icon. Clicking that icon will not open the side cart. {% endhint %} # Button Blocks Inside the Buttons menu within the Building Blocks you have several buttons to choose from to add to your pages.\ \ You will find that some buttons have different styling variations, however, the functionality will remain the same across the different variants. <figure><img src="/files/97iAk3fezj7TycGUylAD" alt=""><figcaption></figcaption></figure> With the button element selected from the page, you can open the settings for the element to adjust several settings <figure><img src="/files/BFAOjk8lRFxtrwF2GaKW" alt=""><figcaption></figcaption></figure> **Title** - Gives a name to the button so you can easily identify it when applying to the page arrows on the funnel visualizer. **Text** - This is the text that displays onto the button. If no Title, the Text will show when configuring page arrows. **Action** - See [Button Actions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks/button-and-link-actions) **Product** - Allows you to tie a product to a button so it is submitted with the customer's information. If your product was passed in from the previous page, or the checkout page has radio buttons or checkboxes with products applied, then you may not need to apply a product to the Checkout/Submit button. **Variant** - Same as product value but for that product’s specific variant. **Replacement** - This is useful for upgrading a one-time to a subscription on an upsell page. Will replace the product chosen in this value with the product selected in the product/variant value. **Animation** - Allows you to set an animation to your buttons. Can also be used to [hide a button](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) during a video. **Delay (Min)** - Sets a delay on when the button will begin animating. **Delay (Sec)** - Sets a delay on when the button will begin animating. **Speed** - Sets the speed of the animation. **Loop** - Choose if the animation should loop or not. **Align** - This will align the button to the left, center, or right side of the element it resides in. # Button & Link Actions There are various actions available on buttons. Most of these actions are also available on links. *** ## **Add To Cart** This action will add a product to the customer’s shopping cart, without navigating the customer to another page of the funnel. This is mainly used for storefront websites that contain a catalog of products and a dedicated cart page. ## **Submit + Route** Submit page data to the CRM and route the customer to the next page of the funnel. This action can be used to submit lead information, billing/shipping information, product information, and card information. Submit + Route should be used on Lead Pages where a form exists, and any Checkout Page or Upsell Page buttons that should allow the customer to buy the product(s). ## **Route to Next Page** Route the customer to another page in the funnel. Any inputs on the page will be saved to the user session. Any products chosen on the page will be saved in the shopping cart. This action is most commonly used on a landing page that contains a product selection without a form for the customer to enter their information. ## **Route & Clear Cart** Route & Clear Cart will route the customer to another page in the funnel. However, any products in the shopping cart will be removed. This action is most commonly used when offering a customer a discounted product on a secondary checkout page, typically triggered by an Exit popup. ## **Open Section** Open another element on the page. Specify the ID of that element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, any other buttons on the page that open a section will have their sections closed. The sections to open are available in the page builder for you to design, but those sections will be hidden when the published page loads. ## **Open Section + Hide** Open another element on the page AND hide this button. Specify the ID of the element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Submit Lead + Open Section** This action facilitates lead submission on a checkout page. Submit entered inputs for processing, remain on the page, open another element on the page, and hide this button. Specify the element to open in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Open Popup** Open the page popup. This is another type of trigger for the popup (on the popup itself you can choose to trigger on load or on scroll, with a time delay). See [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up) for more information. ## **Apply Coupon** If there is a coupon field on the page, this action will apply the entered coupon code to the order. ## Login Allow the customer to log into their account so they can purchase with their card on file. ## Default This option applies no action to the button. This is useful if you are using the button or link to trigger some sort of custom script. {% hint style="info" %} PayPal, Affirm, AfterPay, Klarna, Sezzle, iDEAL, Bancontact, GiroPay, Apple Pay, Amazon Pay and Google Pay buttons should always be set to **Submit + Route** {% endhint %} # Product Blocks Inside the Products menu within the Building Blocks you have several options to choose from to add to your pages.\ \ The Checkbox and Radio Button options are also available under the [Forms](broken://pages/MoWZFbWoEEpmI6p9PYOG) menu, but only the Product variation of these elements will allow you to tie a product to the checkbox or radio button.<br> * [Product Checkbox](#productblocks-productcheckbox) * [Product Radio Buttons](#productblocks-productradiobuttons) * [Variant Selection](#productblocks-variantselection) * [Product Selection](#productblocks-productselection) * [Product Tile](#productblocks-producttile) * [Order Bump](#productblocks-orderbump) <figure><img src="/files/JSRmaQ5ReDFxBSOp23Vx" alt=""><figcaption></figcaption></figure> *** ### Product Checkbox <a href="#productblocks-productcheckbox" id="productblocks-productcheckbox"></a> Dragging this Block onto the page will add three checkboxes to the page. You can remove any extras if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/i5T56As4tNi1fch26CjX" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/az7DHIEd8nbQwMGlunoH" alt=""><figcaption></figcaption></figure> *** ### Product Radio Buttons <a href="#productblocks-productradiobuttons" id="productblocks-productradiobuttons"></a> Dragging this Block onto the page will add three radio buttons to the page. You can remove the extra radio buttons if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/pNq8C6e5HmkilmDbWVd8" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the radio button and open the element’s settings within the Style Manager. You can also set a radio button to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/VeAEptIMlJbRAJhvDrAd" alt=""><figcaption></figcaption></figure> *** ### Variant Selection <a href="#productblocks-variantselection" id="productblocks-variantselection"></a> There are two premade variant selection blocks that you can drag onto your page where you can allow the customer to choose from multiple variants of a single product. <figure><img src="/files/gUDdjtVQpySEDDky832L" alt=""><figcaption></figcaption></figure> To apply a product to the element, you will click on the empty space within the element and then open the element’s settings After you apply the product, the variant options will be available within the dropdown menu. If you don’t have three variants, you can remove any extras by clicking the element and then the Trash Can on the element tool bar. *** ### Product Selection <a href="#productblocks-productselection" id="productblocks-productselection"></a> This is a premade element that allows you to quickly drag a button and image onto the page. <figure><img src="/files/0m1J0upQHc2ZBsHbjc8V" alt=""><figcaption></figcaption></figure> To apply a product to the element, click on the button and then open the element’s settings to choose the product and button action. *** ### Product Tile <a href="#productblocks-producttile" id="productblocks-producttile"></a> Dragging this Block onto the page will add three product tiles with radio buttons to the page. You can remove the extra tiles if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/jyJNrgeS7KdegZ1C2RVq" alt=""><figcaption></figcaption></figure> You can adjust the formatting within the [Style Manager](https://konnektive.atlassian.net/wiki/spaces/CC/pages/1859554055/Style+Manager) and swap out the images for your own product images. To apply products to each option, click on either the radio button or the normal button within each tile and then open the element’s settings to choose the product. You can also set a radio button to be preselected when the page loads by enabling the Checked option. *** ### Order Bump <a href="#productblocks-orderbump" id="productblocks-orderbump"></a> This is a premade element that you can drag to your page to offer extra products for the customer to purchase before submitting their payment on the checkout page. <figure><img src="/files/sERw92nPN1cLTcUqns89" alt=""><figcaption></figcaption></figure> You can adjust the formatting and the text within the element within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles). To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. *** # Carousel / Slider Blocks * [Carousel Elements](#carousel-sliderblocks-carouselelements) * [Additional Slides](#carousel-sliderblocks-additionalslides) * [Carousel Style](#carousel-sliderblocks-carouselstyle) * [Carousel Images](#carousel-sliderblocks-carouselimages) * [Thumbnail Nav Images](#carousel-sliderblocks-thumbnailnavimages) * [Carousel Settings](#carousel-sliderblocks-carouselsettings) * [Custom Slick Slider Settings](#carousel-sliderblocks-customslickslidersettings) Carousel Blocks offer several drag-on options for adding Image Carousels/Sliders to your pages. Built using the robust Slick Slider framework, each Carousel has a different layout but they come with the same available settings. To get started, navigate to the Carousel section of the Building Blocks menu and drag one of the Carousels onto your page. Please note, Carousels will need to be placed inside a column element to function correctly. <figure><img src="/files/2NA2TkNN4KJksGC6eKPu" alt=""><figcaption></figcaption></figure> ### Carousel Elements <a href="#carousel-sliderblocks-carouselelements" id="carousel-sliderblocks-carouselelements"></a> Each Carousel is made up of individual elements: * The Carousel container * The Carousel Slide container * The image and/or text of each slide <figure><img src="/files/H1PtWgVH2xfiYTqgk6Re" alt=""><figcaption></figcaption></figure> The image above shows each Carousel element highlighted by layer. {% hint style="info" %} Please note: You cannot select every layer simultaneously as depicted in this image. However, selecting the layer above will also select the elements contained in that layer. For example, selecting and duplicating a Carousel Slide element will also duplicate the image and text contained within that slide. {% endhint %} ### Additional Slides <a href="#carousel-sliderblocks-additionalslides" id="carousel-sliderblocks-additionalslides"></a> Each Carousel element begins as a main slide. You can add as many slides needed by clicking the duplicate button on any existing Carousel Slide element. Each duplicate slide will appear in sequential order after the copied slide. Once duplicated, you may edit each of the slide elements individually. <figure><img src="/files/fvWqMuLby5AzyWdNSV12" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Take care to duplicate only the “Carousel Slide” element (the box surrounding the slide image and/or text). You do not want to duplicate the entire “Carousel” element. You also do not create additional slides by duplicating only the image. You must duplicate the “Carousel Slide” element. {% endhint %} ### Carousel Style <a href="#carousel-sliderblocks-carouselstyle" id="carousel-sliderblocks-carouselstyle"></a> After you drag a Carousel element onto the page, you can edit the slide elements (images and text) using standard styling (font settings, dimensions, etc.). Making these styling choices on the first slide will make it easier to replicate styles on subsequent slides as you would typically duplicate the first slide to make additional slides. {% hint style="info" %} It should be noted that carousel styling is best done by adding classes to the style elements rather than styling every component individually. For image dimensions, it is best to leave the image dimensions on “auto”. Then, allow the carousel dimensions to be dictated by its surrounding column. {% endhint %} ### Carousel Images <a href="#carousel-sliderblocks-carouselimages" id="carousel-sliderblocks-carouselimages"></a> Once you have duplicated the initial slide to create new slides, you will need to add your own slide images. To change the images in your slides, navigate to each individual slide by clicking on the arrows, dots, or dragging the image left-to-right. Once on the correct slide, double-click each image and select or upload your new image. ### Thumbnail Nav Images <a href="#carousel-sliderblocks-thumbnailnavimages" id="carousel-sliderblocks-thumbnailnavimages"></a> While the thumbnail slides and the main carousel slides are linked for navigation, in reality they are two distinct carousels. You need to select individual images for each carousel. However, the thumbnail slides will drive the navigation for the main carousel. For example, the first thumbnail slide will navigate to the first main slide. The second thumbnail slide will navigate to the second main slide, etc. You need only select images for each of the carousel slides in both the main carousel and the thumbnail carousel. ### Carousel Settings <a href="#carousel-sliderblocks-carouselsettings" id="carousel-sliderblocks-carouselsettings"></a> Each carousel includes a variety of settings to control how the slides function. Open the Settings tab to style Carousel operation. The function of each setting is described below: <figure><img src="/files/zYYmZm0Iwq7TXl2EOZEG" alt=""><figcaption></figcaption></figure> | **Setting** | | | --------------- | --------------------------------------------------------------------------- | | Touch Swipe | Allow navigating by swiping the slide, in addition to an arrows and/or dots | | Show Arrows | Show the navigation arrows | | Arrow Position | <p>Outside Carousel<br>Inside Carousel</p> | | Infinite | Continues back to the first slide when the last slide is reached | | Dots | Show navigation dots under the slides | | Vertical Slide | Slide the carousel up and down | | Vertical Swipe | Swipe up and down to move to the next slide | | Autoplay | Carousel slides automatically slide on page load | | Pause On Select | Stops autoplay when slide is clicked | | Pause On Hover | Pauses autoplay on mouse hover | | Fade | Adds a “fade” transition so one slide “fades” into the next | | Show Slides | Enter how many slides will show at once | | Scroll Slides | Enter how many slides will scroll at once | | Autoplay Speed | Number of seconds to wait between swipes | | Navigation For | Sets this carousel as thumbnail navigation for the specified carousel | ### Custom Slick Slider Settings <a href="#carousel-sliderblocks-customslickslidersettings" id="carousel-sliderblocks-customslickslidersettings"></a> For those familiar with manually installing Slick Slider carousel code, you do have the option to add custom Slick Slider settings directly in the carousel javascript. **The main carousel script should NOT be edited.** However, there is a “-var” script included with each carousel. The “-var” script is used to add custom javascript settings available from the [Slick Slider settings](https://kenwheeler.github.io/slick/) options. <figure><img src="/files/VjtsKtACFZoJwBqvYuzR" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} If not done correctly, directly editing the HTML and JavaScript code of your page could negatively impact the performance of your carousel and/or your page. {% endhint %} # Icon Blocks Inside the Icons menu within the Building Blocks you have several options to choose from to add to your pages. <figure><img src="/files/ENd5kLxSyhbES43shFwS" alt=""><figcaption></figcaption></figure> After you drag an icon onto the page, you can click on the icon again to adjust it’s size by dragging the corners of the icon.\ \ If there is not an icon you are looking for, you can also use an [Image](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks) element to upload a picture. *** These are all of the available icons at the writing of this article: <figure><img src="/files/BjI4zm3Yi3Ix2aJYvsC0" alt=""><figcaption></figcaption></figure> # Social Media Blocks You can add social media icons to your pages for all of the major social media sites. These elements are located inside the Social Media menu within the Building Blocks. <figure><img src="/files/Wwm0DS2Ip1yVH9fZARR2" alt=""><figcaption></figcaption></figure> After you drag an icon onto the page, you can click on the icon again to adjust it’s size by dragging the corners of the icon.\ \ Also with the icon selected, you can set the link that the icon will open to within the element’s settings inside the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles). <figure><img src="/files/BOLGlJ1fBFCNalf9Tyv5" alt=""><figcaption></figcaption></figure> *** These are all of the available social media icons at the writing of this article: <figure><img src="/files/YLoU1Zd3at5gax8tCb0B" alt=""><figcaption></figcaption></figure> # Testimonial Blocks Inside the Testimonials menu within the Building Blocks you have several options to choose from to add to your pages. <figure><img src="/files/60ASXzT037JSK7Ur5jmt" alt=""><figcaption></figcaption></figure> After you drag a testimonial template onto the page, you can edit the images and adjust the formatting to your content.\ \ You can quickly add another testimonial of that same type by clicking on the space within the element that highlights the entire element, and then click the Duplicate button. <figure><img src="/files/VFYB1mbZeqEPpB51O38t" alt=""><figcaption></figcaption></figure> <br> # Extra Blocks * [Bullet List](#extrablocks-bulletlist) * [Progress Bar](#extrablocks-progressbar) * [Collapsible List / FAQ Section](#extrablocks-collapsiblelist-faqsection) * [Timer](#extrablocks-timer) The “Extra” blocks are a collection of elements that can be used to add additional functionality to your pages. <figure><img src="/files/iU8OZKF7I5hEuKU57HYy" alt=""><figcaption></figcaption></figure> ### Bullet List <a href="#extrablocks-bulletlist" id="extrablocks-bulletlist"></a> The bullet list block is used to add a bullet list to your pages. <figure><img src="/files/U7YAhJt7EyBiqpKpUNL4" alt=""><figcaption></figcaption></figure> Once dragged onto the page, the bullet list text can be styled using the Font settings. The bullet icon itself can be changed by clicking the icon and selecting a new icon from the Font Awesome icon selector. <figure><img src="/files/f4d0VKPeV0G6J2J4E4FL" alt=""><figcaption></figcaption></figure> When duplicating bullet list items to extend the number of items in your list, it is important to note the need to select the correct element. Do not duplicate the box containing the bullet text. You would need to arrow up and duplicate the “LI” element. <figure><img src="/files/1RmhIF7OkskAvt9gJbaV" alt=""><figcaption></figcaption></figure> ### Progress Bar <a href="#extrablocks-progressbar" id="extrablocks-progressbar"></a> The progress bar element is used to display the perception of progress across multiple pages. The progress bar does not actually track progress across pages. The progress percentage is a display element set on each page. There are several progress bar blocks available. The different blocks differ in style, but functionally they are the same. <figure><img src="/files/ruY4qmIuLp2m9egNWbjg" alt=""><figcaption></figcaption></figure> After dragging the progress bar block onto the page. Click the portion of the element containing the progress percentage ( % ). Once selected, you can change the font style, background settings and progress percentage in the settings menu. <figure><img src="/files/fhvcUJUEKY9isz1H3kP4" alt=""><figcaption></figcaption></figure> ### Collapsible List / FAQ Section <a href="#extrablocks-collapsiblelist-faqsection" id="extrablocks-collapsiblelist-faqsection"></a> There are two collapsible list blocks available. The difference between the two is the location of the dropdown icons (left or right). Functionally, they are the same. <figure><img src="/files/BqdNDTBYaKl3xCb649VQ" alt=""><figcaption></figcaption></figure> To use the collapsible list to add an FAQ-style question and answer section to your pages. Simply drag the block onto the page and edit as needed. Click on the different text elements to type your own questions and answers (descriptions) and use the Font settings to style accordingly. You may also change the open/close icons by clicking the icon and selecting a new icon from the Font Awesome icon selector. The top icon is the “open” icon. The bottom icon is the “close” icon. <figure><img src="/files/edJ8byEhY1xnqP9Nnvqj" alt=""><figcaption></figcaption></figure> Should you want one or more of the FAQs to be open by default, check the box for “Default Open” in the list settings. This would be set per FAQ. <figure><img src="/files/VUmUBo6eC2pDdkuyi604" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Please note: The FAQs/Collapsible Lists will always remain “open” inside the builder. {% endhint %} ### Timer <a href="#extrablocks-timer" id="extrablocks-timer"></a> The Timer element would be used any time you would like to add a timer to your pages to instill a sense of urgency on your pages. <figure><img src="/files/ldHiOsPGLuda309QMv8b" alt=""><figcaption></figcaption></figure> After you drag a timer block onto the page you can click on the numbers/text and use the Font menu under the Style Manager to adjust the font type, size, and color of the text and numbers. <figure><img src="/files/KpHEUe4WXUydf7PA6XXc" alt=""><figcaption></figcaption></figure> To configure the Timer itself, click on the space to the far left or right within the element that highlights the entire Timer element. Then open the element’s settings inside the [Style Manager ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles)to configure the Timer. <figure><img src="/files/oz5XLAaqKSoXrhbH1QVe" alt=""><figcaption></figcaption></figure> **Timer Type**: * Minute Timer - Timer set based on Hours, Minutes, and Seconds values * Countdown Timer - Counts down to the Date and Time specified in the **Start** value * Count Up Timer - Timer counts up from 0 until the time set in the Hours, Minutes, and Seconds values **End Text**: The text you want to display after the timer completes. End Text could display a simple text message (EXPIRED!), a url to send users to another page (<https://etc>), or an element ID to open a previously hidden element (#12345) **Align**: Choose the alignment of the Timer within the element it resides **Hours**: Sets the hour value on the timer. Will overlap to Days value if >24 hours and Days is not removed from the Timer **Minutes**: Sets the minute value on the timer **Seconds**: Sets the seconds value on the timer Relative Links: [Make a button appear after a set amount of time](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) # My Element Blocks Inside the My Elements menu within the Building Blocks you see all of the elements that you have previously saved. This allows you to drop an element that you’ve built on to several pages without having to rebuild that element.<br> <figure><img src="/files/dYokjRH1shfoEQlJXCUF" alt=""><figcaption></figcaption></figure> \ Only Row, Column and Box elements can be saved to your My Elements section. To save a row, column, or box element, click on the area of the element where the column itself becomes highlighted. Then click the floppy disk icon to save that element for future use. {% hint style="info" %} Keep in mind the elements must fit inside of the page structure you are using them in. Columns go inside of Rows and so on. {% endhint %} <figure><img src="/files/tKxTuGaX4y5aAxsQLo9G" alt=""><figcaption></figcaption></figure> After you click save, name the element so it can be easily identified later on. <figure><img src="/files/Etv2QWXYzBAnO4Q11bBG" alt=""><figcaption></figcaption></figure> After saving the name of the element, you will now find this under your My Elements section. <figure><img src="/files/PIAGJjyw8en1PowO8LuX" alt=""><figcaption></figcaption></figure> To remove a saved element, open the My Elements section and then click the trash can icon on the element you’d like to remove. <figure><img src="/files/CUSlx3ZLnKiFjkl1jeSc" alt=""><figcaption></figcaption></figure> {% hint style="info" %} For more specific elements you can search the element id in the HTML and add data-box=”true” after the opening div, save it. Click on the element again and you will be able to save it. {% endhint %} # Page Builder 2.0 The new and improved CheckoutChamp page builder is here! [Explore all the new features.](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/new-features) #### Perform the upgrade Select any page on the visualizer and click the Settings gear icon. Then choose the **Upgrade to 2.0** button. <figure><img src="/files/VOs5JKFmnJdBJ9InxUxp" alt="" width="563"><figcaption></figcaption></figure> Follow the prompts to upgrade the page. There is also an option to upgrade all pages in the funnel. Choose the "all" option only when you are certain, as the procedure to revert the upgrade is page-by-page. Edit the page as you do any other page. #### Revert the upgrade You can revert the upgrade of a single page at any time. Open the page Settings. Choose **Version History**. <figure><img src="/files/bkY1W2hrioxW7glwjL3Z" alt="" width="563"><figcaption></figcaption></figure> Select the box next to the version prior to 2.0. Then press **Restore**. Any changes made on 2.0 will be lost. <figure><img src="/files/2VwHKtdCrPSGvSbZUPSp" alt="" width="563"><figcaption></figcaption></figure> ### Relative Links * [Builder Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar) * [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) * [Layer Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/layer-manager) * [Building Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks) * [Adding Local HTML Files](/funnel-builder/creating-and-editing-funnels-pages/adding-local-html-files) # New Features! Our new page editor contains everything you love about CheckoutChamp plus all of these new features 1. Streamlined UI/UX 2. Light and Dark modes 3. Absolute positioning of elements 1. Show relative positioning alignment and distances when dragging 2. Ability to overlap elements 3. Ability to group/ungroup elements 4. Ordering of absolutely positioned elements using Context Menu 1. Bring To Front 2. Send To Back 3. Bring Forward 4. Send Backward 4. Ability to switch between pages while in the page editor (edit multiple pages in one page editor session) 5. Right-click to perform operations on an element 1. Lock 2. Delete 3. Duplicate 4. Edit Code 5. Hide on all devices 6. Move front and back, for overlapped absolute-positioned elements 6. Page Builder keyboard shortcuts 1. Delete (Delete / Backspace) 2. Duplicate (Ctrl D / Cmd (⌘) D) 3. Edit Code (Ctrl E / Cmd (⌘) E) 4. Undo (Ctrl Z / Cmd (⌘) Z) 5. Redo (Ctrl Y / Cmd (⌘) Y) 6. Close the code editor, popup manager, and color picker (Esc) 7. Context Menu 1. Open for the current selected element (Right-click) 2. Open for the last selected element (Ctrl + Right-click) - Helpful when there is less whitespace for the element to be right-clicked 8. Open browser default context menu (Shift + Right-click) 7. Text Editor keyboard shortcuts 1. Use these shortcuts on the rich text editor 2. Copy (Ctrl C / Cmd (⌘) C) 3. Paste (Ctrl V / Cmd (⌘) V) 4. Bold (Ctrl B / Cmd (⌘) B) 5. Italic (Ctrl I / Cmd (⌘) I) 6. Underline (Ctrl U / Cmd (⌘) U) 7. Strikethrough (Ctrl + Shift + X / Cmd (⌘) + Shift + X) 8. Code Editor keyboard shortcuts 1. Use these shortcuts in the code editor 2. Go to parent (Ctrl P) 3. Close code editor (Esc) 4. Undo (Ctrl Z / Cmd (⌘) Z) 5. Redo (Ctrl Y / Cmd (⌘) Y) 9. Improved Undo and Redo 10. Improved Layer Manager 1. Rename elements 2. Right-click inside Layer Manager to manage elements 3. Keyboard shortcuts 11. Wider Settings and Style Manager panel to be fully readable on desktop and laptop 12. Style Manager 1. Basic and Advanced tabs on Style Manager. Your preference is retained leaving the page editor. 2. Ability to change styles for even/odd elements 13. Simple toggle to hide elements on each device on Settings Manager 14. Ability to easily switch between sub-types of elements in Settings Manager 1. Testimonial (and maintains content when switching) 2. Carousel 3. Order Bump 4. Button 5. Survey 6. Variant Product Sections 15. Blocks, Settings, and Style Manager all sit on top of the page editor canvas and can be moved around for page visibility. The page encompasses the entire width of the monitor. 16. Preview in a new tab, with ability to switch between 5 device views 17. Product Sections - variants and images of the assigned product are visible in the editor 18. Color picker retains the previous 15 colors selected per user 19. Color picker contains the main site color 20. Ability to multi-select elements and update styles for all 21. Ability to lock an element (settings and style and position) 22. Ability to view and edit code on an element 23. Improved code editor 1. Formatted and validated html and css 2. Expand html and css sections for readability 3. Full head and body sections in html 24. Group elements (Shift + Click or Ctrl + Click) 25. Icon selection moved from element to Settings Manager # Builder Toolbar The Builder Toolbar is a quick navigation menu which supports valuable functions. It is found at the top of every Checkout Champ page within the Page Builder. <figure><img src="/files/2yQDsmdgrtj9xZt0pkP1" alt=""><figcaption></figcaption></figure> *** ## Blocks Open the Blocks Menu to add new elements to the page. <figure><img src="/files/1NDBoqyiU3sZ6k51CoZn" alt=""><figcaption></figcaption></figure> ## Layer Manager Open the Layer Manager to view, rename, reorganize, lock, and show/hide the layers on the page. <figure><img src="/files/mL9Wr64wcnYWO6CgHqVF" alt=""><figcaption></figcaption></figure> Use the "Show Hidden Layers" button to highlight your hidden layers. Use the "Expand All" button to expand all of the layers on the page. ## Edit Code View and edit all page code. Use the right and left arrows to expand the viewing area for either html or css. Use **Format** to make a section more easily viewable. <figure><img src="/files/HFAK8yKcaxSOjdnNuQNu" alt=""><figcaption></figcaption></figure> <figure><img src="/files/q6SxezvlcMPq07qw7Yu2" alt=""><figcaption></figcaption></figure> ## Device Selection Switch between devices. There are 5 options - desktop, large tablet, tablet, large mobile, mobile. Please see [Device View Changer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/device-view-changer) for more information. <figure><img src="/files/45fCbvufcji4LNVLi1Dz" alt=""><figcaption></figcaption></figure> ## Page Selection Switch between pages in the funnel. Edit multiple pages without leaving the page builder. You will be prompted to save any pending edits when switching pages. <figure><img src="/files/qYkuFsPVFleQ3jbIZtlK" alt=""><figcaption></figcaption></figure> ## ChatGPT Use ChatGPT to help with page content <figure><img src="/files/QXKS2HaeJMiIUTaMUdCb" alt=""><figcaption></figcaption></figure> ## View Components Choose to hide or reveal the component borders <figure><img src="/files/3P5gPToDdrnvR9UjX6cZ" alt=""><figcaption></figcaption></figure> ## Popup Use the Popup button to launch the Popup Manager. Add and edit popups here. <figure><img src="/files/Jok0Cm4XohDHBRUGnMeU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fw3cMBUKVLwm6tAb6CR3" alt="" width="375"><figcaption></figcaption></figure> Please see [Popup Documentation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/popups) for more information. ## Sticky Bar Select Sticky Bar to add and edit the page sticky bar. <figure><img src="/files/ZWNliXIDthF7Df99TdEJ" alt=""><figcaption></figcaption></figure> A sticky bar is a horizontal bar that you can “stick” on the bottom of your Checkout Champ page to display a message, product button, picture or anything interesting so that it is always displayed prominently, yet non-intrusively. ## Import If you have built your page outside of Checkout Champ, you can import it by selecting the import feature. <figure><img src="/files/4ywYpKNataG2zCELe9vC" alt=""><figcaption></figcaption></figure> Enter the URL and press **Import** <figure><img src="/files/10DcJln25F3XwDsLkIRd" alt="" width="375"><figcaption></figcaption></figure> ## Undo and Redo Undo and Redo allow you to easily remove or add changes back as you are editing. <figure><img src="/files/Ip1CulsN9mrlHcle3bf4" alt=""><figcaption></figcaption></figure> ## Help Select the ' ? ' to access all Checkout Champ Knowledge Base articles, like this one! <figure><img src="/files/Ufq0I6anhtIQmW0wS3K8" alt=""><figcaption></figcaption></figure> ## Clear Canvas Clear Canvas will allow you to wipe the canvas clear and start with a blank page. <figure><img src="/files/71sA3RPEBrvYAwl83AL8" alt=""><figcaption></figcaption></figure> If the canvas is mistakenly cleared, then use Undo to revert it or exit the page builder without saving. ## Absolute/Relative Position The Absolute/Relative toggle allows you to move an element to an absolute position or to a position relative to other components. <figure><img src="/files/ZkFe6P4HTbt3cj9JnGzB" alt=""><figcaption></figcaption></figure> ## Light/Dark Mode The Light/Dark Mode toggle allows you to set the page builder color scheme based on your preference. <figure><img src="/files/OSi3OQLT7dDgCpRH4Es0" alt=""><figcaption></figcaption></figure> ## Preview Use the Preview button to open the page in a new tab <figure><img src="/files/ZMWhgbgjSvWMyeeKsHfl" alt=""><figcaption></figcaption></figure> ## Save Save your changes to the page. There are options - Save, Save & Close, and Close. <figure><img src="/files/y8K4lNQtnIkiS4hpf5il" alt=""><figcaption></figcaption></figure> # Device View Changer Checkout Champ provides the necessary tools to make your pages responsive and beautiful on any device. While many responsive features are automatic, you can customize your layout as needed. Using the Device View Changer, you can view and edit your page layout using 5 preset screen sizes reflecting commonly used devices: <figure><img src="/files/eGB823PqczAXL1YglFru" alt="" width="563"><figcaption></figcaption></figure> (Desktop, Laptop/Large Tablet, Tablet, Large Mobile and Mobile) By selecting the different device views in the editor, you can see how your page will look on the 5 different screen sizes. You can also modify your page design to reflect styling specific to the different device layouts. As you edit, the styling changes cascade downward. <figure><img src="/files/OKljpCol77Ddw9br860M" alt="" width="563"><figcaption></figcaption></figure> Any styling edits made on the desktop view will cascade down across all screen sizes. However, you can use the Device View Changer to edit the smaller screen sizes independently. This allows you to change the styling for tablet and mobile screens or even hide elements you don’t want visible on the smaller screen sizes. # Popups Popups can be used in a variety of ways, but the generally the purpose is to keep customers engaged on your site. Upon clicking the Popup button within the Page Builder Toolbar, the Popup Manager will display so you can add a new popup or to edit an existing one. There is no limit to how many popups you can create. <figure><img src="/files/Jok0Cm4XohDHBRUGnMeU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fw3cMBUKVLwm6tAb6CR3" alt="" width="375"><figcaption><p>Popup Manager</p></figcaption></figure> Once you have clicked the “Add new popup” button or the Edit button on an existing popup, the popup will display within the builder and you can edit elements as you normally would. The Popup-body element (the outermost parent element of the popup) has settings within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) to further customize your popup. <figure><img src="/files/Pcn1iE87VuW7T9ZfndnN" alt="" width="563"><figcaption></figcaption></figure> **Delay (Min and Sec)**: Delay the popup from triggering for a determined amount of time. **Trigger On** options include: * Trigger On Load - The popup displays when the page initially loads completely. * Trigger On Scroll - The popup displays when the user starts to scroll down on the page. * Trigger On Exit - The popup displays when the user's mouse cursor leaves the window. \*\*See below for triggering a popup upon the click of a button or link **Popup Width**: Choose between Small, Medium, and Large sized popup. **Corner Radius**: Choose how rounded the corners of the popup should be. **Edges**: Choose if All, None, the Top Only, or the Bottom Only edges should use the corner radius selection. **Animate**: Add an animation to your popup. **Animation Duration (Sec)**: Set how long, in seconds, that the animation for your popup should last. When you have finished designing your popup, click the Popup button again within the Page Builder Toolbar to close the popup. {% hint style="info" %} If you ever want to disable a popup, you can either set the Trigger On setting to None, or you can delete the popup from the Popup Manager. {% endhint %} *** ### \*\*Trigger Popup when a button or link is clicked <a href="#popups-triggerpopupwhenabuttonorlinkisclicked" id="popups-triggerpopupwhenabuttonorlinkisclicked"></a> There may be cases where you would prefer the popup to display when the customer clicks a button or link on the page. To do this, make sure the Trigger On setting within your popup is set to None. Next, close the popup designer and click on the button or link that you would like to trigger the popup. With the button or link highlighted, click the Style Manager button and open the Settings for the element. Finally, set the button/links **Action** selection to Open Popup and set the **Popup** selection to the popup you would like to display when the button/link is clicked. **\*Required fields will need to be filled before the Popup will load** <figure><img src="/files/j1qTWat3HJRKqASp6ki5" alt="" width="563"><figcaption></figcaption></figure> {% hint style="warning" %} If you ever decide to remove the popup, make sure you edit your button/link to adjust the action accordingly. {% endhint %} # Settings & Style Manager ## Select Settings to reveal the settings management panel. <figure><img src="/files/gwH2GjVycEvZdqAMZ81e" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/o8ghcesnC2NV8dfokgh2" alt="" width="360"><figcaption></figcaption></figure> **Settings** **-** each element has different settings ## Select Styles to reveal the style management panel. <figure><img src="/files/ugnDY5HR47Vk5UVnjspz" alt="" width="563"><figcaption></figcaption></figure> ### Basic: <figure><img src="/files/OSTiMJnCtb9AkLXArYeY" alt="" width="358"><figcaption></figcaption></figure> **State** - Choose state to determine when an element is styled, or which child elements are styled. * State - The default state will style the element chosen with no action * Hover - When the mouse is hovering over the element * Active - When an element has been selected * Even - Even numbered child elements * Odd - Odd numbered child elements **Dimension** - Adjust the margins and padding of the element **Font** - Easy to adjust the font type, color, size, etc **Border** - Easy to adjust the border for the element **Background** - Control the background style of the element ### Advanced: <figure><img src="/files/uHTt4CvC9pzO5GI0LtNT" alt="" width="357"><figcaption></figcaption></figure> **State** - Choose state to determine when an element is styled, or which child elements are styled. * State - The default state will style the element chosen with no action * Hover - When the mouse is hovering over the element * Active - When an element has been selected * Even - Even numbered child elements * Odd - Odd numbered child elements **Size** - Adjust the width and height **Spacing** - Adjust the margin and padding **Font** - Precise adjustments of the font including the type, color, etc **Border** - Precise adjustments to the border for the element **Effects** - Adjust the color, background, shadow, text shadow **Extra** - Adjust the opacity of an element **Flex** - Control flex properties of the element ## Select the arrow button to dock to the other side of the page. <figure><img src="/files/S4pVIXvIrhL98cBmhMis" alt="" width="563"><figcaption></figcaption></figure> # Layer Manager The Checkout Champ Layer Manager allows you to manage your page structure to nest components and manage page elements quickly and easily. To find a specific element in the layer manager, open the layer manager with the hamburger icon on the far right of the tool bar. Once the layers are displayed, go ahead and click on the element you would like to find. Once you do so the element will be displayed inside the layer manager. <figure><img src="/files/oszfFuuCKh4VKeDet7lA" alt="" width="562"><figcaption></figcaption></figure> As your page grows, you can reposition elements by clicking and dragging rows to different positions, view and hide elements (eye icon), and reveal (arrow icon) and manage nested elements. <figure><img src="/files/mxV6yQ7HgrZOY3DodZkm" alt="" width="563"><figcaption></figcaption></figure> {% hint style="info" %} Hiding an element from the desktop view will hide the element across all device views. However, you can hide an element on the tablet and/or mobile view and it will remain on the desktop view. {% endhint %} # Hiding and Revealing Elements The layer manager can be used in powerful ways to optimize a page layout for different devices. For example, you could have a large, wide image displayed on desktop, but hide it on mobile devices and instead reveal a smaller, narrower design for mobile. This feature allows you to create a different visual experience based on screen size using the built-in viewports (Desktop, Large Tablet, Tablet, Large Mobile and Mobile). <figure><img src="/files/bIPzeQvLzlA5GqiEDeLy" alt="" width="375"><figcaption></figcaption></figure> #### Here’s how you can do it. <a href="#hidingandrevealingelements-hereshowyoucandoit" id="hidingandrevealingelements-hereshowyoucandoit"></a> The initial screen in the builder is the Desktop layout. Start by adding all the different viewport layouts onto the builder. In this screenshot you can see, we have a different layout for each viewport available. <figure><img src="/files/gQcu3CoyMI9IxouEnxNH" alt=""><figcaption></figcaption></figure> After initially adding each element, navigate to the layer manager in the top left hamburger menu. <figure><img src="/files/MXc5oPLRK81dzenrDrEK" alt=""><figcaption></figcaption></figure> Then you select each layout for the smaller devices. After selecting each element, it will be highlighted in the layer manager as seen below. <figure><img src="/files/m9HogrED2TDxQ7Xr9M6D" alt=""><figcaption></figcaption></figure> From there, click the “eye” icon to hide these elements intended for smaller devices. You should notice they will disappear while on the desktop view now. (Note: they will remain hidden until un-hidden) <figure><img src="/files/PAGtNcvetL29DiUTm0Xo" alt=""><figcaption></figcaption></figure> When hiding elements, keep in mind the builder cascades downward. So if you hide an element on desktop, it is hidden on all the remaining viewports below desktop (unless you make that element visible on one of the smaller viewports). Using a combination of the viewports and layers, you can show and hide elements across all 5 screen sizes. # Building Blocks Blocks are elements you can add to your page using a quick and easy drag and drop action. Blocks have unique styling and configuration options and are described below. When editing a page you will find the Blocks Menu on the top left of the screen. <figure><img src="/files/ORJPQPwuUKVLBERD1ijX" alt="" width="277"><figcaption></figcaption></figure> You find links for each Building Block section below: * [Basic Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/basic-blocks) * [Form Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/form-blocks) * [Button Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks) * [Product Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/product-blocks) * [Extra Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks) * [My Element Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/my-element-blocks) # Basic Blocks Basic blocks are webpage elements which are common to most pages. <figure><img src="/files/QSK60wxAZcTOhK8ysAz4" alt="" width="265"><figcaption></figcaption></figure> *** ## **Columns** <a href="#basicblocks-columns" id="basicblocks-columns"></a> Columns allow you to divide your page into sections and edit unique sections of your page. An inner column can divide column elements into smaller sections of your page. {% hint style="info" %} *You need at least a single column added to the page builder to begin placing other elements.* {% endhint %} <figure><img src="/files/Poj8swwg2s0x9VfXambA" alt=""><figcaption></figcaption></figure> ## **Box** <a href="#basicblocks-box" id="basicblocks-box"></a> Box is an additional div element to use as a container of other elements <figure><img src="/files/Z765WctqCRCwja9hnV95" alt="" width="121"><figcaption></figcaption></figure> * Elements not supported inside a Box: Header, Footer, Inner Row. * Box cannot be dropped inside the following elements: Body, Row, Product Row, Text, Headline, Link, Image, Video, Map, Horizontal Line, Select, Input, Checkbox, Radio, Buttons, Label, Survey Options, Carousel. ## **Header** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Header to your page which can be styled to your liking. This element is used to apply a [Common Header](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements#commonpageelements-commonheader) to your funnel pages. <figure><img src="/files/JbcHyoJGCev6hDCBcISR" alt="" width="117"><figcaption></figcaption></figure> ## **Footer** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Footer to your page which can be styled to your liking. This element is used to apply a [Common Footer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements#commonpageelements-commonfooter) to your funnel pages. <figure><img src="/files/ZfYo7YhA5J9Xbx8FtfM4" alt="" width="117"><figcaption></figcaption></figure> ## **Headline and Text** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drage a Headline or Text element to your page. <figure><img src="/files/WYmxRKMckl0BqORTJ6M8" alt="" width="240"><figcaption></figcaption></figure> Text inside Headline and Text elements can be modified from the inline Text Editor menu. You can change the font, size, and style, etc. A text element can also be converted to a link. <figure><img src="/files/j2AbYLE2QIIJPLgZ3AYU" alt="" width="375"><figcaption></figcaption></figure> Text can also be styled and managed in the Font styling menu. Basic: <figure><img src="/files/u5buqE0u93JWNvaInwYy" alt="" width="261"><figcaption></figcaption></figure> Advanced: <figure><img src="/files/L8x4koHlLl2zX2kAIcaU" alt="" width="220"><figcaption></figcaption></figure> ## **Link** <a href="#basicblocks-link" id="basicblocks-link"></a> Drag a link element to embed a link onto the page. <figure><img src="/files/WEbAzNTby0hHhZ1pBeRe" alt="" width="96"><figcaption></figcaption></figure> Within the Style menu for the link you can define the following attributes and behaviors: <figure><img src="/files/h8cGBg9GATIPFolKBCIW" alt="" width="239"><figcaption></figcaption></figure> * Title: (Required) The text displayed for your link. * Link: When a link is defined, the visitor will be taken to an external redirect. * Action: (Required) What to do when your visitor selects the link. * Full details are [here](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks/button-and-link-actions) * Target: Defines which window the visitor will navigate to the url in: * This Window * New Window * Product: Assign a product to the link * Variant: Assign a variant to the link (must select Product first) * Replacement: Assign the product that should be replaced when the customer buys an "upgrade" * Animate: Apply an animation to your link * Delay (Seconds): Add a delay (in seconds) before your link animation starts * Speed: Select the speed at which the animation plays * Loop: Choose if the animation should loop or not * Align: Define the alignment of your link respective to its parent element (column, inner column, etc.) ## **Image** <a href="#basicblocks-image" id="basicblocks-image"></a> You can add images to your Checkout Champ Page and asset folder by dragging the Image Block to your page. <figure><img src="/files/UtZjiRfq2SrPiGKeJ2IH" alt="" width="103"><figcaption></figcaption></figure> When you drag an image to your page, the image folder will display which will allow you to perform the following actions: #### Select an image from your Checkout Champ Assets Folder: <figure><img src="/files/O5ralcSaBoE4xUdmogG9" alt=""><figcaption></figcaption></figure> #### Upload an image to your Checkout Champ Assets Folder: <figure><img src="/files/Ink7In4hpMsCOaib43V2" alt=""><figcaption></figcaption></figure> #### Select an icon from the Checkout Champ Icon Library: <figure><img src="/files/noxPbizgJwAXrK1nfnHJ" alt=""><figcaption></figcaption></figure> #### Select a Stock image from Unsplash: <figure><img src="/files/TpZkXS1QTL2vtfGKJyMc" alt=""><figcaption></figcaption></figure> #### Enter the image's source URL: <figure><img src="/files/mn3HLlZ4ywSvhE6Kfi8A" alt=""><figcaption></figcaption></figure> Once your image is added to your page, you will be able to format and style it in the following ways: <figure><img src="/files/YfoWIz7Od7o8cfFqDQVj" alt="" width="355"><figcaption></figcaption></figure> * Title: Define a Title for your image. * Alt: Define alternative text for your image. * Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. * Alt tags will be displayed in place of an image if an image file cannot be loaded. * Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly. * Link: You can configure a link to your image so that when a visitor selects the image, they can be taken to a different site. * Target: If you have configured a link on your image, you can define whether the user will be taken to a different site in the same browser window or if a new browser window will be opened. * Align: Define the alignment of your image respective to its parent element (column, inner column, etc.) ## **Video** <a href="#basicblocks-video" id="basicblocks-video"></a> You can easily add exciting video content to your Checkout Champ page. <figure><img src="/files/ViyTjfWQFZPq67GB0nuW" alt="" width="102"><figcaption></figcaption></figure> After dragging the Video element to the page, open the style manager to define the settings for your video. <figure><img src="/files/4KULeSAeyPwJDtjG5D3u" alt=""><figcaption></figcaption></figure> * Provider: Checkout Champ can support video content from the following providers: * HTML 5 Source * YouTube * YouTube (No cookie) * Vimeo * Wistia * JW Player * Rumble * Source: Once you select the video provider, you can define where your content is stored with that provider by setting the source. * Poster: If you want a specific image to display before your video plays, you can define a poster. * Autoplay: By enabling autoplay, your video content will begin as soon as the visitor arrives at your site. * Loop: By enabling loop, the video will restart once it has been completed. * Controls: By enabling controls, your visitor will be able to control your page’s video to pause, play, enable full-screen mode, and more. * Aspect Ratio: Choose from a set of predeteremined aspect ratios #### Videos: Call to action <a href="#basicblocks-videos-calltoaction" id="basicblocks-videos-calltoaction"></a> {% hint style="info" %} **This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers** {% endhint %} Call-to-action displays an element at a set time in a video **Step 1**: Select the video element. Open the video manager by clicking the clock icon. <figure><img src="/files/hTwpj0tMYdZeovH54Bfa" alt="" width="563"><figcaption></figcaption></figure> **Step 2**: Enter the time and the Id of the element to open at that time. <figure><img src="/files/GuUs7xWK16AddehGSeCT" alt="" width="563"><figcaption></figcaption></figure> Press “Add new time log” to enter as many open times as needed **Step 3**: Save and Publish # Rows & Columns Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows. <figure><img src="/files/TAk4aCkXoeQxBaK7qNHP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6SOPrYCooBDyb6Lieohz" alt=""><figcaption></figcaption></figure> #### CSS styling in Checkout Champ <a href="#rows-and-columns-cssstylingincheckoutchamp" id="rows-and-columns-cssstylingincheckoutchamp"></a> Our rows and columns rely on the Bootstrap CSS framework which adds style to the page. A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry! Here are some tips to master designing a page in FK: #### Column Sizing <a href="#rows-and-columns-columnsizing" id="rows-and-columns-columnsizing"></a> <figure><img src="/files/lDXNTCt1y907YWVsayq1" alt=""><figcaption></figcaption></figure> To size columns the easiest way is to drag the icon on the side of the column and slide it to the width you desire. However, if you want uniform columns and rows across all devices, you’ll need to hop into the code editor. <figure><img src="/files/rFmCXJFHu62QJCBZ20Fa" alt="" width="563"><figcaption></figcaption></figure> Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem! When you open up the code editor, perform a browser search (CTRL + F on Windows, or Command+F on Mac) and type in “fk-col.” What you now see should be the same as the image below. Each “fk-col” on the left-hand HTML column of the code editor represents each column on your page. “fk-row” represents each row on your page - they are found directly above each “fk-col.” “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes gives each column and row the style you see on it automatically. <figure><img src="/files/HICp9hDYmlOe4kJtz6YC" alt=""><figcaption></figcaption></figure> But let’s say on mobile you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into bootstrap. (See this page for reference - <https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp>) First, lets design for mobile views. (See our article on device view here) Let’s set the default size of the columns by adding “col-12” to the class tag by spacing over after “fk-col” and typing “col-12”. Do this for both columns. Flex styling operates on fractions of Twelve, so “col-12” assigns the column to span all 12 horizontal fractions of the viewable screen. This setting ensures that both columns stretch across the whole width of the page which is perfect for mobile. For desktop lets add “col-lg-8” to the class tag after our new “col-12” class. This tells our Column 1 to fit to Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. Now add “col-lg-4” to Column 2 classes and click save. # Form Blocks Checkout Champ allows you to build custom forms or use premade form templates. The form templates available are dependent on the page type you are creating.<br> * [Form](#formblocks-form) * [Input](#formblocks-input) * [Label](#formblocks-label) * [Radio Button](#formblocks-radiobutton) * [Checkbox](#formblocks-checkbox) * [Select](#formblocks-select) * [Select Month & Select Year](#formblocks-selectmonth-and-selectyear) * [Shopping Cart](#formblocks-shoppingcart) <figure><img src="/files/3l8FzxHPswklmRL5fT66" alt="" width="347"><figcaption></figcaption></figure> *** ### Form <a href="#formblocks-form" id="formblocks-form"></a> <figure><img src="/files/pqx2F5ckTn6giPr5J2B2" alt="" width="95"><figcaption></figcaption></figure> The form element will add a basic form to your page which you can add more inputs to and style to your needs and preferences. This form includes the following fields: * Name - Input Field for First Name * Email - Input Field for Email address * Gender - Radio Buttons with Male/Female options * Save/Submit Button - Button element which can be configured to perform specific actions based on your preference. <figure><img src="/files/GFcyLicegy7IlaJFNcmL" alt=""><figcaption></figcaption></figure> *** ### Input <a href="#formblocks-input" id="formblocks-input"></a> <figure><img src="/files/EML2CfrK5HuVG5tM9jOb" alt="" width="96"><figcaption></figcaption></figure> A form input field which can be used to collect custom data. After selecting an Input element, use the Settings inside the Style Manager to determine which field that the input represents. {% hint style="success" %} Additional instructions for Custom Fields:[ Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs) Additional instructions for Placeholder formats: [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats) {% endhint %} <figure><img src="/files/17UEVm1FRcI0DHsYcM1b" alt=""><figcaption></figcaption></figure> *** ### Label <a href="#formblocks-label" id="formblocks-label"></a> <figure><img src="/files/A52xWD4dRsirl7KwqEHD" alt=""><figcaption></figcaption></figure> Use labels to define form elements.<br> *** ### Radio Button <a href="#formblocks-radiobutton" id="formblocks-radiobutton"></a> <figure><img src="/files/n66N0UlxFK0L2BfbA8OL" alt=""><figcaption></figcaption></figure> Add a radio button element to your page when you want your visitors to make a selection. A radio button can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your radio button. <figure><img src="/files/8wYCxOpUx7366KenkeG7" alt="" width="563"><figcaption></figcaption></figure> *** ### Checkbox <a href="#formblocks-checkbox" id="formblocks-checkbox"></a> <figure><img src="/files/63bCkVkqvcllFAyIvAwg" alt=""><figcaption></figcaption></figure> Add a checkbox element to your page when you want your visitors to select or acknowledge something on your page. A checkbox can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your checkbox. <figure><img src="/files/v0if3xtSsu0en9zfu3xs" alt="" width="563"><figcaption></figcaption></figure> *** ### Select <a href="#formblocks-select" id="formblocks-select"></a> <figure><img src="/files/ybs59rpiXM83Yhz63Qxe" alt=""><figcaption></figcaption></figure> This element can be used to provide a drop down menu of different options.\ \ After dropping the Select element to your page, click on the element and view it’s settings under the Style Manager. <figure><img src="/files/8ahx2E9wITWSIOO9LPVO" alt="" width="526"><figcaption></figcaption></figure> Set the Name of the element from the dropdown options. If you choose Card Month, Card Year, Ship Profile, State, Ship State, Country or Ship Country, the options for the customer will automatically appear on the live page. *** ### Select Month & Select Year <a href="#formblocks-selectmonth-and-selectyear" id="formblocks-selectmonth-and-selectyear"></a> <figure><img src="/files/MlZCBTe282CVEc7LvGgX" alt=""><figcaption></figcaption></figure> These are premade versions of the Select element which are preset to be a month/year selector. *** ### Shopping Cart <a href="#formblocks-shoppingcart" id="formblocks-shoppingcart"></a> <figure><img src="/files/IjIY114XcSnAMbUcP7L3" alt=""><figcaption></figcaption></figure> Please view [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/form-blocks/shopping-cart-element) for more information about the Shopping Cart element. # Shopping Cart Element The shopping cart elements are used to dynamically display the customer’s chosen product details and the corresponding prices and amounts. The shopping cart element blocks are also sometimes known as an “order summary”, but the elements in the builder are labeled as a “Shopping Cart”. ### Legacy Cart <a href="#shoppingcartelement-legacycart" id="shoppingcartelement-legacycart"></a> The Legacy Shopping Cart element displays the chosen product details, including a **per unit price\*** for each product in the table and can be found under the Forms section of the Building Block elements. <figure><img src="/files/LE61NmHPlRYfZUGrpJaR" alt=""><figcaption></figcaption></figure> **\*See instructions below to make the price in the table reflect the quantity chosen.** <figure><img src="/files/7ZUomHxsvGftwwg5XxyP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/2DTe6xxk2Yo6hkPguWhL" alt=""><figcaption></figcaption></figure> This element comes with two options for displaying the quantity. You can remove either the quantity bubble or the entire quantity column (both parts). <figure><img src="/files/JK2OqDzrBiQ9GhJWVrbt" alt=""><figcaption></figcaption></figure> If you decide to use the quantity column, this provides the customer with the ability to adjust the quantity of the products the chose by default, but these buttons can be removed if you don’t want the customer to adjust the quantity. <figure><img src="/files/Bc6UOoVPjAxkq9UjWMsf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/46CvDFso2OFky0tLrIyH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Q7qc5kIjKksuSzGywpOs" alt=""><figcaption></figcaption></figure> <figure><img src="/files/gNY9ydovTXGOk5uWyrMS" alt=""><figcaption></figcaption></figure> **\*The table can be adjusted so the price on the table reflects the quantity chosen.** To do so, open the code editor inside the page and perform a CTRL+F for “Price”. Find the section that looks like the screenshot below where you can see the table headers for Item, Quantity (if not removed), and Price. <figure><img src="/files/Qcx2VcTq0bOycBFAxcpX" alt=""><figcaption></figcaption></figure> Go to the title within this table which is defined as “Price” and change “Price” to “Total” Once that is changed, be sure to save the editor, then save the page and publish the funnel. ### Product Images <a href="#shoppingcartelement-productimages" id="shoppingcartelement-productimages"></a> If product photos are stored in Checkout Champ CRM, when a shopping cart element with an image is added to a page, the CRM image will display on the page when the product is selected. Make sure your base product has an image under CRM→Products . <figure><img src="/files/7NLNQmUDmXNLNFUZEs2V" alt=""><figcaption></figcaption></figure> Once your page is previewed or published and the product is selected, the image will be presented from CRM: <figure><img src="/files/DPHhnrCDGz5qVQ7tQXmz" alt=""><figcaption></figcaption></figure> ### Shopping Cart <a href="#shoppingcartelement-shoppingcart" id="shoppingcartelement-shoppingcart"></a> Our Shopping Cart element comes with all of the features and data of the Legacy cart. However, the Shopping Cart element has more flexibility when it comes to styling. The cart is built on Bootstrap rows and columns which allows users to utilize flex settings to change the layout across all screen sizes. It also allows users to change how the order information is displayed given users more options when designing pages. <figure><img src="/files/a1DqipQxemOakUsJuBSY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/mQgUVAO9Y9YWh8gVvjt5" alt=""><figcaption><p>Default mobile view</p></figcaption></figure> ### Additional Features/Settings <a href="#shoppingcartelement-additionalfeatures-settings" id="shoppingcartelement-additionalfeatures-settings"></a> The Shopping Cart also allows features not available in the Legacy Cart. By duplicating the default product price box and changing the associated CSS classes, you can also show customers the product compare at price, product savings and/or product savings percentage. Then you can style each new figure as needed, even adding additional text boxes to show any additional text you may want to show (as shown below). <figure><img src="/files/ZfaoURHRXQefwlTWq6Oi" alt=""><figcaption><p>Additional Features</p></figcaption></figure> To add these features to your cart, you would need to duplicate the default product price box and edit the CSS classes to display the desired data. <figure><img src="/files/9KjBTlQtCenPh1qpHINb" alt=""><figcaption></figcaption></figure> The additional CSS classes are below: To display the product compare at price, use "cc-cart-row-prod-compare" <figure><img src="/files/metugjTOjLF7QcJZWCSm" alt=""><figcaption></figcaption></figure> To display the product savings, use "cc-cart-row-prod-saving" <figure><img src="/files/nYzKN25KmfejvwN3APwJ" alt=""><figcaption></figcaption></figure> To display the product saving percentage, use "cc-cart-row-prod-saving-perc" <figure><img src="/files/HIpmgnSdMUFKsm6FKiEv" alt=""><figcaption></figcaption></figure> To display product savings with a minus sign before the currency sign, use “cc-negative-savings”. Once added, you can style as needed using the font settings for each element. To display the total compare prices of all items in the cart, use "compareAtTotal". To add "compareAtTotal", duplicate one of the existing "totals", like Sub Total or Grand Total. Then change the class to "compareAtTotal". <figure><img src="/files/UfCpsKD44hgtAdn3eOcn" alt=""><figcaption></figcaption></figure> **Items of note:** These additional elements are displayed “per product” in the cart. The “Compare At Price” is set on the Campaign Offer. <figure><img src="/files/s27on4Bt5yR1TFCru1GU" alt=""><figcaption></figcaption></figure> The calculations are done as follows: “Product Savings” = Compare At Price - Offer Price “Product Savings Percentage” = (Compare At Price - Offer Price) / Compare At Price X 100 <details> <summary>How to adjust the cart to horizontal on mobile view</summary> * Search for the column with class col-sm-9 and replace it with col-9 <img src="/files/YWbVd9GnuoIfw9FdYcr1" alt="" data-size="original"> * Search for the column with class col-sm-3 and replace it with col-3 ![](/files/zis73i7JOfGbwTxBL78W) * In the CSS set padding and margin to 1px on cc-cart-container * In the CSS set cc-cart-row to font-size:13px on @media (max-width:480px) * Set the text to align left it already isn't <img src="/files/QKWnwHV5vtNpVeCMGEOJ" alt="" data-size="original"> ![](/files/if4dHNYwv4Jj9g6SeG9t) </details> ### Side Cart / Drawer Cart <a href="#shoppingcartelement-sidecart-drawercart" id="shoppingcartelement-sidecart-drawercart"></a> Several of our pages will have a side cart (also called a drawer cart) available in the header element. Clicking the cart icon will open a side cart containing an order summary similar to our other order summaries with button to move to a cart page or go straight to your checkout page. In order to style the details of this element, you will first need to add a Header element, then open the side cart. <figure><img src="/files/XS0STKlTtWJOa43mH84T" alt=""><figcaption></figcaption></figure> Once the Header element has been added to the page, you may open the side cart by clicking on the shopping cart icon in the top menu of the builder. Clicking the shopping cart icon visible on the page itself will not open the side cart in the builder. Once the side cart is open you are free to style as needed. <figure><img src="/files/qSkEUQaXGdwDIR1EFG3I" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Clicking the shopping cart icon visible on the page’s Header element will open the Font Awesome icon selector allowing you to choose a different icon. Clicking that icon will not open the side cart. {% endhint %} *** Cart Notes <figure><img src="/files/VZVNXrt72HkpcoKvG5OB" alt=""><figcaption></figcaption></figure> * cc-cart-row-prod-price - single item price, does not change with multiple quantities * cc-cart-row-prod-total - price multiplied by quantity * cc-cart-row-free-label - says FREE instead of 0.00 # Button Blocks Inside the Buttons menu within the Building Blocks you have several buttons to choose from to add to your pages.\ \ You will find that some buttons have different styling variations, however, the functionality will remain the same across the different variants. <figure><img src="/files/gVPGbbgMtQyL0WC9JO3S" alt=""><figcaption></figcaption></figure> With the button element selected from the page, you can open the settings for the element to adjust several settings <figure><img src="/files/gU3NTiorH8v8fLPCLAGc" alt=""><figcaption></figcaption></figure> **Title** - Gives a name to the button so you can easily identify it when applying to the page arrows on the funnel visualizer. **Text** - This is the text that displays onto the button. If no Title, the Text will show when configuring page arrows. **Action** - See [Button Actions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks/button-and-link-actions) **Product** - Allows you to tie a product to a button so it is submitted with the customer's information. If your product was passed in from the previous page, or the checkout page has radio buttons or checkboxes with products applied, then you may not need to apply a product to the Checkout/Submit button. **Variant** - Same as product value but for that product’s specific variant. **Replacement** - This is useful for upgrading a one-time to a subscription on an upsell page. Will replace the product chosen in this value with the product selected in the product/variant value. **Animation** - Allows you to set an animation to your buttons. Can also be used to [hide a button](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) during a video. **Delay (Min)** - Sets a delay on when the button will begin animating. **Delay (Sec)** - Sets a delay on when the button will begin animating. **Speed** - Sets the speed of the animation. **Loop** - Choose if the animation should loop or not. **Align** - This will align the button to the left, center, or right side of the element it resides in. # Button & Link Actions There are various actions available on buttons. Most of these actions are also available on links. *** ## **Add & Open Cart** Adds the selected product to the customer’s cart and opens the drawer cart. Intended for storefronts with a product catalog and a configured drawer cart. ## **Add To Cart** This action will add a product to the customer’s shopping cart, without navigating the customer to another page of the funnel. This is mainly used for storefront websites that contain a catalog of products and a dedicated cart page. ## **Submit + Route** Submit page data to the CRM and route the customer to the next page of the funnel. This action can be used to submit lead information, billing/shipping information, product information, and card information. Submit + Route should be used on Lead Pages where a form exists, and any Checkout Page or Upsell Page buttons that should allow the customer to buy the product(s). ## **Route to Next Page** Route the customer to another page in the funnel. Any inputs on the page will be saved to the user session. Any products chosen on the page will be saved in the shopping cart. This action is most commonly used on a landing page that contains a product selection without a form for the customer to enter their information. ## Route + Clear Cart Same as **Route To Next Page** but clear the cart before routing. ## **Open Section** Open another element on the page. Specify the ID of that element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, any other buttons on the page that open a section will have their sections closed. The sections to open are available in the page builder for you to design, but those sections will be hidden when the published page loads. ## **Open Section + Hide** Open another element on the page AND hide this button. Specify the ID of the element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Submit Lead + Open Section** This action facilitates lead submission on a checkout page. Submit entered inputs for processing, remain on the page, open another element on the page, and hide this button. Specify the element to open in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Open Popup** Open the page popup. This is another type of trigger for the popup (on the popup itself you can choose to trigger on load or on scroll, with a time delay). See [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up) for more information. ## **Close Popup (Popup Only)** Closes the popup without navigating away from the current page. ## **Submit Lead & Close Popup (Popup Only)** Submits the lead form data and closes the popup without redirecting the user, keeping them on the same page. ## **Apply Coupon** If there is a coupon field on the page, this action will apply the entered coupon code to the order. ## Login Allow the customer to log into their account so they can purchase with their card on file. ## Default This option applies no action to the button. This is useful if you are using the button or link to trigger some sort of custom script. {% hint style="info" %} PayPal, Affirm, AfterPay, Klarna, Sezzle, iDEAL, Bancontact, GiroPay, Apple Pay, Amazon Pay and Google Pay buttons should always be set to **Submit + Route** {% endhint %} # Product Blocks Inside the Products menu within the Building Blocks you have several options to choose from to add to your pages.\ \ The Checkbox and Radio Button options are also available under the [Forms](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks#formblocks-form) menu, but only the Product variation of these elements will allow you to tie a product to the checkbox or radio button.<br> * [Product Checkbox](#productblocks-productcheckbox) * [Product Radio Buttons](#productblocks-productradiobuttons) * [Variant Selection](#productblocks-variantselection) * [Product Selection](#productblocks-productselection) * [Product Tile](#productblocks-producttile) * [Order Bump](#productblocks-orderbump) <figure><img src="/files/AwgojGDBThLEQ251oXvV" alt=""><figcaption></figcaption></figure> *** ### Product Checkbox <a href="#productblocks-productcheckbox" id="productblocks-productcheckbox"></a> Dragging this Block onto the page will add three checkboxes to the page. You can remove any extras if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/0qYxdZ8gIFpVMbG568vx" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/HukLi4betFqV0M8anUfq" alt=""><figcaption></figcaption></figure> *** ### Product Radio Buttons <a href="#productblocks-productradiobuttons" id="productblocks-productradiobuttons"></a> Dragging this Block onto the page will add three radio buttons to the page. You can remove the extra radio buttons if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/wNvuBONWpB3Aln1kEICB" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the radio button and open the element’s settings within the Style Manager. You can also set a radio button to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/MIDbmTtnsJ2gQh6lvGoH" alt=""><figcaption></figcaption></figure> ### Product Radio Type You may choose between two types of Product Radio elements in the element settings: Basic or Advanced Basic product radios contain no style and require clicking directly on the radio to select it. <figure><img src="/files/aB1RYFyhGtddcRmZRuxc" alt=""><figcaption></figcaption></figure> Advanced product radios are surrounded by their own labels. This allows the user to click anywhere in the label to select that radio. You may style the label as needed to give it more of a product section look. You may also hide the product radio as clicking anywhere in the label will select the radio. <figure><img src="/files/YanomuP5e2VPy7UoWb1n" alt=""><figcaption></figcaption></figure> *** ### Variant Selection <a href="#productblocks-variantselection" id="productblocks-variantselection"></a> There are two premade variant selection blocks that you can drag onto your page where you can allow the customer to choose from multiple variants of a single product. <figure><img src="/files/gUDdjtVQpySEDDky832L" alt=""><figcaption></figcaption></figure> To apply a product to the element, you will click on the empty space within the element and then open the element’s settings After you apply the product, the variant options will be available within the dropdown menu. If you don’t have three variants, you can remove any extras by clicking the element and then the Trash Can on the element tool bar. *** ### Product Selection <a href="#productblocks-productselection" id="productblocks-productselection"></a> This is a premade element that allows you to quickly drag a button and image onto the page. <figure><img src="/files/0m1J0upQHc2ZBsHbjc8V" alt=""><figcaption></figcaption></figure> To apply a product to the element, click on the button and then open the element’s settings to choose the product and button action. *** ### Product Tile <a href="#productblocks-producttile" id="productblocks-producttile"></a> Dragging this Block onto the page will add three product tiles with radio buttons to the page. You can remove the extra tiles if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/jyJNrgeS7KdegZ1C2RVq" alt=""><figcaption></figcaption></figure> You can adjust the formatting within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) and swap out the images for your own product images. To apply products to each option, click on either the radio button or the normal button within each tile and then open the element’s settings to choose the product. You can also set a radio button to be preselected when the page loads by enabling the Checked option. *** ### Order Bump <a href="#productblocks-orderbump" id="productblocks-orderbump"></a> This is a premade element that you can drag to your page to offer extra products for the customer to purchase before submitting their payment on the checkout page. <figure><img src="/files/sERw92nPN1cLTcUqns89" alt=""><figcaption></figcaption></figure> You can adjust the formatting and the text within the element within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager). To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. *** ### Two Way Sub Subscription This is a premade element that you can drag to your page to offer two way subscribe and save options. These elements use the subscribe & save profiles set up in the campaign in the CRM. <figure><img src="/files/NnEPs5UIT7vUjWer9WvX" alt=""><figcaption></figcaption></figure> This element just needs to be applied to the page and styled as needed. This element can be used to convert a one-time offer to a subscription and vice versa. Subscripton offers used on this element are taken from [Subscribe & Save Profiles](/crm/crm-setup/campaign-setup/subscribe-and-save-profiles) set in campaigns. When the button to upgrade to a subscription is pressed the element will be hidden on the page. Any items that are shown in the order summary will show a revert back so the client can easily switch the product back to one-time. <figure><img src="/files/If6pmTvl6Lsaiz1JzepO" alt=""><figcaption></figcaption></figure> # Extra Blocks * [Bullet List](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/bullet-list) * [Progress Bar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/progress-bar) * [Collapsible List / FAQ Section](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/collapsible-list-faq-section) * [Testimonial](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/testimonial-blocks) * [Carousel / Slider](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/carousel-slider-blocks) * [Survey](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/survey) * [Timer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/timer) * [Ticker](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/ticker) The “Extra” blocks are a collection of elements that can be used to add additional functionality to your pages. <figure><img src="/files/Fvk2QKOFmJ7rMM14Cia9" alt=""><figcaption></figcaption></figure> --- [Next Page](/llms-full.txt/1)

# CheckoutChamp {% hint style="danger" %} We are excited to share that we’ve made significant progress in building a new, robust environment to further enhance the stability, speed, and security of our platform. As we transition critical services to the new infrastructure, if you’ve already whitelisted our current IPs in your firewall or integration settings, please ensure these two IPs are also added: * 52.206.5.84 * 44.219.22.112 {% endhint %} **CheckoutChamp enables advertisers to build lead pages, sales funnels, e-commerce sites, and even upsell and downsell sequences. CheckoutChamp makes building a full e-commerce site fast and easy work.** **CheckoutChamp’s suite is full of standard and upgraded templates and facilitates developing your product or corporate identity, helping clients convert at the highest levels!** **Additionally, CheckoutChamp allows clients to split test between the pages they design, so clients can see which performs best, giving them precious insight into where and how they should spend their valuable marketing dollars.** You will find that the knowledge base is setup laid out similarly to the funnel builder and CRM to help you find the articles you are searching for. You can use the search bar, the quick links below, or the navigation menu on the left to find a topic. ## **Learn CheckoutChamp**


Onboarding and Activation	Step-by-step guide to start running sales.	/pages/BDGQaqky39b9dgscPRgD	/files/8pGFtq9bcqFJmmJdC79Y
Getting Started in your CRM	An overview of the CRM side of your account.	/pages/9Gj2lfmxay1WYnKvyFjA	/files/8pGFtq9bcqFJmmJdC79Y
Funnel Builder	Funnel Builder Documentation	/pages/kmHFpZiZ5VJgcLb6hxx4	/files/8pGFtq9bcqFJmmJdC79Y
CRM	CRM Documentation	/pages/EyI3X28tFPT6CvvpxkKf	/files/8pGFtq9bcqFJmmJdC79Y
API Documentation	View our API Docs and Recommended API Flow	/pages/F24iQJP6pSjDVDA59C7n	/files/8pGFtq9bcqFJmmJdC79Y
3rd Party Plugins	Specific documenation for 3rd party plugins.	/pages/mkIpfIXZUw9Y55I3gJbz	/files/8pGFtq9bcqFJmmJdC79Y
Redirect Storefront to CheckoutChamp	Let CheckoutChamp be your customer's checkout experience.	/pages/6WBK7NNZHt0cGHQXGsA8	/files/8pGFtq9bcqFJmmJdC79Y
Customer/Member Portal	Build a portal for customers to manage their subscriptions and buy additional products.	/pages/IHeZPVmKiiExpib12CUX	/files/8pGFtq9bcqFJmmJdC79Y

# Onboarding & Activation

**Onboarding and Activation Steps** ***Items needed to configure your account quickly:***

Shopify/WooCommerce/BigCommerce API credentials

Please follow Step 1 from the appropriate storefront article: * [Shopify](/crm/plugins/data-sources/shopify) * [BigCommerce](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin) * [WooCommerce](/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin)

Gateway/Merchant account credentials (Expand this section to find out which credentials you'll need)

Each gateway type uses their own set of credentials to connect. To find which credentials you’ll need for your gateway, navigate to the CRM side of your account ![](/files/R0IkjEtpsPhtszel0FOL) Then go to Gateways -> Gateway List -> Add Gateway ![](/files/ufcIuMAsG350bfKU6SDz) Choose your Gateway from the Gateway drop down (type into the field to search) to reveal the credentials that the gateway uses. ![](/files/jnUft0GxbV3yxqX6iBmb) Feel free to add the gateway now if you’d like. You can also add these later on in the article steps.

Fulfillment house credentials

***If you are using Shopify to fulfill your orders, please skip these instructions*** Each fulfillment house uses their own set of credentials to connect. To find which credentials you’ll need for your fulfillment house, navigate to the CRM side of your account ![](/files/oCn8AiupLRpbK82CI1D8) Then go to Admin>Plugins>Fulfillment House Listing ![](/files/puaEyY64LddfE0GyShVs) Find your fulfillment house from the list and then click the Activate button ![](/files/C9XrtoJembDBfgTH8ohQ)

Feel free to add the fulfillment house now if you’d like. You can also add this later on in the article steps.

SMTP credentials (Emailed autoresponders)

If you are using Shopify to send transactional emails, please skip these instructions SMTP Credentials will include: * Host Name * Username * From Email * Password * Port Number * Use SSL or STARTTLS? * Use Relay? ***Host Name, Port Number, SSL/STARTTLS, and Relay options can normally be found with a Google search. See*** [***these instructions***](/crm/plugins/smtp-maintenance/sendgrid-smtp-profile) ***if you are using SendGrid for your SMTP emails.***

Email Service Provider credentials (Active Campaign, Klaviyo, Constant Contact, etc)

Each ESP uses their own set of credentials to connect. To find which credentials you’ll need for your ESP plug in, navigate to the CRM side of your account ![](/files/GN0mWn03PKjocWwjHjNL) Then go to Admin>Plugins>Email Service Providers ![](/files/nAmFAbpfKWc8r5RA6oGQ) Find your ESP from the list and then click the Activate button ![](/files/UBgddvoLTXRFPPsNHO7B) ![](/files/fwOt5koBRejdVeDoNQqP) Feel free to add the ESP now if you’d like. You can also add these later on in the article steps.

{% hint style="info" %} Your CheckoutChamp subscription comes with the funnel builder and the CRM for reporting and customer service. You can navigate to the CRM side of your account using the CRM option on the left side of the builder portal. The direct link is [https://crm.checkoutchamp.com](https://crm.checkoutchamp.com/). {% endhint %}

*** Please follow the steps below to set up your CheckoutChamp account quickly and properly. {% hint style="warning" %} **If your storefront is already live, DO NOT follow the redirect instructions until you complete all of the other steps below.** **Following the steps in this specific order will prevent the loss of sales during the switchover.** {% endhint %} * [1 - Follow Checkout Wizard](#checkoutchamponboarding-and-activation-1-followcheckoutwizard) * [Choose Checkout](#checkoutchamponboarding-and-activation-choosecheckout) * [Products](#checkoutchamponboarding-and-activation-domainentry) * [Campaign](#checkoutchamponboarding-and-activation-domainentry-1) * [Domain](#checkoutchamponboarding-and-activation-domainentry-2) * [Merchant Account](#checkoutchamponboarding-and-activation-merchantaccount) * [Fulfillment](#checkoutchamponboarding-and-activation-fulfillment) * [Main Site Color](#checkoutchamponboarding-and-activation-fulfillment-1) * [2 - Edit Funnel and Funnel Settings](#checkoutchamponboarding-and-activation-2-editfunnelandfunnelsettings) * [Edit Funnel](#checkoutchamponboarding-and-activation-editfunnel) * [Autoresponders](#checkoutchamponboarding-and-activation-autoresponders) * [Email Service Providers](#checkoutchamponboarding-and-activation-emailserviceproviders) * [Edit Funnel Settings](#checkoutchamponboarding-and-activation-editfunnelsettings) * [3 - Social Media and Affiliates](#checkoutchamponboarding-and-activation-3-socialmediaandaffiliates) * [Social Media](#checkoutchamponboarding-and-activation-socialmedia) * [Affiliates](#checkoutchamponboarding-and-activation-affiliates) * [4 - Overview and Testing](#checkoutchamponboarding-and-activation-4-overviewandtesting) * [Test Gateways and Fulfillment](#checkoutchamponboarding-and-activation-testgatewaysandfulfillment) * [Test Funnel and Auto-responders](#checkoutchamponboarding-and-activation-testfunnelandauto-responders) * [5 - Implement Redirect](#checkoutchamponboarding-and-activation-5-implementredirect) [Go To Video →](https://api.media.atlassian.com/file/a2d7c621-ab8b-495e-8006-202d48934cd7/artifact/video_1280.mp4/binary/cdn?client=275b7238-9394-4b3c-903b-1514a78b0763\&collection=contentId-1301217281\&max-age=2592000\&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIyNzViNzIzOC05Mzk0LTRiM2MtOTAzYi0xNTE0YTc4YjA3NjMiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0xMzAxMjE3MjgxIjpbInJlYWQiXX0sImV4cCI6MTcyNDk2MjMwMCwibmJmIjoxNzI0OTU5NDIwfQ.XVTmpNrisHuzfYXpoBnaZXlLvomRsdMw9xo2cy8YLOI) *** ### 1 - Follow Checkout Wizard Sign in to the CheckoutChamp funnel builder and click the **+ Website** button on the dashboard to launch the wizard.

#### Set Up Your Store Choose to * **Create A New Custom Storefront** * Build an entire e-commerce site in CheckoutChamp * **Upgrade My Existing Checkout** * Redirect your existing Shopify, WooCommerce, BigCommerce, Magento, or another site to CheckoutChamp * **Build A Product Sales Funnel** * Build a single or multi-product lander site * **Build A Member or Customer Portal** * Build a site for your customers to manage their subscriptions and purchase more product * **Copy An Existing Funnel** * Create a new funnel using an existing funnel as a template, or import the shareId of another funnel * **Import App** * Connect your AI tool to [CheckoutChamp's MCP](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/building-with-ai/mcp-server) and import the URL generated by the AI tool {% hint style="warning" %} The wizard steps will change based on the Store Setup option you choose {% endhint %}

* Shopify Plugin - See Plugin * [WooCommerce Plugin](/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin) * [BigCommerce Plugin](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin) * [MCP Server](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/building-with-ai/mcp-server) {% hint style="danger" %} ***If your storefront is currently taking live traffic DO NOT follow redirect instructions until you have completed all other steps.*** {% endhint %} *** #### Products & Campaign Choose to sync products from another platform or to use products already in CheckoutChamp. If neither of these options are applicable then products can be manually added after the site is created. Choose to create a new campaign or use an existing campaign. {% hint style="info" %} A campaign is a collection of offers and upsells. If you sync products from another platform, these will always since into their own campaign by default. If you have multiple Shopify stores, each store will be its own campaign so you can filter your reports by each store if needed. {% endhint %}

*** #### Domain Add your checkout domain into CheckoutChamp to retrieve the CNAME records, or select a domain that is already added to your account. You can also choose to add your domain later if it is more convenient.

When entering your domain now, enter your domain or subdomain into the field(s) at the top of this panel. ADA, EAA and GDPR compliance is provided by Clym.io, where ADA and EAA are enabled by default.

When you click **Confirm Domain**, CheckoutChamp will connect with [Entri](https://www.entri.com) to detect the Domain Host and automatically apply the CNAME records to the DNS settings (after a login splash page). Alternatively, the CNAME records can be acquired inside the funnel or within your system settings so you can manually add them to the DNS settings of your domain host. There is a link to the [Domain Configuration Guide](/funnel-builder/creating-and-editing-funnels-pages/domain-configuration) on this panel. The SSL Certification can take some time so it’s best to do this as soon as possible so you don't have to wait for this after your funnel is built. *** #### Site Colors Choose a Primary and Secondary color for the website. For storefronts, these colors determine the colors of your buttons and accents. For sales funnels and checkout upgrades, these colors will be available in the page builder color picker for easy selection.

*** ### 2 - Edit Funnel and Funnel Settings #### Edit Funnel After you complete the wizard you will be loaded into the [Funnel Visualizer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer) with a template for your Storefront selection. Edit the pages and use the arrows to set the button routings. Unedited pages and arrows display as red.

Page Building Documentation

* [Funnel Visualizer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer) * [Page Builder](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder) * [Page Building Tips](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips)

Once all the pages and arrows are green you can then **Publish** the funnel. Be sure to [add your domain](/funnel-builder/creating-and-editing-funnels-pages/domain-configuration) before publishing! {% hint style="info" %} If you make edits to a published page you will need to publish again to see those changes reflect on the live site. Unpublished pages will be displayed in blue. {% endhint %} #### Autoresponders Add an [Email Page Type](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/page-types#pagetypes-email) and click it’s settings gear to configure email autoresponders. You do not need to connect arrows to the Email page.

{% hint style="info" %} If you are using Shopify to send your order confirmation emails, enable the sendEmails checkbox on the appropriate Shopify plugin. {% endhint %} #### Email Service Providers Add your email service provider plugins on the CRM side of your account. ESPs do not send transactional emails but are instead used for email marketing. After you add an ESP plugin, edit the plugin to determine which customer types go to which ESP list. Click below for additional ESP documentation:


Email Services Provider Documentation			/pages/w7HYbFoCgaHylzvcRydo	/files/8pGFtq9bcqFJmmJdC79Y

#### Edit Funnel Settings Edit the funnel’s settings on the top left of the Funnel Visualizer to change various settings and add any add-on services.

**Name**: The internal name used to identify the funnel. **Title**: The title of your page will help you identify it on your Funnel Template page. This is also the title which will appear on the browser tab when you are previewing your title and when your Funnel is published. **Favicon**: You can customize the icon on your Funnel's browser tab by uploading a Favicon. Favicons must be uploaded in .ico format. There are many free available tools which will convert your existing images into .ico files. Once you have loaded specified a Favicon, the visitors to your site will be able to see this on their browser tab. **Logo**: You can place your company logo into this section and it will be applied throughout the funnel, preventing you from needing to upload the logo onto each page. **Campaign**: Specify which Konnektive CRM campaign products will be sold on your funnel.
Use the other sections of this window to add coupons, tracking pixels, and Add-On services such as Fraud Manager (pre-transaction fraud screening) and PAAY 3DS (chargeback liability shift). * [Offers and Upsells](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/offers-and-upsells) * [Collections](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/collections) * [Coupons](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/coupons) * [Tracking Pixels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels) * [Configure Google Analytics](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/configure-google-analytics) * [Gateways](/crm/gateway-setup/gateway-integrations) * [Affiliates](#checkoutchamponboarding-and-activation-affiliates) * [Everflow](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/affiliates/everflow) * [Sales Tax Profiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/sales-tax-profiles) * [Add Ons](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons) * [PAAY (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/paay-add-on) * [Route Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/insureship-add-on) * [ShipEngine Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/shipengine-add-on) * [Google Places](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/google-places) * [Fraud Manager with Checkout Champ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/fraud-manager-add-on) * [Facebook Messenger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/facebook-messenger) * [reCAPTCHA Enterprise](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/recaptcha-enterprise) * [SMTP Accounts](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/smtp-accounts) * [Fulfillment Houses](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fulfillment-houses) * [Ship Profiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/ship-profiles) * [Fonts](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fonts) * [Payments](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments) * [Affirm (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/affirm) * [Afterpay (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/afterpay) * [Amazon Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/amazon-pay) * [Apple Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/apple-pay) * [Google Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/google-pay) * [PayPal Seamless Checkout (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal) * [Klarna (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/klarna) * [Sezzle (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sezzle) * [Multi-Pay Rebills (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/multi-pay-rebills) * [BitPay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bitpay) * [Bancontact (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bancontact) * [iDEAL (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/ideal) * [SEPA (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sepa) * [Boleto(Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/boleto) * [P24 (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/p24) * [Social Proof](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/social-proof) * [Maintenance](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/maintenance) *** ### 3 - Social Media and Affiliates #### Social Media Inside the Funnel Settings, open the [Tracking Pixels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels) section to add your various social media IDs. #### Affiliates Inside the Funnel Settings, click the Affiliates option to add a new or existing affiliate to the funnel/campaign. Expand for affiliate configuration details On the CRM side of your account you can add conversion pixels to your affiliates under CRM>Affiliates. Please follow this documentation for information on adding conversion pixels: [Affiliate Pixels](/crm/crm-setup/affiliate-setup/affiliate-pixels) Each affiliate must have their own affId (can be customized) which needs to be present on the URL for the affiliate to get credit for their sales and for the system to fire the conversion pixel. The affiliate’s url that the customer clicks on must contain this affId so the system knows who to attribute credit to. Ex) ?**affId=\[affId]**\&products=.... *** ### 4 - Overview and Testing Before you test, use the CRM side of your account to get an overview on your configurations for your products, campaigns, gateways, fulfillment houses, SMTP auto-responders. Make sure everything looks as it should before you start your first test. **Navigate to:**

CRM → Products

![](/files/5BoiLOW98PSppIfyXUtB) * Check that products have SKUs, images, and variants (if applicable) * Check that each product is assigned to the proper fulfillment house * Products without a SKU likely have variants. Edit these products to check the variants.

CRM → Campaigns

![](/files/oXHxPU7ouL8pctk0lAzD) * Check that all appropriate countries are selected for the campaign(s) * Check that all offers are present within the campaign and at the correct price point * Ensure all email and SMS autoresponders are created (unless using Shopify autoresponders) * Check if Tax Profiles are added or [Tax Service Plugin](/crm/plugins/tax-services) is enabled * Ensure any coupons are created * Ensure any Shipping Profiles created * Ensure any extra Custom Fields are created * Ensure Phone Campaigns have Sales Scripts * Ensure all offers and upsells have a gateway applied *Need to apply a new gateway to all of your offers?* Inside your campaign under the “Campaign Products” section, click the “Options” button and then “Batch Update”. ![](/files/1XATlpY3sUVEKM16NBb5) In the window pop-up, you will check the Update Merchant Account box, and select the merchant account added. ![](/files/6Klce1VPheDipvgXUEKB) *If you have merchant accounts for different products, you can add each of them individually with this function, and you can also bill products as individual transactions rather than combined transactions* ***If any updates are made to the campaign (or products are re-synced) you need to edit a page within the funnel, save, and publish.***

CRM → Affiliates

![](/files/A4nj9AR8MVaPR04vat9Z) * Is the affiliate assigned to the campaign(s)? * Is a conversion pixel placed for each campaign, with proper token usage? * Is commission set for CPC, Step1, and/or Step2?

CRM → Call Centers

![](/files/p8ps0P98DX7wFhkI6hgo) * Is Call Center created with Agents added? * Are the agents locked in call center campaigns? (if needed) * Do agents have their commission rate set? * Are all Call Dispositions and Cancellation Reasons created?

Gateways → Gateway List

![](/files/RGuuKLAIaF3AwhMxepLx) * All gateways are enabled that should be * Gateway has credentials, Limits and Descriptor field * Accepted Payment Type is correct

Gateways → Recycle Billing

![](/files/bjg76l4jrGXI5Tp4F2Sv) Are profiles set up properly for how you want to reattempt failed rebills

#### Test Gateways and Fulfillment It is recommended to create a PHONE campaign that is dedicated to testing new gateways and/or fulfillment houses. Please follow [this article](/crm/gateway-setup/adding-a-gateway/testing-your-gateway-through-order-entry) for more detailed information on how to test your gateway through the manual order entry page. If your fulfillment house is applied to the base product you use in the testing campaign, you can test this while testing your gateway. ### 5 - Test Funnel and Auto-responders Go to your published checkout URL that the customers will checkout from. Add a product to the cart by adding the product to the URL. This will display that product inside the checkout page as if the customer had selected it from your store front. To add a product to the URL, follow this syntax: *?products=campaignProductId:quantity* Include a variant by adding a period and variantDetailId to the campaignProductId *?products=campaignProductId.variantDetailId:quantity*

Expand to see examples of how to populate the cart

* Add 1 quantity of campaignProductId 23 * * Adds 1 quantity of campaignProductId 234 and 2 quantity of campaignProductId 235 * * Adds 3 quantity of campaignProductId 87’s variantId 45 and 2 quantity of campaignProductId 79 *

With the product(s) in the cart, go ahead and follow your checkout funnel using a test card, live card, or live PayPal account. {% hint style="warning" %} Test Card transactions will not test the gateway nor fulfillment house. {% endhint %} Log into the CRM side of your account to search for your orderId and confirm all products were purchased and ran against the proper gateways. Also confirm that any order confirmation SMS or Email has sent. {% hint style="info" %} Order Confirmations will send once the customer reaches the Thank You page of your funnel. If the customer does not reach the Thank You page, the email will send 20 minutes after the last upsell was purchased. {% endhint %} If you tested with a live card or PayPal, your fulfillment record will move from HOLD status to PENDING status after your fulfillment delay has expired and the fulfillment task runs (once every hour). *** ### 6 - Implement Redirect Once all the above steps are complete, your Nameservers are updated and SSL certificates are Validated, follow the instructions for your storefront on how to implement the redirect so that all of your sales will go to your new customized checkout pages. [BigCommerce Checkout Redirect](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/bigcommerce-checkout-redirect) [WooCommerce Checkout Redirect](/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin/woocommerce-checkout-redirect) For Shopify, please consult with your account manager for guidance on setting up checkout redirect. A guide for an alternative method that does not use a redirect can be found [here](/crm/plugins/data-sources/shopify/use-shopify-products-without-shopify-redirect) When you are finished, do one last test by going to your storefront, select products, and proceed to checkout. If you followed the steps above, you should be redirected to your CheckoutChamp checkout page with the selected products.\ \ Check out with your [CheckoutChamp Test Card](/crm/admin-setup/test-cards) or a live card to submit the order and follow your upsell flow. Then find your order inside CheckoutChamp to confirm everything looks as it should. If you have any issues, please reach out to your account manager or submit a support ticket. *** #### **Video** {% embed url="" %} # Go Live Checklist Use this checklist to ensure your account is ready to go live! Each checklist item is an expandable section with instructions and links to the appropriate documentation if you need further assistance. {% hint style="success" %} You can print this page to use it as a physical checklist! This list might contain items that are not applicable to you. Feel free to reach out to support if you have any questions. {% endhint %} *** ## CRM

Products have been configured

**Sync products from external source**: [Shopify](/crm/plugins/data-sources/shopify), [BigCommerce,](/crm/plugins/data-sources/big-commerce) [WooCommerce](/crm/plugins/data-sources/woocommerce) [**Manually create products**](/crm/crm-setup/product-setup): Use only if not selling the same products as your external storefront.

* Check that products have SKUs, images, and variants (if applicable) * Check that each product is assigned to the proper fulfillment house * Products without a SKU likely have variants. Edit these products to check the variants.

Fulfillment has been added to the products

Ensure you have followed the [Fulfillment House Setup](/crm/plugins/fulfillment-houses/general-fulfillment-house-setup) article. If you are using any natively integrated fulfillment houses, add the plugin and set the plugin to the appropriate products. ![](/files/oUYaVaS9cnwcpfi6K0Jf) If you are using Shopify and are wanting Shopify to continue sending the orders to your fulfillment house/software, enable “Send Initial Orders”, “Send Rebill Orders”, and “Pull Tracking Info” on the plugin. ![](/files/LCeJOFHGmDySXLrXV1Um)

Gateways have been configured in CRM and tested

![](/files/ta91ptoZA97jWAvljBJS) * All gateways are enabled that should be * Gateway account has credentials, Limits and Descriptor field * Accepted Payment Type is correct Follow this document to properly test your gateways: [Testing Your Gateway Through Order Entry](/crm/gateway-setup/adding-a-gateway/testing-your-gateway-through-order-entry)

Campaigns have been configured in CRM

* Check that all appropriate countries are selected for the campaign(s) * Ensure all [email autoresponders](/crm/crm-setup/campaign-setup/auto-responder-setup) are configured (unless using Shopify autoresponders) * Add any [SMS autoresponders](/crm/plugins/sms) (Twilio or SendPlex) * Check if [Tax Profiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/sales-tax-profiles) are added or [Tax Service Plugin](/crm/plugins/tax-services) is enabled * Ensure any [coupons](/crm/crm-setup/campaign-setup/campaign-coupons) are created * Ensure any [Shipping Profiles](/crm/crm-setup/campaign-setup/shipping-profiles) created * Ensure any extra [Custom Fields](/crm/crm-setup/campaign-setup/custom-fields) are created * Ensure any Phone Campaigns (for inbound or outbound sales calls) have Sales Scripts NOTE: If any updates are made to the campaign (or products are resynced) you need to edit a page within the funnel, save, and then publish. For more on configuring a campaign, please view this article: [Creating a Campaign](/crm/crm-setup/campaign-setup/creating-a-campaign)

Campaign Products have been configured in CRM

![](/files/W7wcJ2BzbRIN63A8wrMZ) * Check that all offers and upsells are present within the campaign and at the correct price point If any of your products have variants then the price will not show inside the campaign. Instead, check the variant prices inside your base products. If any updates are made to the campaign (or products are resynced) you need to edit a page within the funnel, save, and then publish. Resyncing products will overwrite any prices inside the campaign unless the Override Price toggle is enabled. For more information on adding products to a campaign, please view this article: [Adding a Product to a Campaign](/crm/crm-setup/campaign-setup/adding-a-product-to-a-campaign)

Gateways have been added to your Campaign Products

![](/files/kHHVcuZmXurtkWyh5vFE) To quickly apply your gateway to a batch of your offers and/or upsells, click the “Options” button within the Offers/Upsells section and then click the “Batch Update” option.

In the window pop-up, you will check the Update Merchant Account box and select the merchant account added.

It is best practice to edit a page within the funnel, save, and then publish the funnel after any updates are made to the campaign - including if products are re-synced.

Shipping Profiles have been configured in CRM

Shipping Profiles are used to provide different shipping options for your customers. Examples: * Offering free shipping over a certain dollar amount * Charge more for international shipping More info: [Shipping Profiles](/crm/crm-setup/campaign-setup/shipping-profiles)

Desired plug-ins have been configured in CRM

* [Email Service Providers](/crm/plugins/email-service-providers): Send customers to lists within your ESP for marketing * [Fraud Manager](/crm/plugins/fraud-services/fraud-manager): Pre-transaction screening to prevent fraud * [Chargeback Management](/crm/plugins/chargeback-management): Fight or resolve chargebacks * [PAAY 3DS](/crm/plugins/authentication/paay): Reduce friendly fraud and shift CB liability * [Card Updater](/crm/plugins/data-sources/fluidpay-account-updater): Update lost and expired cards to help keep your subscriptions billing * [Shipping Insurance](/crm/plugins/shipping-insurance): Ease customer’s thoughts by offering shipping insurance on your offers * [Smarty](/crm/plugins/data-sources/smarty): Address validation (pre or post transaction) * [ShipEngine](/crm/plugins/data-sources/shipengine): Shipping calculations based on weight and shipping address

Affiliates and their conversion pixels added

Add affiliate profiles under CRM → Affiliates to give credit to your affiliates when they drive traffic to your site. After you add an affiliate, edit their profile to make adjustments and add pixels.

Please follow this documentation for information on adding conversion pixels: [Affiliate Pixels](/crm/crm-setup/affiliate-setup/affiliate-pixels) Each affiliate must have their own affId (can be customized) which needs to be present on the URL for the affiliate to get credit for their sales and for the system to fire the conversion pixel. The affiliate’s url that the customer clicks on must contain this affId so the system knows who to attribute credit to. Ex) ....

* Is the affiliate assigned to the campaign(s)? * Is a conversion pixel placed for each campaign, with proper token usage? * Is commission set for CPC, Step1, and/or Step2? More info: [Affiliate Setup](/crm/crm-setup/affiliate-setup)

Call Center is configured

* Is Call Center created with agents added? * Are the agents locked in call center campaigns? (if needed) * Do agents have their commission rate set? * Are all [Call Dispositions and Cancellation Reasons](/crm/crm-setup/call-center-setup/cancellation-reasons-refund-reasons-and-call-dispositions) created? More info: [Call Center Setup](/crm/crm-setup/call-center-setup)

Recycle Billing is configured

* Are profiles set up properly for how you want to reattempt failed rebills? More info: [Recycle Billing](/crm/gateway-setup/recycle-billing)

*** ## Funnel Builder

All CheckoutChamp pages have been edited and saved

From the funnel visualizer, ensure all pages of the funnel have been created, and all page borders are green. Inside the funnel settings, set the title of the funnel (shows on browser tab), upload a Favicon (small image on the browser tab), and upload your logo (replaces placeholder logos on templates). More info: [Funnel Visualizer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer) [Page Builder](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder)

All CheckoutChamp route arrows are defined

The arrows on the funnel visualizer determine which buttons will route the customer to the next page.

All arrows will need to be green before you can publish the funnel.

Product Button Checkbox and Radio Audit

Make sure products are assigned to the intended element on your page. Campaign Products can be assigned to a Button, Product Radio Button ***or*** Product Checkbox. To assign a product to an element, click on the element and then open the settings panel:

\*\*Warning - If you assign a product to multiple elements on the same page, that product will be passed in multiple times which will result in the purchase of multiple products. If the customer lands on your checkout page with products already added to the cart then you may choose to not assign a product to the Submit Order button.

Button Actions are set properly

Ensure buttons are set to the correct actions are set to the buttons on your pages. You can check which action is selected by clicking on the button and then viewing the settings for the button:

Below are the different button actions: * **Add to Cart**: Adds the associated product to the cart * **Submit + Route**: Submit the data on the form to CheckoutChamp and route customer to the next page * **Route to Next Page**: Send customer to the next page of the funnel without submitting data to CheckoutChamp * **Open Section**: Enter an Id which will open when the button is clicked * **Open Section + Hide**: Enter an Id which will open when the button is clicked, and hide the button * **Submit Lead + Open Section**: Enter an Id which will open when the button is clicked, and also submit the lead info into CheckoutChamp * **Open Popup**: Open a popup on the page * **Apply Coupon**: Submit an entered coupon to calculate the discount on the checkout page

Custom Domain has been assigned to the Funnel

Add your own domain to the funnel. After you add the domain you will be presented with CNAME values which you will need to add into your DNS settings. If you are redirecting from an external storefront into CheckoutChamp, keep your root domain assigned to your storefront and use a subdomain for your CheckoutChamp funnels. More info: [Domain Configuration](/funnel-builder/creating-and-editing-funnels-pages/domain-configuration)

Optimize SEO

Inside the funnel settings, click Maintenance to adjust the search engine optimization for your funnel.

Add Tracking Pixels

Inside the funnel settings, click Tracking Pixels to add your Google Analytics or Google Tag Manager, Facebook Pixel ID, Facebook Conversions API Key, Snapchat Pixel ID, TikTok Pixel ID, and/or LisTrak Merchant ID to the funnel:

After you add any of the tracking pixels above, CheckoutChamp will insert the scripts onto the pages. The Custom Head and Body Tracking Code sections can be used to place scripts across all the pages of the funnel without having to do so manually. Please be sure to publish the funnel again after any tracking pixel updates and test your changes. More info: [Tracking Pixels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels)

Set alternative payment options

Inside the funnel settings, open the Payments section. This window allows you to determine which gateway is linked to your alternative payment buttons for the funnel.

Enable any Add-Ons/Plug-ins

Inside the funnel settings, open the Add Ons section. If you added plugins to your CRM already, this is where you will enable those plugins on this funnel.

All CheckoutChamp pages are working as expected after publishing

Navigate through your Live funnel by clicking the Live Site button from the Funnel Visualizer. This will bring you to your Default funnel page and you can click your links and fill out your forms like a customer would. If you are redirecting to CheckoutChamp, before you implement the redirect you should ensure the products are populated within your CheckoutChamp checkout page. ***To do this:***\ Go to your published checkout URL that the customers will checkout from. Add a product to the cart by adding the product to the URL. This will display that product inside the checkout page as if the customer had selected it from your storefront. To add a product to the URL, follow this syntax: *?products=campaignProductId:quantity* Include a variant by adding a period and variantDetailId to the campaignProductId *?products=campaignProductId.variantDetailId:quantity* {% hint style="info" %} Examples: * Add 1 quantity of campaignProductId 234 * * Adds 1 quantity of campaignProductId 234 and 2 quantity of campaignProductId 235 * * Adds 3 quantity of campaignProductId 87’s variantId 45 and 2 quantity of campaignProductId 79 * {% endhint %} With the product(s) in the cart, go ahead and follow your checkout funnel using a test card, live card, or live PayPal account. {% hint style="warning" %} Test Card transactions will not test the gateway nor fulfillment house. {% endhint %} Log into the CRM side of your account to search for your orderId and confirm all products were purchased and ran against the proper gateways. Also, confirm that any order confirmation SMS or Email has been sent. {% hint style="warning" %} Order Confirmations will be sent once the customer reaches the Thank You page of your funnel. If the customer does not reach the Thank You page, the email will be sent 20 minutes after the last upsell was purchased. {% endhint %} If you tested with a live card or PayPal and are using a natively integrated fulfillment house, your fulfillment record will move from HOLD status to PENDING status after your fulfillment delay has expired and the fulfillment task runs (once every hour).

Implement Redirect

Once all the above steps are complete, your Nameservers are updated and SSL certificates are validated, follow the instructions for your storefront on how to implement the redirect so that all of your sales will go to your new customized checkout pages. [BigCommerce Checkout Redirect - Checkout Champ](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/bigcommerce-checkout-redirect) [WooCommerce Checkout Redirect - Checkout Champ](/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin/woocommerce-checkout-redirect) When you are finished, test the redirect by going to your storefront, selecting products and then proceed to checkout. If you followed the steps above, you should be redirected to your Checkout Champ checkout page with the products you had selected. Check out with your [Checkout Champ Test Card](/crm/admin-setup/test-cards) or a live card to submit the order and follow your upsell flow. Then find your order inside Checkout Champ to confirm everything looks as it should.

# Dashboard Overview (APP) **When you log into Checkout Champ, you will see the Dashboard.** You can filter to a specific funnel or view all funnel stats for the date range you specify. * Visits * Leads * Orders * Click through Rate * Gross Revenue * Net Revenue

* **Sales Summary**: These values are a calculation of all sales from the last 30 days.

* **Upsells**: This shows the real-time data of Upsell performance.

{% embed url="" %} **Relative Links:** * **Checkout Champ Account Settings** * **Creating and Editing a Funnel** # Creating & Editing Funnels/Pages {% embed url="" %} This guide will walk you through how to create and edit a funnel.
* [Creating a Funnel](#creatingacheckout-funnel-and-editingpages-creatingafunnel) * [Edit a Funnel](#creatingacheckout-funnel-and-editingpages-editafunnel) When you are finished following this article, please view these related articles: * Funnel Visualizer and Page Builder * [Funnel Visualizer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer) * [Page Builder](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder) * [Page Building Tips](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips) *** ### Creating a Funnel On your Checkout Champ Dashboard, click **Create a Funnel**, to get started!

Now you will select your **Goal**, which is what do you plan to use the funnel for. The available options are: * Collect Emails -Build an email prospect list * Sell Products - Sell your products or services * Host Webinar - Showcase your next webinar.

Collect Emails

When you select Collect Emails, you will select the lead template you prefer

Sell Products

When you select Sell Products, you can select the Type of funnel you are building:

Sales Funnel: Sell your products or services
Product Launch: Sell your new product with video pages
Membership: Provide products or services with a monthly membership
Shopify: Route your Shopify cart to FunnelKonnekt for checkout

Host Webinar

When you select Host Webinar, you can select the Type of funnel you are building:

Live Webinar: Showcase your live webinar
Webinar Replay: Replay a webinar for lead generation.

| | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | There will be a selection of funnel templates. Choose which You may filter the types and categories at the top of the page.

When you have found the template you like, click the box and then click "Chose Templage".

Once you have selected the Funnel Template and the Funnel Type, you can **Name** and **Build** your funnel.

Alternatively, you can go to your Funnels list and click the “Add A New Funnel” option on the left side of this page. ### **Edit a Funnel** Once you have built a Funnel, you will be able to view and edit it from the Funnels menu.

When you select the Funnel you will be brought to the funnel visualizer, where you can begin to edit your funnel/pages.
* Funnel Visualizer and Page Builder * [Funnel Visualizer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer) * [Page Builder](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder) * [Page Building Tips](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips) # Funnel Visualizer and Page Builder Please follow the links below for helpful hints on building your web pages with CheckoutChamp! #### Funnel Visualizer * [Connecting Funnel Pages](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/connecting-funnel-pages) * [Edit Funnel Settings](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings) * [Add Ons](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons) * [Facebook Messenger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/facebook-messenger) * [Fraud Manager with Checkout Champ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/fraud-manager-add-on) * [Google Places](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/google-places) * [PAAY (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/paay-add-on) * [reCAPTCHA Enterprise](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/recaptcha-enterprise) * [Route Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/insureship-add-on) * [ShipEngine Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/shipengine-add-on) * [Affiliates](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/affiliates) * [Everflow](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/affiliates/everflow) * [Collections](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/collections) * [Coupons](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/coupons) * [Fonts](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fonts) * [Fulfillment Houses](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fulfillment-houses) * [Gateways](/crm/gateway-setup/gateway-integrations) * [Maintenance](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/maintenance) * [Offers and Upsells](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/offers-and-upsells) * [Payments](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments) * [Affirm (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/affirm) * [Afterpay (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/afterpay) * [Amazon Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/amazon-pay) * [Apple Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/apple-pay) * [Bancontact (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bancontact) * [BitPay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bitpay) * [Boleto(Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/boleto) * [Google Pay (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/google-pay) * [iDEAL (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/ideal) * [Klarna (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/klarna) * [Multi-Pay Rebills (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/multi-pay-rebills) * [P24 (CheckoutChamp)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/p24) * [PayPal Seamless Checkout (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal) * [SEPA (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sepa) * [Sezzle (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sezzle) * [Sales Tax Profiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/sales-tax-profiles) * [Ship Profiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/ship-profiles) * [SMTP Accounts](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/smtp-accounts) * [Social Proof](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/social-proof) * [Tracking Pixels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels) * [Configure Google Analytics](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/configure-google-analytics) * [Page Templates](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/page-templates) * [Page Types](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/page-types) * [URL Customization](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/url-customization) #### [Page Builder](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder) * [Adding Local HTML Files](/funnel-builder/creating-and-editing-funnels-pages/adding-local-html-files) * [Builder Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar) * [Device View Changer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar/device-view-changer) * [Popups](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar/popups) * [Building Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) * [Basic Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks) * [Rows & Columns](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks/rows-and-columns) * [Button Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks) * [Button Actions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks/button-and-link-actions) * [Carousel / Slider Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/carousel-slider-blocks) * [Extra Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/extra-blocks) * [Form Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks) * [Shopping Cart Element](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks/shopping-cart-element) * [Icon Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/icon-blocks) * [My Element Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/my-element-blocks) * [Product Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/product-blocks) * [Social Media Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/social-media-blocks) * [Testimonial Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/testimonial-blocks) * [Layer Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/layer-manager) * [Hiding and Revealing Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/layer-manager/hiding-and-revealing-elements) * [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles) #### [Page Building Tips](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips) * ["Upgrade" or Replace a Product](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/upgrade-or-replace-a-product) * [Acquire and Send Session Data to 3rd Party](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/acquire-and-send-session-data-to-3rd-party) * [Adding Age Consent](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/adding-age-consent) * [Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs) * [Bootstrap Integration](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/bootstrap-integration) * [Common Page Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) * [Convert Checkbox and Radio](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/convert-checkbox-and-radio) * [Create a Common Menu](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/create-a-common-menu) * [Creating a Marketing Opt-in Checkbox](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/creating-a-marketing-opt-in-checkbox) * [Creating a Split Variation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/creating-a-split-variation) * [Currency Selector](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/currency-selector) * [Custom Classes](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/custom-classes) * [Customer File Uploads](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/customer-file-uploads) * [Duplicating Pages & Funnels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicating-pages-and-funnels) * [Element Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/element-toolbar) * [Flex Settings](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/flex-settings) * [Genders](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/genders) * [Hide element if box is checked/ Billing address same as Shipping](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/hide-element-if-box-is-checked-billing-address-same-as-shipping) * [Hover Effects (adding Pseudo-classes)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/hover-effects-adding-pseudo-classes) * [How to convert a button into a link](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/how-to-convert-a-button-into-a-link) * [How to set Anchor Links](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/how-to-set-anchor-links) * [Keep customers on Upsell Page after buying an upsell](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/keep-customers-on-upsell-page-after-buying-an-upsell) * [Language Replacement Mapping](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/language-replacement-mapping) * [Lazy Loading](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/lazy-loading) * [Make a button appear after a set amount of time](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) * [Making A New Section Appear After a Timer Expires](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/making-a-new-section-appear-after-a-timer-expires) * [Multiple Input Indicator](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicate-input-indicator) * [Page Sizes and Image Dimensions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/page-sizes-and-image-dimensions) * [Pass custom parameter on URL and store onto order](broken://pages/HhA1Jj7GKlbFak4a4Ri0) * [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats) * [Product Drop Down / Select](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/product-drop-down-select) * [Product Quantity Select](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/product-quantity-select) * [Product Table](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/product-table) * [Product Tiles](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/product-tiles) * [Redirect from CheckoutChamp to externally hosted upsell or Thank You page.](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/redirect-from-checkoutchamp-to-externally-hosted-upsell-or-thank-you-page) * [Shipping Profiles with Checkout Champ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/shipping-profiles) * [Subscribe & Save](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/subscribe-and-save) * [Timer – Route to next page](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/timer-route-to-next-page) * [Tokens](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/tokens) * [Use link or button to initiate a pop-up](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up) * [Using the Survey Element](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/using-the-survey-element) * [Variant Selection](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/variant-selection) * [Product Checkbox](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/variant-selection/product-checkbox) * [Product Variant Selection](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/variant-selection/product-variant-selection) # Funnel Visualizer {% embed url="" %} The Funnel Visualizer is the page where you can create the blueprint of your funnel flow. The visualizer page has all the features supporting the creation of a funnel. You can get to the visualizer by editing a funnel.

Below you’ll find brief descriptions for each button on the page

* [Page Types](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/page-types) * [Connecting Funnel Pages](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/connecting-funnel-pages) * [Edit Funnel Settings](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings) * [URL Customization](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/url-customization) * [Page Templates](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/page-templates) # Page Types Checkout Champ has multiple page types you can add to your funnel.
[Presell Page](#pagetypes-presellpage) | [Lead Page](#pagetypes-leadpage) | [Checkout Page](#pagetypes-checkoutpage) | [Upsell Page](#pagetypes-upsellpage) | [Thank You Page](#pagetypes-thankyoupage) | [Generic Page](#pagetypes-genericpage) | [Opt In](#pagetypes-optin) | [Download](#pagetypes-download) | [Collection](#pagetypes-collection) | [Catalog Page](#pagetypes-catalogpage) | [Survey](#pagetypes-survey) | [Webinar](#pagetypes-webinar) | [VSL](#pagetypes-vsl) | [Blog Post](#pagetypes-blogpost) | [Pop-up](#pagetypes-pop-up) | [Email](#pagetypes-email) | [SMS/Text](#pagetypes-sms-text) | [Shopify](#pagetypes-shopify) | [WooCommerce](#pagetypes-woocommerce) | [BigCommerce](#pagetypes-bigcommerce) | [Magento](#pagetypes-magento) | [ClickBank](#pagetypes-clickbank) | [Quiz](#pagetypes-quiz) | [Testimonial](#pagetypes-testimonial) | [External Page](#pagetypes-externalpage) | [Shopping Cart Page](#pagetypes-shoppingcartpage) | [Product Detail Page](#pagetypes-productdetailpage) | [Common Page](#pagetypes-commonpage) | [PageNotFound](#pagetypes-pagenotfound) | [Membership Folder](#pagetypes-membershipfolder) | [Login Page](#login-page) | [Profile Page](#profile-page) | [Member Area Page](#member-area-page) | [Cancel Membership Page](#cancel-membership-page) | [Restart Membership](#restart-membership) | [Update Card](#update-card) | [Change Product](#change-product) ***

#### ~~**Presell Page**~~** \*\* DEPRECATED: Use Lead Page \*\*** ~~A Presell Page is a landing page which can be used as a bridge between your advertisements and your shopping cart. A presell page can be used to educate, inform, and influence visitors to make a purchase before the Checkout Page.~~ {% hint style="info" %} ~~A presell page’s purpose is to persuade customers, they do not carry product functionality and typically make use of buttons and links to route visitors to the next page.~~ {% endhint %} [~~Elements~~](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) ~~available to pass data:~~ * ~~Basic forms~~ * ~~Buttons~~ ***

#### **Lead Page** A Lead Page is designed to get visitors to act on an offer. Lead pages can be used to capture user information, pass a product to a checkout page, or operate as a presale/advertorial page. The Lead Page generates a lead, which can be used for future marketing, and prompts a decision from your visitors. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to pass or submit data: * Buttons * Forms * Shopping Cart * Product Selection * Surveys {% hint style="info" %} If using a lead page to pass products and are not collecting leads the button / link action should be Route to Next Page with the product added. {% endhint %} ***

#### **Checkout Page** A Checkout Page is designed to complete orders quickly and efficiently. Checkout Pages are equipped to process credit card and PayPal transactions. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to pass or submit data: * Buttons * Forms * Shopping Cart * Product Selection * PayPal ***

#### **Upsell Page** Adding an Upsell Page to your funnel adds the opportunity to make an additional sale (or sales) after checkout. Use it to offer customers an additional product, trial or membership to the purchase placed on the checkout page. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to display and submit data: * Buttons * Product Selection * Shopping Cart ***

#### **Thank You Page** The Thank You Page is the last page of a sales flow. The Thank You Page can be designed to show a receipt of the order and serve as the last page a customer interacts with, or provide links to other content. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to display data: * Invoices * tokens -see our knowledge base article on [tokens](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/tokens) ***

#### Generic Page The generic page is used for standard pages that don’t require any specific functionality. These are commonly used for Privacy Policy, Term and Conditions, and Refund Policy pages. ***

#### **Opt In** An Opt-in page is meant to generate email or product subscriptions. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to submit data: * Buttons * Forms * Surveys * Shopping cart ***

#### Download The download page is specifically used to allow your customers to download a file. ***

#### **Collection** Use this page to dynamically display product collections. The page normally consists of a header and footer from a Common page, a menu in the header, and a Product Row element containing a product tile. The product tile is dynamically populated and replicated for each product in the collection to be displayed. ***

#### **Catalog Page** The Catalog page is a page used to display a whole collection of products on one page for customers to select from. Think of the catalog page as the store front for your Ecommerce store. You can feature particular items, or list all your inventory on one page. It has a cart element built into it to hold products as customers browse. By default, products are not dynamically filled in from your campaign so you must select which products you want and build out each product tile. Follow this article to dynamically display products on a catalog page: [Collections](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/collections) [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to pass data: * Buttons * Forms * Images * Product Selection * Links ***

#### Survey Create a survey page to qualify customers for your offer. {% hint style="warning" %} Customer’s choices are not stored and product recommendations cannot be made {% endhint %} ***

#### Webinar Use the webinar page to find webinar templates to host a webinar for your customers. ***

#### VSL Use the VSL page to find templates to build your video sales letter page. ***

#### Blog Post Use the Blog Post page to find templates to start building an attractive blog post. ***

#### **Pop-up** Pop-up pages can be used to show a popup when a customer clicks on a specific link. These are commonly used to show Terms and Conditions, Privacy Policy and Refund Policy. For more information please see this [link](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up). ***

#### **Email** The Email “page” is a visual marker for your funnel visualizer to indicate there are autoresponders configured for the funnel/campaign. You can create and edit email designs by editing the email page type. Click on the gear icon, or the pencil icon to select from templates or create new email designs. You do not need to apply any arrows to the Email page type. ***

#### **SMS/Text** The SMS/Text “page” is a visual marker for your funnel visualizer to indicate when an sms or text message is sent after a page. This is only meant to serve as a holding place. ***

#### **Shopify** The Shopify “page” is a visual marker for your funnel visualizer to indicate when Shopify page is routing to your Checkout Champ checkout page. This is only meant to serve as a holding place. For more information on the Shopify plugin, please view [this article](/crm/plugins/data-sources/shopify). ***

#### **WooCommerce** The WooCommerce “page” is a visual marker for your funnel visualizer to indicate when a WooCommerce page is routing to your Checkout Champ checkout page. This is only meant to serve as a holding place. For more information on the WooCommerce plugin, please view [this article](/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin). ***

#### **BigCommerce** The BigCommerce “page” is a visual marker for your funnel visualizer to indicate when a BigCommerce page is routing to your Checkout Champ checkout page. This is only meant to serve as a holding place. For more information on the BigCommerce plugin, please view [this article](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin). ***

#### Magento The Magento “page” is a visual marker for your funnel visualizer to indicate when a Magento page is routing to your Checkout Champ checkout page. This is only meant to serve as a holding place. For more information on the Magneto plugin, please view [this article](/funnel-builder/redirect-storefront-to-checkoutchamp/magento-plugin). ***

#### ClickBank The ClickBank “page” is a visual marker for your funnel visualizer to indicate when ClickBank products are being used on your Checkout Champ checkout page. This is only meant to serve as a holding place. For more information on the ClickBank plugin, please view [this article](/crm/plugins/data-sources/clickbank). ***

#### Quiz Create a quiz for your customers to complete. This might be useful in qualifying customers for your offer. ***

#### Testimonial Use the testimonial page to find templates that you can use to feature customer testimonials about your product or brand. ***

#### **External Page** The External page type allows you to redirect the customer to an external upsell flow or Thank You page, after the checkout. View [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/redirect-from-checkoutchamp-to-externally-hosted-upsell-or-thank-you-page) for more information. *** #### **Shopping Cart Page** When a users adds a product to their cart, they can proceed to view their cart on a shopping cart page. Though not necessary, it is a useful page where customers can confirm their selection, quantity, or edit/delete items in their cart. It can then be routed to proceed to checkout once customers are satisfied. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to pass data: * Buttons * Quantity Select * Links ***

#### **Product Detail Page** If a customer selects a product on your Catalog or Collection page, they can be routed to a product detail page. Here they can learn more about the product, select variants, add to cart, or checkout. This page is dynamically built based upon your products in your campaign and ***requires the use of a Catalog or Collection page*** to successfully pass the dynamic product information to the Product Detail page. [Elements](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) available to pass data: * Buttons * Images (add "Product Images" in the route settings) * Variant Selection * Product Description * Links ***

#### **Common Page** The Common Page is used to create a common header, footer, and elements across all pages within a funnel. ***

#### PageNotFound Use the PageNotFound page to customize the “404: Page Not Found Page” error that is displayed if a customer attempts to go directly to a page within the funnel that does not (or no longer) exists. ***

#### **Membership Folder** The Membership Folder contains the pages related to running a Membership. The Membership pages are described in detail below. ***

#### **Login Page** **For Login Flows** - Inside the configuration from the login page to member area pages can be set to dynamically route based on the subscription or membership status. The login page provides several options for the Login button: 1. Login-Active will proceed an Active member to the routed page once the Login button is clicked. The page will check for the if the subscription currently **active**. 2. Login-Inactive will proceed an Inactive member to the routed page once the Login button is clicked. The page will check for the if the subscription currently **paused** or **cancelled**. 3. Login-Automatic will automatically proceed an identified member to the routed page without the customer needing to click the Login button. The page will check for the if the subscription currently **active**. * This can be achieved by passing the customers login information to the login page 4. Login-Card will proceed to selected Update Card page set on the route or the first one found when there is an "action=CARD" parameter in the URL. This route will **ignore** the subscription status. **Order Specific Routing** (The page MUST use **emailAddress** and **orderId** inputs) 1. Login-Cancel will proceed to selected Cancel page set on the route or the first one found when there is an "action=CANCEL" parameter in the URL. The page will check for the if the subscription currently **active**. Can be used to work with one-click cancels. Ex: 2. Login-Pause will proceed to selected Pause page set on the route or the first one found when there is an "action=PAUSE" parameter in the URL. The page will check for the if the subscription currently **active**. Can be used to work with one-click pauses. Ex: 3. Login-Reactivate will proceed to selected Restart page set on the route or the first one found when there is an "action=REACTIVATE" parameter in the URL. The page will check for the if the subscription currently **cancelled**. Can be used to work with one-click reactivates. Ex: ***

#### **Profile Page** The profile page allows your members to modify profile information. ***

#### **Member Area Page** The Member Area Page can be designed to store your membership information and requires authentication from a membership login page. ***

#### **Cancel Membership Page** The Cancel Membership page is a membership area page which allows members to cancel their membership. This page requires authentication from a membership login page. ***

#### **Restart Membership** The Restart Membership page is a membership area page which allows members to restart their membership. ***

#### **Update Card** The update card page allows the member to update their payment method. This page requires authentication from a membership login page. ***

#### **Change Product** The Change Product page allows the member to change their membership product. This page requires authentication from a membership login page. # Connecting Funnel Pages After you create your pages, you will need to connect them and determine which buttons from the page will send the customer to the next page. To connect your funnel pages: * [Step 1: Navigate to the Funnel Visualizer](#connectingfunnelpages-step1-navigatetothefunnelvisualizer) * [Step 2: Highlight the first page](#connectingfunnelpages-step2-highlightthefirstpage) * [Step 3: Click, Hold, and Drag your cursor to the next page](#connectingfunnelpages-step3-click-hold-anddragyourcursortothenextpage) * [Step 4: Edit Arrow Settings](#connectingfunnelpages-step4-editarrowsettings) * [Buttons](#connectingfunnelpages-buttons) * [Dynamic Upsells](#connectingfunnelpages-dynamicupsells) * [Countries](#connectingfunnelpages-countries) * [Step 5: Repeat Steps 1-4 for all of your pages](#connectingfunnelpages-step5-repeatsteps1-4forallofyourpages) * [Step 6: Publish the Funnel](#connectingfunnelpages-step6-publishthefunnel) *** ### Step 1: Navigate to the Funnel Visualizer

### Step 2: Highlight the first page Click on the page you are wanting to connect to another another page. This will highlight the page.

### Step 3: Click, Hold, and Drag your cursor to the next page With the page highlighted - Click, Hold, and Drag your cursor to the next page. This will create a red arrow - indicating that it is added but not configured. Make sure to bring your cursor completely to the next page

### Step 4: Edit Arrow Settings Hover over the arrow and click the settings button. This will open a panel on the right side of the page.

#### Buttons Inside the Buttons/Links field, select **all** of the buttons/links that should progress the customer to the next page. {% hint style="success" %} **For Lead Pages** - This might be all buttons on your page, or it might only be a specific button that will submit a lead form and route the customer to the checkout page. {% endhint %} {% hint style="success" %} **For Checkout Pages** - Make sure your Credit Card submit button and any alternative payment buttons (PayPal, Sezzle, AfterPay, etc) are applied to the arrow going from the Checkout Page to the next page (Upsell or Thank You). {% endhint %} {% hint style="success" %} **For Upsell Flows with Downsells** - Make sure the YES button(s) sends the customer to the next upsell and the NO button(s) sends the customer to the downsell page. From the downsell page, both the YES and NO buttons will route to the next Upsell page, or to the Thank You page. {% endhint %} {% hint style="success" %} **For Upsell Flows to remain on the same page** - Ensure at least one YES button is added in the route settings to send the customer to the next upsell or the Thank You page. You may then choose not to include additional YES buttons in the route settings. Any remaining YES buttons not included in the route settings will still submit the assigned upsell but will reload the current upsell page instead of routing the customer forward. {% endhint %} {% hint style="success" %} **For Upsell Routing based on Declines** - Inside the arrow routing configuration for upsell pages the buttons/links on the page are split up with Approve and Decline options. These are used to route customers to a page depending on whether the transaction from the current page has been approved or declined at the gateway level. Some common uses of this feature: 1. Route customers directly to the Thank You page if the upsell declines (skipping the rest of the upsells/downsells) 2. Route customers to a downsell page if the upsell declines 3. Route upsell declines to the same page as the approval (without this the customer remains on the upsell page that declined and will show the decline reason) *If you don't care to do anything different with the declined upsells, you can choose to only use the Approved options and leave the Decline options unused.* {% endhint %} {% hint style="success" %} **For Login Flows** - Inside the configuration from the login page to member area pages can be set to dynamically route based on the subscription or membership status. The login page provides several options for the Login button: 1. Login-Active will proceed an Active member to the routed page once the Login button is clicked. The page will check for the if the subscription currently **active**. 2. Login-Inactive will proceed an Inactive member to the routed page once the Login button is clicked. The page will check for the if the subscription currently **paused** or **cancelled**. 3. Login-Automatic will automatically proceed an identified member to the routed page without the customer needing to click the Login button. The page will check for the if the subscription currently **active**. * This can be achieved by passing the customers login information to the login page 4. Login-Card will proceed to selected Update Card page set on the route or the first one found when there is an "action=CARD" parameter in the URL. This route will **ignore** the subscription status. **Order Specific Routing** (The page MUST use **emailAddress** and **orderId** inputs) 1. Login-Cancel will proceed to selected Cancel page set on the route or the first one found when there is an "action=CANCEL" parameter in the URL. The page will check for the if the subscription currently **active**. Can be used to work with one-click cancels. Ex: 2. Login-Pause will proceed to selected Pause page set on the route or the first one found when there is an "action=PAUSE" parameter in the URL. The page will check for the if the subscription currently **active**. Can be used to work with one-click pauses. Ex: 3. Login-Reactivate will proceed to selected Restart page set on the route or the first one found when there is an "action=REACTIVATE" parameter in the URL. The page will check for the if the subscription currently **cancelled**. Can be used to work with one-click reactivates. Ex: {% endhint %} #### Dynamic Upsells If the arrow is coming from a Checkout Page or Upsell Page, you can use the Dynamic Upsell options to customize page routing based on the products purchased. Products with variants also allow routing for specific variants. Checkout pages also allow product routing using one or more product tags. Product routing by default requires only 1 product to be in the cart, but you may enable the "Match all selected products" option to route on the arrow only if the consumer has purchased all the selected products. For potential repeat customers, there is also an option to consider previously purchased products. For example, if you offer a membership plan and a repeat consumer already has a membership, then an arrow can have the membership product selected AND have the "Include Product Previously Purchased" option enabled, to route the consumers with a membership to a different upsell page. #### Countries The Countries option can be used to skip upsells for specific countries that might not be allowed to purchase that upsell. For example - If you are selling in Europe but an upsell product cannot be sold to Germany, draw a new arrow to the next page of the funnel, skipping the forbidden upsell. If you set Germany to this new arrow then any orders with a German shipping address will follow this arrow. Once you have configured the arrows or any time a change is made, the arrows will turn blue. This indicates that there are unpublished changes. #### New and Repeat Customers [Follow these instructions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/connecting-funnel-pages/route-an-arrow-for-new-and-repeat-customers) ### Step 5: Repeat Steps 1-4 for all of your pages

### Step 6: Publish the Funnel Once you are complete, be sure to publish the funnel. This will turn any edited pages or arrows green - indicating that they have been published.

{% hint style="warning" %} Although you do have the ability to hardcode URLs to links on your pages, it is not recommended to so do as this will break your page analytics. {% endhint %} {% hint style="danger" %} If a button is not applied to an arrow, an error will display on the page saying: “No page routing found. Please verify this button or link is set properly on an arrow“ {% endhint %} # Route An Arrow For New And Repeat Customers ### Customers can be routed based on whether they are making their first purchase or are repeat customers. By default, the routing is set for all customers, but this can be customized to target "new customers" or "repeat customers." ## Definitions: * ### All Customers: Route all customers, regardless of whether they are new or repeat. * ### New Customers: Customers making their first purchase. * ### Repeat Customers: Customers who have made at least one purchase. ## Setting a Route by Customer Type:

### In the visualizer, follow these steps to set a route based on customer type: 1. Hover Over the Arrow: * After making your selection, ensure to publish the changes to save the routing settings. 2. Hover Over the Arrow: 1. In the visualizer, hover over the arrow you wish to set the route for. 3. Click the Settings Button: * Click the settings button that appears when you hover over the arrow 4. Open the Side Menu: * The side menu will open automatically after clicking the settings button. 5. Select Customer Type: * In the side menu, you will find a dropdown labeled "Customers". * Select either "New Customers Only" or "Repeat Customers Only" based on your needs. 6. Publish Changes: * After making your selection, ensure to publish the changes to save the routing settings. # Edit Funnel Settings To edit the funnel’s settings, open the funnel within Checkout Champ and then click the **gear** button on the top left of the funnel visualizer

**Name**: The internal name used to identify the funnel. **Title**: The title of your page will appear on the browser tab when you are previewing your pages and when your Funnel is published. **Favicon**: You can customize the icon on your Funnel's browser tab by uploading a Favicon. Favicons must be uploaded in .ico format. There are many free available tools which will convert your existing images into .ico files. Once you have loaded specified a Favicon, the visitors to your site will be able to see this on their browser tab. **Logo**: You can place your company logo into this section and it will be applied throughout the funnel, preventing you from needing to upload the logo onto each page. The uploaded logo will replace any image on the page containing the “fk-logo” css class. The majority of our templates contain placeholder logos containing the “fk-logo” class. **Campaign**: Specify which Checkout Champ CRM campaign products will be sold on your funnel. For more details on Checkout Champ CRM Campaign Management, see our help article here: [Campaigns](/crm/crm-setup/campaign-setup)
* [Offers and Upsells](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/offers-and-upsells) * [Collections](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/collections) * [Coupons](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/coupons) * [Tracking Pixels](/) * [Configure Google Analytics](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/configure-google-analytics) * [Gateways](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/gateways) * [Affiliates](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/affiliates) * [Everflow](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/affiliates/everflow) * [Sales Tax Profiles](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/sales-tax-profiles) * [Add Ons](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons) * [PAAY (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/paay-checkout-champ) * [Route Add On](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/route-add-on) * [ShipEngine Add On](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/shipengine-add-on) * [Google Places](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/google-places) * [Fraud Manager with Checkout Champ](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/fraud-manager-with-funnel-builder) * [Facebook Messenger](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/facebook-messenger) * [reCAPTCHA Enterprise](/) * [SMTP Accounts](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/smtp-accounts) * [Fulfillment Houses](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fulfillment-houses) * [Ship Profiles](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/ship-profiles) * [Fonts](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fonts) * [Payments](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments) * [Affirm (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/affirm-checkout-champ) * [Afterpay (CheckoutChamp)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/afterpay-checkoutchamp) * [Amazon Pay (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/amazon-pay-checkout-champ) * [Apple Pay (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/apple-pay-checkout-champ) * [Google Pay (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/google-pay-checkout-champ) * [PayPal Seamless Checkout (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal-seamless-checkout-checkout-champ) * [Klarna (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/klarna-checkout-champ) * [Sezzle (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sezzle-checkout-champ) * [Multi-Pay Rebills (CheckoutChamp)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/multi-pay-rebills-checkoutchamp) * [BitPay (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bitpay-checkout-champ) * [Bancontact (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bancontact-checkout-champ) * [Giropay (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/giropay-checkout-champ) * [iDEAL (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/ideal-checkout-champ) * [SEPA (Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sepa-checkout-champ) * [Boleto(Checkout Champ)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/boleto-checkout-champ) * [SOFORT (CheckoutChamp)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sofort-checkoutchamp) * [P24 (CheckoutChamp)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/p24-checkoutchamp) * [TWINT (CheckoutChamp)](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/twint-checkoutchamp) * [Social Proof](/) * [Maintenance](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/maintenance) # Tracking Pixels Checkout Champ supports a variety of tracking pixels with easy installation {% hint style="danger" %} **Make sure to publish your funnel after adding or editing your pixels.** {% endhint %} Edit the funnel settings and open the Tracking Pixels section:

{% hint style="info" %} Choose how to fire the Purchase event. Purchase events are Javascript events. Choose to fire at the end of order (Thank You page), after Checkout Page (the first Upsell page), or after Checkout and each Upsell page. {% endhint %} You can simply add your GTM, FB Pixel, SnapChat, TikTok, Listrak or AppLovin Pixel IDs into the provided fields. You will find additional information below: * [Google](#trackingpixels-google) * [Google Ads Conversion Tracking](#trackingpixels-googleadsconversiontracking) * [Facebook](#trackingpixels-facebook) * [SnapChat](#trackingpixels-snapchat) * [TikTok](#trackingpixels-tiktok) * [Triple Whale](#trackingpixels-triplewhale) * [Listrak](#trackingpixels-listrak) * [Axon by AppLovin](#trackingpixels-listrak-1) * [Custom Head/Body Tracking Code](#trackingpixels-customhead-bodytrackingcode) * [Place the code directly on the page](#trackingpixels-placethecodedirectlyonthepage) * [Global Scripts](#trackingpixels-globalscripts) *** ### Google If you add the Tracking Id in the left column, you do not need to add the custom tracking code in the right column. Conversely, if you add the custom tracking code, you do not need to add the Tracking Id.
Checkout Champ supports both Google Tag Manager (GTM) and G4. For both the following events are fired: * Page View (by default on every page load) * Purchase (with an option to fire after initial sale or after all upsells or after each upsell), including * order ID * total amount * currency (G4 only) * total tax * total shipping * coupon code (GTM only) * item information
Checkout Champ by default sends only transaction data to Google. If using Tag Manager (GTM) you have an option to also send enhanced conversion data by enabling the "Send User Data" toggle.

The two steps below are for manual implementation and are not necessary when using the "Send User Data" toggle. For manual implementation, follow the 2 steps below (do this even if using only the Tracking Id entry). Step 1: In the Tracking Pixels settings, add the following to the custom head tracking code section. ``` ``` Step 2: Add the following to the custom body tracking code ```javascript ``` ### Google Ads Conversion Tracking For Google Ads conversion tracking, you can add your Google Ad Words conversion snippet to the Thank You page above the \ tag, but after the Google tag. In that snippet, you can specify a “value” in the conversion snippet OR dynamically populate the “value” using information passed in the sessions' “orderData”. **To correctly collect dynamic conversion data, you must parse orderData from sessionStorage using the correct naming conventions.** For example, one way you could modify the conversion snippet would be to include the order’s “totalAmount” and “orderId”. Be sure to use your own Google Ads AW-CONVERSION\_ID/CONVERSION\_LABEL in place of the “AW-XXXXXXX/XXXXXXXXXXXXXX” and customize as needed. ```javascript <script> var orderDataTmp = JSON.parse(sessionStorage.getItem("orderData")); if(orderDataTmp) { var orderValue = orderDataTmp.totalAmount; var transactionId = orderDataTmp.orderId; gtag('event', 'conversion', { 'send_to': 'AW-XXXXXXXX/XXXXXXXXXXXXXXXXXXXX', 'value': orderValue, 'currency': 'USD', 'transaction_id': transactionId } ); } </script> ``` Please read Google’s article on [How to Use the Google Tag for Ads Conversion](https://support.google.com/google-ads/answer/7548399?hl=en) for more information. To learn more about configuring Google Analytics, [see here for more information](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/configure-google-analytics). *** ### Facebook <a href="#trackingpixels-facebook" id="trackingpixels-facebook"></a> For Facebook the following events are fired: * Page View (by default on every page load) * Lead (when a lead page is submitted) * AddToCart (when an item is added to the shopping cart) * CustomizeProduct (when variant details are changed by the consumer) * InitiateCheckout (when a checkout page loads and there is a card number input on the page) * AddPaymentInfo (when a checkout page is submitted with card information) * Purchase (with an option to fire after initial sale or after all upsells) If you wish to fire other FB pixel events, you can use the Custom Head Tracking Code section on the right side of the page. You can optionally fire the Facebook Conversions API. Enter your access token (be sure to whitelist your domain and generate token by a system user to avoid expiration). The Conversions API fires the same events as the pixel. It can be advantageous when the pixel (client-side) is blocked by the consumer’s browser. For various Facebook pixels you would need to get the Jave script code from Facebook and then paste it in the “Custom Head Tracking Code” section on our side. *** ### Sygnal <a href="#sygnal" id="sygnal"></a> For Sygnal the following events are fired: * Page View (by default on every page load) * ViewContent (presell pages) * Lead (when a lead page is submitted) * AddToCart (when an item is added to the shopping cart) * CustomizeProduct (when variant details are changed by the consumer) * InitiateCheckout (when a checkout page loads and there is a card number input on the page) * AddPaymentInfo (when a checkout page is submitted with card information) * Purchase (with an option to fire after initial sale or after all upsells) If you wish to fire other Sygnal pixel events, you can use the Custom Head Tracking Code section on the right side of the page. *** ### SnapChat <a href="#trackingpixels-snapchat" id="trackingpixels-snapchat"></a> For SnapChat the following events are fired once the cardholder’s email address is known: * Page View (all pages) * Purchase (with an option to fire after initial sale or after all upsells) For more information on configuring your SnapChat pixel, please visit the SnapChat resource center, here:\ [SnapChat Business Help](https://businesshelp.snapchat.com/s/topic/0TO0y000000YVdJGAW/snap-pixel?language=en_US) *** ### TikTok <a href="#trackingpixels-tiktok" id="trackingpixels-tiktok"></a> For TikTok the only requirement is that the pixel ID is entered here. Using the pixel ID, TikTok's base tracking code is added to the \<head> of each page. This base code includes the standard "page view" event. All remaining configuration is done at TikTok. Any additional events would require you to use TikTok's custom script to be added in the "Custom Tracking Code" section of your funnel's "Tracking Pixels" section. <details> <summary>If using a Shopify or TikTok pixel</summary> Shopify TikTok pixels do not allow you to edit the events, you will need to add the scripts manually using your Shopify TikTok pixel ID on each page. Example: ```javascript // BASE CODE TEMPLATE: <script> //Part1 !function (w, d, t) { w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i=" https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}; //Part 2 ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.page(); }(window, document, 'ttq'); </script> ``` For more event codes visit [API Documentation (tiktok.com)](https://ads.tiktok.com/gateway/docs/index?identify_key=2b9b4278e47b275f36e7c39a4af4ba067d088e031d5f5fe45d381559ac89ba48\&language=ENGLISH\&doc_id=1701890973258754#item-link-Before%20you%20begin) <img src="/files/npUzEl0kajX8YEazqahH" alt="" data-size="original"> </details> <details> <summary>Multiple TikTok Pixels</summary> CheckoutChamp does not limit the number of pixels you can use at a time. You will however need to add them manually and place the correct events on them. On Part 2 of the code provided by TikTok you will add your pixel id’s. ```javascript // BASE CODE TEMPLATE: <script> //Part1 !function (w, d, t) { w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i=" https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}; On Part 2 you will add your multiple TikTok pixels //Part 2 ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE'); ttq.page(); }(window, document, 'ttq'); </script> ``` For more event codes visit [API Documentation (tiktok.com)](https://ads.tiktok.com/gateway/docs/index?identify_key=2b9b4278e47b275f36e7c39a4af4ba067d088e031d5f5fe45d381559ac89ba48\&language=ENGLISH\&doc_id=1701890973258754#item-link-Before%20you%20begin) <img src="/files/BtkEKTTOdWMXd4zNqhaw" alt="" data-size="original"> </details> **TikTok Event API Access Key** If you want to fire TikTok's Event API then enter your Access token here. This must be entered along with the TikTok Pixel ID. Events fired are the same as noted in the Pixel ID tooltip. *** ### Triple Whale <a href="#trackingpixels-triplewhale" id="trackingpixels-triplewhale"></a> Enable the Triple Whale checkbox to automatically add the Triple Whale script to the funnel. This requires a Shopify plugin attached to the funnel’s campaign. More information is [here](/crm/plugins/data-sources/triple-whale) *** ### Listrak <a href="#trackingpixels-listrak" id="trackingpixels-listrak"></a> For Listrak an email is captured as soon as it is entered on a lead or checkout page. Once that is complete an UpdateCart event is called for any product or price changes. The order is automatically submitted based on the setup option - after initial sale or after all upsells. The following information is sent to Listrak on a purchase: email address, first name, last name, order ID, customer ID, order total amount, shipping total amount, tax total amount, and item information (sku, quantity, price). *** ### Axon by AppLovin Enable Axon and enter the Product Category ID from your Axon account. All Axon events are processed through Google Tag Manager. It is required to enter your GTM id on the [Google Tag Manager](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/tracking-pixels#trackingpixels-google) page. Follow these instructions to enable Axon within GTM <https://developers.applovin.com/en/audience-plus/google-tag-manager> Product Category ID information can be found here\ <https://developers.applovin.com/en/audience-plus/events-and-objects#category-ids> Install the Pixel Helper for testing live pages\ <https://ecomm.applovin.com/p/MkMMcd2CDvebN1/Pixel-Helper-Checklist> *** ### Custom Head/Body Tracking Code <a href="#trackingpixels-customhead-bodytrackingcode" id="trackingpixels-customhead-bodytrackingcode"></a> These sections can be used to place custom tracking scripts on all pages of your funnel. The custom tracking code is meant to be used when not using the standard tracking pixel ID inputs. You should use one or the other. Entering tracking IDs in both places could lead to tracking abnormalities. Any scripts added in this section are added programmatically and will not be seen in the HTML of the pages in the builder. Similarly, the scripts will not be seen if you "view source" on the live page. To see these scripts on the live page, right click to "Inspect" the page and find the script in the \<head> element or view the Network tab to see the network calls. {% hint style="warning" %} Scripts wrapped in a tag cannot be entered here, please use the Global Scripts for these types of scripts or place them directly on the pages. {% endhint %} *** ### Place the code directly on the page <a href="#trackingpixels-placethecodedirectlyonthepage" id="trackingpixels-placethecodedirectlyonthepage"></a> Checkout Champ allows you to directly add code to a page by clicking the Edit button in the page builder. <figure><img src="/files/hHsNIJlMJ6GAscG0TF82" alt=""><figcaption></figcaption></figure> {% embed url="<https://api.media.atlassian.com/file/b9bb7f4b-e087-47d6-aaf6-cc1d20f486d5/artifact/video_1280.mp4/binary/cdn?client=275b7238-9394-4b3c-903b-1514a78b0763&collection=contentId-1859552344&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIyNzViNzIzOC05Mzk0LTRiM2MtOTAzYi0xNTE0YTc4YjA3NjMiLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC0xODU5NTUyMzQ0IjpbInJlYWQiXX0sImV4cCI6MTcyNjg1MjEzMiwibmJmIjoxNzI2ODQ5MjUyfQ.ePDKCrdEty1_OcDKYtvSBLByKVUl9r7Qc3iaYcu4S24>" %} *** ### Global Scripts <a href="#trackingpixels-globalscripts" id="trackingpixels-globalscripts"></a> Scripts can be automatically added to specific funnels that you determine. For more information, please view our Global Scripts section of the [CheckoutChamp Account Settings](/funnel-builder/account-settings) article. # Server-side Google Tag Manager Coming Soon! {% embed url="<https://developers.google.com/tag-platform/tag-manager/server-side>" %} {% hint style="info" %} Server-Side e Google Tracking is well-documented at Google. This guide summarizes the steps. It is advised to review the Google documentation for the most accurate and up-to-date instructions. {% endhint %} 1. [**Create a Server-Side Container**](https://developers.google.com/tag-platform/tag-manager/server-side/overview#create_a_tag_manager_server_container) * Log in to your [Google Tag Manager](https://tagmanager.google.com/) * Click **"Create Container"** → Select **"Server"** as the target platform * Name the container and finish creation 2. **Provision a Tagging Server** 1. **Automatic (Recommended)** * Use the GTM UI to [set up on **Google Cloud Run**](https://developers.google.com/tag-platform/tag-manager/server-side/cloud-run-setup-guide?provisioning=manual) automatically 2. **Manual (Advanced)** * Deploy the server container manually using Docker (on [GCP](https://developers.google.com/tag-platform/tag-manager/server-side/app-engine-setup), [Manual](https://developers.google.com/tag-platform/tag-manager/server-side/manual-setup-guide) (AWS, or another host)) * Example Docker image:\ `gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable` 3. [**Configure a Custom Domain**](https://developers.google.com/tag-platform/tag-manager/server-side/custom-domain?option=same-origin) **(Recommended) \[optional]**\ When you first set up a tagging server, it is hosted on a domain provided by the cloud provider. When you use the default endpoint, it delivers data to the server container, but runs in a third-party context. To unlock the benefits of a [first-party context](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies#tracking_and_privacy), such as more durable cookies, your tagging server and your website have to run on the same domain. * Use a subdomain like `metrics.yourfunneldomain.com` * Update your **DNS records** to point to your tagging server * In GTM:\ **Admin > Container Settings > Add URL** → Add the custom domain 4. **Add Server-Side Tags** * Recommended: * [**Conversion Linker**](https://developers.google.com/tag-platform/tag-manager/server-side/ads-setup#step_1_set_up_the_conversion_linker_tag) (All Pages) * [**Google Ads Conversion Tracking**](https://developers.google.com/tag-platform/tag-manager/server-side/ads-setup#step_1_set_up_the_conversion_linker_tag) tag * Input your **Conversion ID and Label** from Google Ads * Trigger on appropriate events (e.g., "purchase", "sign\_up") 5. [**Set Up Clients**](https://developers.google.com/tag-platform/tag-manager/server-side/dependency-serving?tag=gtm) **in the Server Container** * The **GA4 client** is pre-installed to handle GA4 events * If you're using a **GTM Web Container**, add a "GTM Web Container" client and enter your container ID * Go to [AnalyticsMania](https://www.analyticsmania.com/post/introduction-to-google-tag-manager-server-side-tagging/), to get an in-depth tutorial 6. **Validate and Test** * Use **Tag Assistant** to preview and test your server container * Confirm tags are firing correctly * Check for any errors in the console 7. **Go Live** * Publish the server container * Remove any **duplicate tracking tags** from your web container to avoid duplication 8. **Configure CheckoutChamp** 1. Go to the funnel > Settings > Tracking Pixels 1. add the custom domain from Step 3, if configured 2. otherwise, add the GTM generated server URL * Default URL format using Cloud Run: `https://[GOOGLE_CLOUD_PLATFORM_PROJECT_ID]-[GOOGLE_CLOUD_REGION_ID].a.run.app` 2. Save 3. Publish the funnel <figure><img src="/files/bhoQeaTZM2orGPsm7TB8" alt="" width="563"><figcaption></figcaption></figure> # Offers and Upsells You can create offers and upsells for your funnel either within your Funnel or within the campaign on the [CRM side](/crm/crm-setup/campaign-setup/adding-a-product-to-a-campaign). To add or edit products in Checkout Champ, navigate to your funnel and open the settings for the funnel. <figure><img src="/files/ySLI1F1seKCzT6LPE3w2" alt=""><figcaption></figcaption></figure> After opening either option you will see all of the offers added to the funnel/campaign. You can click the pencil button to edit an offer/upsell or you can add new offers/upsells by using the “Add Existing Product” or “Add New Product” buttons. <figure><img src="/files/OFUfBRQe7vOZ1xG4y91G" alt=""><figcaption></figcaption></figure> Add Existing Product - This will allow you to configure an offer for a base product that you already have added to your Checkout Champ account. <figure><img src="/files/QG0cv5qk5laI4OQyBepv" alt=""><figcaption></figcaption></figure> Add New Product - This will allow you to add a brand new product to your Checkout Champ account and apply a billing schedule to this product as an offer <figure><img src="/files/b7DOm8rf8MqwLBChFZRD" alt=""><figcaption></figcaption></figure> * Product Name - Identifying name of your product * Client ID - Only required for a few plugins * Product Description - Description of the product being sold * Show to Affiliates? - Will show upsell stats to affiliates if checked (**Upsells only**) * Use Offer Mid - Will force upsell to always use the same mid as the main offer (**Upsells only**) * Fulfillment House - Sets the fulfillment house/software which will ship this product to the customer * Qty Per Order - Can be used for offers with quantity variants. If set to 3 for example, the CRM will send SKUx3 * Fulfillment Delay - Hold the offer for an additional length of time to satisfy same day cancellations * Product SKU - The SKU assigned to the product within your fulfillment house/software * Product Cost - Cost of the product to you, the merchant (used for expense reporting) * Shipping Cost - Cost for you to ship the product (used for expense reporting) * Merchant Account - Sets the merchant account that this offer will bill against * Weight - Internal value to store weight. Will send to fulfillment * Qty Available - Sets an available quantity to the product and will reflect on Fulfillment→Inventory Report as the products are being purchased. (See [Inventory Report](/crm/fulfillment-section/fulfillment-inventory)) * Billing Type - Sets the offer to be a one-time billing or a recurring billing offer * One Time - Customer will be billed at the time of purchase and will not bill again * Recurring - Customer will be billed at the time of purchase and will bill again at a later date * (See [Common Offer Setups](/crm/crm-setup/campaign-setup/adding-a-product-to-a-campaign/common-offer-setups) here) # Collections If you are building out your storefront inside of the CheckoutChamp funnel builder, you might find it easier to automatically populate the catalog pages with the appropriate products instead of having to manually set each product box to the appropriate items. This can be accomplished within the funnel builder by using the Collections feature. * [Create Collection](#collections-createcollection) * [Add Common Header to pages in the funnel](#collections-addcommonheadertopagesinthefunnel) * [Add “Product Row” Element to Catalog pages](#collections-add-productrow-elementtocatalogpages) * [Apply Multi Collection to Collection pages](#apply-multi-collection-to-collection-pages) * [Sort Order](#collections-sortorder) * [Create Menus in Common Page settings](#collections-createmenusincommonpagesettings) * [Apply Collection Menus to Funnel Pages](#collections-applycollectionmenustofunnelpages) * [Create Product Detail Page](#collections-createproductdetailpage) * [Finish the rest of the funnel](#collections-finishtherestofthefunnel) * [Additional notes for finishing the funnel](#additional-notes-for-finishing-the-funnel): *** ### Create Collection <a href="#collections-createcollection" id="collections-createcollection"></a> Inside [app.checkoutchamp.com](http://app.checkoutchamp.com), edit to the funnel that you would like to add collections to. Next, edit the funnel’s settings and click on Collections in the settings panel. <figure><img src="/files/JMGLbAHrXXf7KXFcoiXq" alt=""><figcaption></figcaption></figure> Inside the Collections page, create as many collections as you need by clicking the Add Collection button Next, inside the “Create New Collection” screen, add a Title for the collection, a description, and then choose if the collection type should be Manual or Automatic. **Manual** - Use the Product search bar to add the individual products into the collection. {% hint style="info" %} **Automatic** - Use conditions to automatically add existing and future products to the collect who fit within the conditions.\ \ If using Automatic, choose if the products that should be added to the collection should match ALL conditions or just ANY of the conditions.\ \ Field : Product Name, Product Tag, Price, Compare at Price, Weight, Variant Title\ \ Condition : Is Equal To, Is Not Equal To, Starts With, Ends With, Contains, Does Not Contain\ \ ![](/files/dQUKWw0gdQE6jDdaKy6v)Value : Enter in the value in which the condition should select the products. {% endhint %} After you add products to the Collection, you will see them listed in the Products section on the right side of the window. Here is an example using the Automatic Collection Type with the conditions requiring that the products in the collection must be tagged with the “mens” tag. Due to the conditions, the products tagged as “mens” automatically loaded into the Products section. Once you are complete with the collection settings, click “Save & Continue” to save and close the window so you can make any other additional collections that you might need. *** ### Add Common Header to pages in the funnel <a href="#collections-addcommonheadertopagesinthefunnel" id="collections-addcommonheadertopagesinthefunnel"></a> Please follow [this document](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to learn how to create a Common page inside the funnel and to create a Common Header which will be present across all the funnel pages that you decide. *** ### Add “Product Row” Element to Catalog pages <a href="#collections-add-productrow-elementtocatalogpages" id="collections-add-productrow-elementtocatalogpages"></a> Add a Catalog Page to your funnel and edit the page to remove any existing boxes that would contain your different products. A separate Catalog Page should be created any time a Collection/Catalog has a unique design.\ \ Next, replace each of those deleted boxes with the “Product Row” element. This is found under the Products section of the building blocks. <figure><img src="/files/4DejM2bX3cgcJOMbiESp" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Once you drag this onto the page, you will see a single product box surrounded by a larger “Product Row” element.\ \ All of the products on the page will use the same styling as the box displayed here. Feel free to adjust the font, font size, font color, and any dimensional changes.\ \ You can also add an Add To Cart button into the product box (make sure the button action is set to Add To Cart). {% endhint %} Click on the empty space of that Product Row element to choose how many columns should populate in each row, and also if the images should Lazy Load (only load images once the user scrolls and reveals the images) <figure><img src="/files/LKToU9plXCJcpfrB9ZLo" alt=""><figcaption></figcaption></figure> *** ### Apply Multi Collection to Collection pages This premade element can be dragged on the collection page to host multiple collections where each collection is hosted in multiple tabs. Pagination, lazy loading, sorting and search are supported for the multi collection element. {% hint style="info" %} Collections do not need to be assigned to collection pages that contain a multi collection element {% endhint %} <figure><img src="/files/y8xxMFqH4qYCjfNf0kWL" alt=""><figcaption></figcaption></figure> To add collections, select the multi collection element and open the settings. In the settings there is a dropdown where collections may be added. If there aren't any collections shown in the dropdown, verify that there are collections made in the funnel settings. <figure><img src="/files/8CPP5IbJZ6YOdSRQn9vw" alt=""><figcaption></figcaption></figure> With each collection selected a new tab and a new product section will be added. Each of the product sections and tabs can be styled and changed individually. Remove collection tabs from the element by clicking the 'x' on the right side of the collection name. You do not need to delete the tabs and product section manually. {% hint style="warning" %} The product sections do not need to be set to hidden. The element will only show one collection tab at a time. {% endhint %} *** ### Sort Order <a href="#collections-sortorder" id="collections-sortorder"></a> In some cases, especially with larger stores, you may want to give your customers the option to sort the products displayed. This feature is built into the builder’s options. <figure><img src="/files/oPIEBgPO0Thlqr7lv0we" alt=""><figcaption></figcaption></figure> To add this feature, add a new select to the page to your page above the Product Row. <figure><img src="/files/q79utXUqgLP6sygqDisX" alt=""><figcaption></figcaption></figure> In the select’s settings, choose the Name “Sort Order”. The sorting options will be automatically applied, so no need to set any of the options. Save the page. The sorting options will be available when the funnel is published. <figure><img src="/files/PvbedL4qanYMm3mLwrDk" alt=""><figcaption></figcaption></figure> ### Create Menus in Common Page settings <a href="#collections-createmenusincommonpagesettings" id="collections-createmenusincommonpagesettings"></a> On the funnel visualizer, click on your Common Page and then click the settings gear, and then click Main Menu. <figure><img src="/files/MWdSM1KXfvFDfqLkHuYw" alt=""><figcaption></figcaption></figure> This will open a panel called “Main Menu Navigation”. On this panel, click “Add Menu Item” to begin creating your menu. <figure><img src="/files/WRS2Cbs2ovMWUov79or8" alt=""><figcaption></figcaption></figure> On the side panel that displays, create a name for the menu option (your customers will see this), choose how the menu should link (choose collection) & the collection that should should display, and also the page that the customers will land on after clicking the menu option. This example below uses the Men’s collection from earlier in this document and routes the customers to the Men’s Catalog Page. <figure><img src="/files/3fKdoXA15uxXb7E2CHjr" alt=""><figcaption></figcaption></figure> You can create as many menu options as needed. You can reorder the Menu options by clicking and holding the three horizontal lines next to the Menu Title and dragging it to the desired location. Additionally you can also nest menu options under a parent menu option by dragging the menu to the right.\ \ Here is an example of nested menu options under the Men’s and Women’s Collection: <figure><img src="/files/SONmCbwaWzvMNP2o0MwX" alt=""><figcaption></figcaption></figure> Once you are complete, click the “Save & Return To Funnel” button. *** ### Apply Collection Menus to Funnel Pages <a href="#collections-applycollectionmenustofunnelpages" id="collections-applycollectionmenustofunnelpages"></a> At this point you have now created your Collections, adjusted your funnel pages to use Collections, and created your Navigation Menu options. The next step is to edit and save your Common Page, even if all edits are complete. Saving the Common Page will apply the Common Header (and Common Footer) to all of the pages in the funnel which contain a header with the cartCommonHeader Id.\ \ Once the funnel builder saves the Common Page, go back to the funnel visualizer and Publish the funnel. {% hint style="info" %} Any time you edit or add another page to the funnel with cartCommonHeader or cartCommonFooter, you must go back into the Common Page to save.\ \ Any time you save the Common Page, you must publish for those changes to take effect on the live site. {% endhint %} *** ### Create Product Detail Page <a href="#collections-createproductdetailpage" id="collections-createproductdetailpage"></a> Typically a Catalog page will display all the available products, and the customer can click on a product to view a Product Detail page for this specific product before adding it to the cart - especially if there variants on the offers. This Product Detail page is dynamic and has the same layout for all products.\ \ To accomplish this, drag a Product Detail page to the funnel, select a template, and make any design changes that you would like.\ \ Once you are complete, draw an arrow from each Catalog Page to the Product Detail page, and apply the Product Images option to the arrow(s). <figure><img src="/files/hvPdwvtU0jG1mKgB9HoV" alt=""><figcaption></figcaption></figure> *** ### Finish the rest of the funnel <a href="#collections-finishtherestofthefunnel" id="collections-finishtherestofthefunnel"></a> Beyond your Catalog page(s), Common Page and Product Detail Page, you will also need to add a Shopping Cart page, a Checkout Page and a Thank You page. You can also add as many upsells as you see fit. #### **Additional notes for finishing the funnel:** Be sure to add buttons/link to navigate around the funnel, and use the arrow routings to determine which buttons/links will send the customers to which page. Examples) * Your Shopping Cart page might have a “Continue Shopping” button which will redirect the customer back to a Catalog page. * Your Checkout Page might have a “Back to Cart” button which will redirect the customer back to the Shopping Cart page. * Your Shopping Cart page has an edit button, which will redirect the customer back to the Product Detail page for the appropriate product. The Product Detail page can route customers to a Shopping Cart page, or directly to the Checkout Page. After you add a Shopping Cart page and a Checkout Page; use the arrow routings to set the View Cart button to redirect to the Shopping Cart page, and set the Buy Now buttons to redirect to the Checkout Page. You can also add Buy Now buttons to your Catalog pages and route them to your Checkout Page using the arrow routings. # Coupons You can create coupons for your funnel either within your Funnel or within the campaign on the CRM side.\ \ To add a coupon from Checkout Champ, navigate to your funnel list, open the funnel, and then open edit the funnel’s settings. <figure><img src="/files/K6wEW0js535SEwC6sy5t" alt=""><figcaption></figcaption></figure> Use the coupon module to create a coupon for use within this campaign.\ \ To route to Checkout Champ with automatic coupon application, include the couponCode parameter in the URL. Coupons can be passed with or without products. Coupons must first be entered on the funnel campaign to be recognized. It is not required to pass couponCode to a checkout page. couponCode can also be passed to any page prior to checkout, and will be maintained until the cardholder completes checkout. Examples: <https://checkout.myfunnelsite.com/checkout?products=234:1&couponCode=HALFOFF> <https://checkout.myfunnelsite.com/checkout?couponCode=10OFF> For multiple coupons separate with a comma. <https://checkout.myfunnelsite.com/checkout?couponCode=10OFF,HALFOFF> {% hint style="warning" %} **Publish Required**\ Publish corresponding funnels when a **Default Coupon** is applied to a **campaign** or changed. {% endhint %} # Configure Google Analytics {% hint style="info" %} Google has made users aware of the coming end to Universal Analytics for some time, but the date is fast approaching. As of July 1, 2023, Google's Universal Analytics will stop processing data. It is imperative users migrate to Google Analytics 4 prior to July 1, 2023 as Universal Analytics will stop processing. This is a change in how your Google Analytics operates and changes your Google Analytics ID. Please follow Google's instructions on how to successfully transition to GA4, here: {% endhint %} [Make the switch to Google Analytics 4](https://support.google.com/analytics/answer/10759417?sjid=5195701527558849427-NA) Step 1. Sign in to Google, using a gmail account. Navigate to <https://analytics.google.com/> Step 2. Sign up for Google Analytics by clicking the button on the screen. <figure><img src="/files/WyGQkSRQr8VnFHButYZI" alt=""><figcaption></figcaption></figure> Step 3. Create a new account by filling in all the fields. Click "Get Tracking ID" and then accept the Terms of Service. <figure><img src="/files/226KHYliP14dDbZKp4dv" alt=""><figcaption></figcaption></figure> Step 4. Copy the Tracking ID <figure><img src="/files/S7SiieYM8yHUd7CAfvPr" alt=""><figcaption></figcaption></figure> Step 5. Follow steps here to place the Tracking ID on your site -Click edit on the campaign you are configuring. <figure><img src="/files/O4zmzztLyuZzSbR79V3W" alt=""><figcaption></figcaption></figure> Step 6. Consider handling duplicate conversions in Google Analytics. Setup a tag with transaction\_id. <figure><img src="/files/Q0jnkQWXxoJTf0cgTR4U" alt=""><figcaption></figcaption></figure> Step 7. Consider handling duplicate conversions in Google Ads <figure><img src="/files/kpQxiXWStm05VbuLGE2z" alt=""><figcaption></figcaption></figure> NOTE: Some properties will take up to 2 hours before the Real-Time section can be used. # Gateways Add the Gateways you will use on your Funnel. Once Gateways are configured in Checkout Champ CRM they can be added to your Funnel. You can find more details on configuring your Gateways in Checkout Champ CRM here: [Merchant Set Up](/crm/gateway-setup) <figure><img src="/files/ccjwYglgkORepUp7cuDo" alt=""><figcaption></figcaption></figure> You can search for a specific Gateway Account by typing in the search bar as shown above: # Affiliates You can add/remove affiliates from your Checkout Champ funnels by Editing the funnel’s settings and opening the Affiliates section <figure><img src="/files/R6399hfW1VZLTmAQGgmT" alt=""><figcaption></figcaption></figure> When adding or editing an affiliate, you have the option to adjust the Affiliate Title, AffiliateId, Passed Value, and Commissions <figure><img src="/files/lnkJV3dpcwACPTGsOWkR" alt=""><figcaption></figcaption></figure> Please see our [Tracking String article](/crm/crm-setup/affiliate-setup/affiliate-tracking-link-string) for more information on Passed Values To place pixels for your affiliate’s, please view our [Tracking Pixels article](/crm/crm-setup/affiliate-setup/affiliate-pixels) # Everflow Everflow and Checkout Champ work nicely together in a just a few easy steps. There are generally 2 types of Everflow integrations - a direct tracking string to your page OR a dynamic assignment on the page. #### **Direct** <a href="#everflow-direct" id="everflow-direct"></a> Follow these [instructions](https://help.checkoutchamp.com/checkoutchamp-help-desk/plugins/affiliate-systems/everflow-integration). There is no additional work needed on your pages. #### **Assign Transaction ID on the page** <a href="#everflow-assigntransactionidonthepage" id="everflow-assigntransactionidonthepage"></a> Step 1: Dynamically assign the Transaction ID on your page Edit the first page(s) of your funnel. A first page is any page that you will route traffic to from an outside source. Go to the code editor <figure><img src="/files/HawUhTo8X5UVst4PE0dv" alt=""><figcaption></figcaption></figure> Add the below script in the Head section of HTML. * At the top of the script, replace “YOUR-TRACKING-DOMAIN” with your Everflow tracking domain. * At the bottom of the script, replace “YOUR-AFFILIATE-ID” with your CRM affiliateId. If you are passing affId as a parameter to the page, then please remove this line. It is only necessary if affId is not passed to the page. * If you want to learn more about the Everflow SDK, see [here](https://developers.everflow.io/docs/everflow-sdk/). * If affid gets translated to “cc\_custom\_affid” in lines of code below, change line 23’s affiliate value to “cc\_custom\_affid” (excluding quotations) ```javascript <script type="text/javascript" src="https://www.YOUR-TRACKING-DOMAIN.com/scripts/sdk/everflow.js"></script> <script type="text/javascript"> function updateURLParameter(url, param, paramVal){ var newAdditionalURL = ""; var tempArray = url.split("?"); var baseURL = tempArray[0]; var additionalURL = tempArray[1]; var temp = ""; if (additionalURL) { tempArray = additionalURL.split("&"); for (var i=0; i<tempArray.length; i++){ if(tempArray[i].split('=')[0] != param){ newAdditionalURL += temp + tempArray[i]; temp = "&"; } } } var rows_txt = temp + "" + param + "=" + paramVal; return baseURL + "?" + newAdditionalURL + rows_txt; } EF.click({ offer_id: EF.urlParameter('oid'), affiliate_id: EF.urlParameter('affid'), sub1: EF.urlParameter('sub1'), sub2: EF.urlParameter('sub2'), sub3: EF.urlParameter('sub3'), sub4: EF.urlParameter('sub4'), sub5: EF.urlParameter('sub5'), uid: EF.urlParameter('uid'), source_id: EF.urlParameter('source_id'), transaction_id: EF.urlParameter('_ef_transaction_id'), } ).then(function(transactionId){ window.history.replaceState('', '', updateURLParameter(window.location.href, "c1", transactionId)); window.history.replaceState('', '', updateURLParameter(window.location.href, "affId", "YOUR-AFFILIATE-ID")); } ); </script> ``` Step 2: Setup the Postback URL. Follow the “Setting up your Postback URL in CheckoutChamp” steps [here](https://konnektive.atlassian.net/wiki/spaces/CC/pages/2098037680/Everflow+Integration#Setting-up-your-Postback-URL-in-Checkout-Champ). If you are using a direct API integration instead of Checkout Champ, place the script on the page as in Step 1 and then call the Import Click API to save the affiliate values. # Sales Tax Profiles To charge tax on a funnel/campaign, go to the funnel Settings and open the Tax Profiles section. <figure><img src="/files/MzV4xRurdiAnHEsnpqcl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/z4lUKLrvdWTD6ScwiJDF" alt=""><figcaption></figcaption></figure> Specify the **Country**, **State** (optional), and **Tax Rate**. **Include Tax in Final Price** = Include tax in the product prices displayed to customers (such as a VAT). Do not include tax in the campaign product prices. Tax will be automatically added to the prices displayed on live pages. **Exclude Rebills** = Do not charge tax on rebills Customers from that region will be charged the tax amount # Add Ons * [PAAY (Checkout Champ)](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/paay-add-on) * [Route Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/insureship-add-on) * [ShipEngine Add On](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/shipengine-add-on) * [Google Places](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/google-places) * [Fraud Manager with Checkout Champ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/fraud-manager-add-on) * [Facebook Messenger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/facebook-messenger) * [reCAPTCHA Enterprise](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/add-ons/recaptcha-enterprise) Checkout Champ has integrations with several add on services that you can connect to your funnel. You can find the Add Ons section by editing the funnel’s settings and clicking Add Ons. <figure><img src="/files/k9Q8M4tuTNPe5V8dbZcf" alt=""><figcaption></figcaption></figure> # PAAY Add On Enable PAAY on any Checkout Champ funnel <figure><img src="/files/vinjYwmJ9r33kfLHrWpL" alt="" width="290"><figcaption></figcaption></figure> ### Step 1: Activate the PAAY Plugin to acquire PAAY key <a href="#paay-checkoutchamp-step1-activatepaayplugintoacquirepaaykey" id="paay-checkoutchamp-step1-activatepaayplugintoacquirepaaykey"></a> Follow instructions in [this article](/crm/plugins/authentication/paay) ### Step 2: Add PAAY to a funnel <a href="#paay-checkoutchamp-step2-navigatetofunnelwithincheckoutchampandeditthefunnelssettings" id="paay-checkoutchamp-step2-navigatetofunnelwithincheckoutchampandeditthefunnelssettings"></a> Edit the funnel on which to enable PAAY. Go to Settings > Add Ons > PAAY 3DS <figure><img src="/files/py0BGPlRzqO6B46cwteW" alt="" width="563"><figcaption></figcaption></figure> ### Step 3: Configuration <a href="#paay-checkoutchamp-step3-enterpaayapikey-acquiredfrompaayplugininstep1" id="paay-checkoutchamp-step3-enterpaayapikey-acquiredfrompaayplugininstep1"></a> **Use server-side authentication -** NEW! Secure your API Key and take advantage of fraud-protection rate limits. This option moves much of the authentication to the Checkout Champ servers. All of the options in this article are available. 1. Enabled - **Choose the PAAY plugin** - Select the plugin from Step 1 2. Disabled - **API Key (3DS)** - Enter the key obtained in Step 1 **Page Option** - Choose to authenticate Offers, Upsells, or both Offers and Upsells **Minimum Amount** - Optional. Set the minimum amount on which to authenticate with PAAY. This is entered in the campaign currency. Any orders below this amount will be skipped. **Show Challenges** - Choose No Challenge, Challenge if Required, or Force Challenge. If Force Challenge is chosen then there is also an option to enter a minimum amount to force the challenge. Orders below the minimum amount will present a challenge only if required by the issuing bank. **Merchant Name** - Optional. Enter a value to be passed on authentication. Discuss this with PAAY as it may require enablement on your PAAY account. **Requestor Name** - Optional. Enter a value to be passed on authentication. Discuss this with PAAY as it may require enablement on your PAAY account. **Data Share BINs** - Optional. Enter one or more card bins on which to authenticate with Data Only, separated by commas. To use Data Only on an entire card brand, enter "visa" or "mastercard" (without the quotes). Here is an example: **555555,520082,visa**. Data Only is priced the same as 3DS authentication. Data Only can be differentiated from 3DS on CRM reporting filters. <details> <summary>Data Only</summary> "Data Only" is the term used to describe a transaction flow in which a merchant shares only the data of a transaction with the Issuer through the 3DS rail, without presenting a challenge to the cardholder. This can be influenced by the level of challenges requested by an Issuer and has the following characteristics: * Always frictionless. The Issuer cannot enforce a challenge for the cardholder in a Data Only transaction. * There is no liability shift, meaning the merchant remains responsible for potential fraud in this case, not the issuer. * Depending on the risk of the transaction (e.g., isolated lower-value transactions) or for issuers with a low level of frictionless or technical issues in the authentication process, higher approval rates can be achieved. More information aids in decision-making. For more details on the official documentation, please review the card networks [Mastercard](https://www.mastercard.com/content/dam/public/mastercardcom/globalrisk/pdf/Data-Only-Infographic.pdf) and [VISA](https://secure.visaonline.com/home) (enter "visa secure documentation"). </details> **Fetch Rebill Parameters** - Obtain a set of authentication parameters the first rebill on recurring products (both offers and upsells) **Reject non-authenticate cards** - Do not allow checkout if card is not authenticated **Authenticated Card Types** - Choose the card types to authenticate ### Step 4: Publish <a href="#paay-checkoutchamp-step4-enterthepageeditorforapage-save-andthenpublishthefunnel" id="paay-checkoutchamp-step4-enterthepageeditorforapage-save-andthenpublishthefunnel"></a> ### Step 5: Rate Limiting If using server-side authentication, take advantage of rate limits to reduce exposure to bot attacks on the checkout page. You have control of the rate limits. Login to CRM Click your username in the top right corner Select Account Select Fraud Protection tab Enter the desired PAAY non-authentication limit for a single campaign. If a campaign reaches this limit then all traffic for that campaign will be blocked until the fraudulent activity is reduced below the entered limit. [Fraud Protection](/crm/crm-account-settings/fraud-protection) # InsureShip Add On We offer the option to add insurance to your checkout cart, providing additional protection and peace of mind to your customers while simultaneously increasing your profitability during checkout {% hint style="info" %} This article operates in conjunction with the [InsureShip Plugin](/crm/plugins/shipping-insurance/insureship). That article provides detailed information on billing and claims. {% endhint %} {% hint style="info" %} Learn more about InsureShip at [https://www.insureship.com](https://www.insureship.com/) {% endhint %} ### Setup Edit any funnel Go to **Settings > Add Ons > InsureShip** <figure><img src="/files/JWKzsRiKY5aX9vRavtFf" alt="" width="563"><figcaption></figcaption></figure> Enable the Add On <figure><img src="/files/TqBxQyXHuuj4hxNuSrrW" alt="" width="563"><figcaption></figcaption></figure> **Opt In** - by default the shipping insurance widget is enabled (opt-out). Choose this option make the widget disabled by default and require an opt-in from the customer. **Insure Rebills** - automatically add InsureShip to each scheduled rebill. There is no option to manually add InsureShip to rebills. It must be automatic. **Widget Placement** * Above checkout button - place the widget above the first checkout button found on the page * Below shopping cart total - place the widget just below the grandTotal element in the shopping cart * Custom - review the instructions on the page. This requires coding an element and custom class onto the checkout page. It provides ultimate flexibility. **Rate Per Transaction** - the rate paid on your CheckoutChamp monthly subscription per shipment. You will be charge only for orders shipped. Orders cancelled prior to shipment are not billable. Save Publish the funnel ### Additional Setup Enabling InsureShip automatically creates a campaign product. Go to **Settings > Offers** to manage the product. The default price to your customers is 3.00 (in the campaign currency). Adjust product name, price, and other details as needed. ### Checkout Pages The InsureShip widget is automatically placed on checkout pages according to the **Widget Placement** setting. The widget displays only when there are shippable products in the cart. The price is dynamic from the InsureShip campaign product. There are no edits needed on the page, unless using the Custom option for Widget Placement. <figure><img src="/files/CST6LtTXzkxYNKWwdSp8" alt="" width="563"><figcaption></figcaption></figure> # ShipEngine Add On Step 1: Go [here ](/crm/plugins/data-sources/shipengine)to enable the ShipEngine Plugin **Add ShipEngine to a Funnel** Step 2: Go to Funnel Add Ons in funnel settings. Enable the ShipEngine checkbox. Press Save & Continue. <figure><img src="/files/0MfaCc6IMKAhjRvAGCZN" alt=""><figcaption></figcaption></figure> Step 3: Edit the checkout page. If there is not already a Ship Profile element on the page, go to Forms and select the Ship Profile element. Drag it to the page and style as needed. Verify the element has Name = Ship Profile. Save the page. Exit the page builder. <figure><img src="/files/e9TFU8VVztVE6VdS5Mz6" alt=""><figcaption></figcaption></figure> Step 4: Publish the funnel Step 5: Go to the live checkout page. A Ship-To address is required to retrieve shipping rates from ShipEngine. If you have gathered that information on a previous lead or checkout page, then the Ship Profile element should be populated with the available Ship Engine rates. If Ship-To address information is on the same page as the Ship Profile element, the Ship Engine rates will not populate until that address information is entered. When a full (and valid) Ship-To address is entered, a request will be sent to ShipEngine to get the rates. That can take a few seconds. The Ship Profile element will be populated with the available Ship Engine rates. Rates will be fetched anew from ShipEngine if the products or quantities or address change. Step 6: The selected rate is included in the final order amount. The selected carrier and method are automatically passed to fulfillment when the order is submitted for checkout. **Troubleshooting** * If the ship rates are not retrieved from ShipEngine, verify the following items: * ShipEngine plugin credentials are correct * Ship-To address information is entered at checkout. This can be on a lead or checkout page prior to the page on which Shipping is selected. * The selected products must have a weight. ShipEngine will not return shipping rates without a weight. * The selection element must have Name = Ship Profile. Verify this in the page builder. * ShipEngine requires that Ship-To information is entered on the checkout page or a page prior to checkout. It will not work with a checkout where the Ship To address is retrieved from another source, such as PayPal. # Google Places Google Places can be added to your funnel to offer address suggestions to the customer as they begin to enter their address into the form. The address will then autocomplete/autofill if the customer clicks on one of the suggested addresses.\ \ To add this to your funnel, edit the funnel’s settings and open the Add Ons section. <figure><img src="/files/Ll00LR9jyhqrL6hONt9s" alt=""><figcaption></figcaption></figure> Enter the API Key provided by Google and then Save and Publish your funnel. # Fraud Manager Add On {% hint style="info" %} When Fraud Manager is added to your account and assigned to a funnel's campaign, the Device Data Collector pixel is automatically added to the funnel checkout page. This pixel sends device information to Fraud Manager/Kount for improved screening. {% endhint %} *** ### Step 1 - Enable the plugin <a href="#fraudmanagerwithcheckoutchamp-step1-enabletheplugin" id="fraudmanagerwithcheckoutchamp-step1-enabletheplugin"></a> Go to the CRM side of your account and navigate to Admin → Plugins → Fraud Services <figure><img src="/files/mxAHYdqdaIbc4tmKebV8" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Fraud Manager has a cost of $0.10 per screening. The screening only occurs on the initial sale for the customer. Any upsells or rebills will not be screened again since the customer already passed screening on the initial sale. {% endhint %} ### Step 2 - Add Fraud Manager to the campaign <a href="#fraudmanagerwithcheckoutchamp-step2-addfraudmanagertothecampaign" id="fraudmanagerwithcheckoutchamp-step2-addfraudmanagertothecampaign"></a> Adding the plugin will apply Fraud Manager to all your current campaigns. If you create a campaign after adding the plugin you can navigate to CRM → Campaigns and edit the campaign your funnel is tied to and enable the “Screen with Fraud Manager?” option. The default Fraud Manager rules will always be applied to the campaigns/funnels but you can [create your own rules](https://help.checkoutchamp.com/crm/plugins/fraud-services/fraud-manager#fraudmanager-creatingrulesets) to apply to the campaign as well. <figure><img src="/files/Jd8UbYExjojmWO6FJvkX" alt=""><figcaption></figcaption></figure> If you are unsure of the campaign the funnel is tied to, you can locate this inside the settings of the funnel within Checkout Champ ### Step 3 - Go to Checkout Champ and edit the funnel tied to the campaign <a href="#fraudmanagerwithcheckoutchamp-step3-gotocheckoutchampandeditthefunneltiedtothecampaign" id="fraudmanagerwithcheckoutchamp-step3-gotocheckoutchampandeditthefunneltiedtothecampaign"></a> <figure><img src="/files/9PHWjUw3iPr4NbVqrgP6" alt=""><figcaption></figcaption></figure> ### Step 4 - Confirm Fraud Manager is enabled within the funnel's Add-On settings <a href="#fraudmanagerwithcheckoutchamp-step4-addfraudmanagerinfunnelsettingsthenpublishthefunnel" id="fraudmanagerwithcheckoutchamp-step4-addfraudmanagerinfunnelsettingsthenpublishthefunnel"></a> <figure><img src="/files/Db06rno4wxeUgsr0oKSn" alt=""><figcaption></figcaption></figure> *** ### Rulesets and Reporting <a href="#fraudmanagerwithcheckoutchamp-creatingrulesets" id="fraudmanagerwithcheckoutchamp-creatingrulesets"></a> Please view our [Fraud Manager plugin article](/crm/plugins/fraud-services/fraud-manager) for more information on the tolerance thresholds and Fraud Manager reporting. # Facebook Messenger Facebook Messenger can be added to your site in 2 ways: 1. Enable the chat plugin on all pages 2. Enable the Messenger checkbox on checkout pages ### Chat Plugin <a href="#facebookmessenger-chatplugin" id="facebookmessenger-chatplugin"></a> The Facebook Chat Plugin can be automatically placed on all pages on your site. * Go to **Settings > Add Ons** * Enter your **Facebook Page ID** and check **Enable chat plugin** * Press Save & Continue * Publish The Chat Plugin is setup at Facebook at Page Settings > Messaging ### Messenger Checkbox <a href="#facebookmessenger-messengercheckbox" id="facebookmessenger-messengercheckbox"></a> The Facebook Messenger Checkbox can be placed on your checkout page. This allows consumers to opt in to communication with you. * Go to **Settings > Add Ons** * Enter your **Facebook Messenger App ID** and your **Facebook Page ID.** * Press Save & Continue. * Edit your checkout page(s) * Add a Form checkbox to the page. Position it where you want the Messenger checkbox to be (your checkbox will be replaced by the FB box). Give it the name “messenger”. * Save the page * Exit the page builder * Publish # reCAPTCHA Enterprise reCAPTCHA is a seamless fraud detection service from Google that stops bots and other automated attacks while approving valid users. reCAPTCHA Enterprise is supported on Lead page forms, Checkout and Login pages. ### Enable reCAPTCHA Enterprise at Google <a href="#recaptchaenterprise-enablerecaptchaenterpriseatgoogle" id="recaptchaenterprise-enablerecaptchaenterpriseatgoogle"></a> There is much documentation on Google to enable reCAPTCHA Enterprise. This is a short list of steps to accomplish this. Your Google account may require additional steps. 1. Sign into your Google account 2. Create a Google Cloud Provider (GCP) account 3. Go to <https://console.cloud.google.com/home> 4. Create a project for reCAPTCHA services and enable billing for the project 5. Create an enterprise key for the project 1. <https://console.cloud.google.com/security/recaptcha> 2. Set **Platform** = Website. Then enter one or more domains. Your funnel domain should be included. 3. It is acceptable to use a testing key. Do remember to change to a live key once testing is complete. 4. Choose to **Use checkbox challenge**. Both options are supported. 5. If using the challenge, choose any **Challenge Security** 6. Save 6. Search for "API and Services" on the top search bar or visit the "API and Services" page (you may also find this under “Explore and enable APIs”). 1. Select Credentials 2. Select **+ Create Credentials** > **API Key** 3. Edit the key * choose to restrict the key to your funnel domain (Website) - this is optional * choose to enter an API restriction to your project from step 4 - this is optional ### Enable reCAPTCHA Enterprise on a funnel <a href="#recaptchaenterprise-enablerecaptchaenterpriseonafunnel" id="recaptchaenterprise-enablerecaptchaenterpriseonafunnel"></a> reCAPTCHA will automatically be added to Lead page forms, Login and Checkout pages. Go to **Add Ons** in funnel Settings. Select the **Google reCAPTCHA Enterprise** tab. <figure><img src="/files/tFfpFskI4ij6jSPVwemc" alt=""><figcaption></figcaption></figure> **Project ID** = the project id from step 4 (this is the id, not the project name) **Site Key** = the key from step 5 **Assessment Key** = the key from step 6 **Failure Redirect URL** = the full URL to redirect an unapproved user. This page can be in the current funnel, in another funnel, or any other site. This must begin with [https://.](broken://pages/qKDCLSUeMHkRH7JqPWFj) **Type** = Choose *Challenge* if you chose *Use checkbox challenge* in step 5c. Otherwise choose *Hidden*. The selection here must match step 5c for your site to function correctly. **Minimum Assessment Threshold Score** = Choose the risk assessment level. Google has much information on this. One is here <https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment-website#:~:text=Interpret%20scores,-The%20scoring%20system&text=reCAPTCHA%20Enterprise%20has%2011%20levels,risk%20and%20might%20be%20fraudulent.> **Trigger Event** = Choose to trigger the assessment on page load or page submit. A checkout page will trigger on submit only if the checkout is a card. Any other checkout (PayPal, ApplePay, Klarna, etc) will not trigger the assessment since the next step requires user interaction. Press **Save & Continue** Publish the funnel after all updates # SMTP Accounts SMTP Accounts send transactional emails to your customers. These trigger-based emails include Order Confirmation, Fulfillment Shipped, PreBilling, and many others. To connect your SMTP account, go to **SMTP Accounts** in your funnels Settings and click **Add New Account**. <figure><img src="/files/pipSYz3JUNHUeK5eYz1e" alt=""><figcaption></figcaption></figure> Fill out the connection information as provided by your SMTP service provider. Be sure to click Save. It is recommended to send a test message to confirm the connection. Additional details about Google SMTP and SendGrid SMTP are [here](/crm/plugins/smtp-maintenance/smtp-maintenance-setup) <figure><img src="/files/yTrjm63YQoX2YbpUmAgK" alt="" width="526"><figcaption></figcaption></figure> Once the SMTP is connected, navigate to your campaign on the CRM side of your account to [configure the emails](https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/auto-responder-setup) that get sent to your customers. <figure><img src="/files/4xtCLdAgLgLtjuR0kDSs" alt=""><figcaption></figcaption></figure> Use the following guide to configure your emails once in the CRM: [Auto-Responder Setup](https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/auto-responder-setup) # Fulfillment Houses Here you can add, view or edit fulfillment houses which are added to your account. <figure><img src="/files/et9SsmSeuYLdq8rkZx2K" alt=""><figcaption></figcaption></figure> After you add the fulfillment house you can go into your [Offers and Upsells](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/offers-and-upsells) to change the fulfillment house tied to the product. # Ship Profiles Here you can add, view, edit, or remove different Shipping Profiles for your customers to choose from. You can also use shipping profiles to apply pricing rules, such as free shipping if subtotal is greater than $X <figure><img src="/files/uVHqHveI5fMRD7Ash3Ns" alt=""><figcaption></figcaption></figure> This example will only charge $5 for shipping for the entire order, but if the subtotal is greater than $50 then shipping will be free. <figure><img src="/files/ZyYxtRWBJKhoFiXJ598W" alt=""><figcaption></figcaption></figure> # Fonts * [Google Fonts](#fonts-googlefonts) * [Adding Your Own Fonts](#fonts-addingyourownfonts) ### Google Fonts <a href="#fonts-googlefonts" id="fonts-googlefonts"></a> You can specify the fonts you would like available to your Funnel Pages by selecting the Fonts option. <figure><img src="/files/vFdlC81zXJ3OUBUojgPY" alt=""><figcaption></figcaption></figure> Once Saved, selected fonts will be available as an option on text elements when designing your pages. <figure><img src="/files/UGeAr3goXA4hgfPLhGiH" alt=""><figcaption></figcaption></figure> ### Adding Your Own Fonts <a href="#fonts-addingyourownfonts" id="fonts-addingyourownfonts"></a> You may also choose to add your own , True Type, Open Type, and WOFF font files to use in the builder. Follow these steps:<br> 1. Upload your font file using the Maintenance file upload section of your funnel settings. <figure><img src="/files/e8H3SpiQ8ocwADUbrHRb" alt=""><figcaption></figcaption></figure> 2. Once the funnel is published, your font will be located at <https://yourfunneldomain.com/your-font.woff> (“yourfunneldomain.com” and “your-font.woff” will be the actual names of your funnel domain and font file). 3. In the builder, you will need to edit your page and add the new font via the @font-face and a new CSS style. This will allow you to use your new font wherever needed on that page. To add the font to the CSS, add the following information to the CSS editor: .your-font-class{\ font-family:'Your-font-Name', Helvetica, serif;\ }\ @font-face{\ font-family:'YourFontName';\ src:url(<https://yourfunneldomain.com/your-font.woff>) format('woff');\ font-weight:normal;\ font-style:normal;\ }\ \ For open Type fonts, the format would be:\ format('opentype');\ \ For True Type fonts, the format would be:\ format('truetype'); <figure><img src="/files/p5xTFrwsw84KCeuziuzU" alt=""><figcaption></figcaption></figure> 4. Once your new font file is added to the CSS with a corresponding class name, you will use that new class name to use that font wherever needed on that page. Select the text where the new font is needed and add the new class name in the settings menu. Once in th element's Settings menu, go to "Classes" and type the font class name in the area provided. Click "Enter". <figure><img src="/files/9cdmpibXS0qkO2PAPpYG" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GYNedwA4k72IHUkb1gnx" alt=""><figcaption></figcaption></figure> # Payments Checkout Champ offers multiple alternatives for configuring your gateways. See each article below to add on these payment methods. * [Affirm](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/affirm) * [Afterpay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/afterpay) * [Amazon Pay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/amazon-pay) * [Apple Pay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/apple-pay) * [Google Pay ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/google-pay) * [PayPal Seamless Checkout](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal) * [Klarna](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/klarna) * [Sezzle](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sezzle) * [Multi-Pay Rebills](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/multi-pay-rebills) * [BitPay](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bitpay) * [Bancontact](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/bancontact) * [BLIK ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/blik) * [iDEAL](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/ideal) * [Boleto](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/boleto) * [SEPA](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/sepa) * [P24](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/p24) * Trustly * [TWINT](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/twint) # Affirm ### Step 1: Login and navigate to the funnel on which to add Affirm <a href="#affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm" id="affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm"></a> <figure><img src="/files/wvYQLE1XqMyul0JHJyUz" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#affirm-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="affirm-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/aDBXXLMnoxHZIKiPytci" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#affirm-checkoutchamp-step3-openthepaymentssection" id="affirm-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/RhQHaLv65mG9aFl1hdgC" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new Affirm gateway credentials <a href="#affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials" id="affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials"></a> <figure><img src="/files/wYxyCh168Ugph87yXKHV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UsDRNpHJYfzH1l7y1gvw" alt=""><figcaption></figcaption></figure> 1. Enter a **Gateway Title** to easily identify the Affirm account. Then add the **public\_api\_key** and **private\_api\_key** for your Affirm account. It is suggested to keep the **Limits** blank due to the fact that rates are established with each merchant though their agreement with Affirm. 2. Be sure to enter a **Mid**# and an accurate **Descriptor** value. The **Descriptor** is sent to Affirm during transaction processing. *** ### Step 5: Save and Continue <a href="#affirm-checkoutchamp-step5-saveandcontinue" id="affirm-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Affirm button <a href="#affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton" id="affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton"></a> <figure><img src="/files/3TVHGWwg10b20bV4Q0z0" alt=""><figcaption></figcaption></figure> ### Button <a href="#affirm-checkoutchamp-button" id="affirm-checkoutchamp-button"></a> <figure><img src="/files/nZLfb7IEcYLAQ0OobsGQ" alt=""><figcaption></figcaption></figure> #### Step 6-1: It is recommended you place this button either directly below the Shopping Cart Element’s Grand Total field or after the customer input fields on the checkout page since the customer will have to input their address information before being able to checkout with Affirm. <a href="#affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem" id="affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem"></a> #### Step 6-2: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/ZMoua1vDlIFSBir8yZLT" alt=""><figcaption></figcaption></figure> ### Radio <a href="#affirm-checkoutchamp-radio" id="affirm-checkoutchamp-radio"></a> <figure><img src="/files/HMbNv1s1te2nTLzhq7pM" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/GdVq4R6TuKZ5gsrn55P9" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#affirm-checkoutchamp-step7-savethepage.exitthepagebuilder" id="affirm-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: Choose the Affirm button on the arrow leaving the checkout page. <a href="#affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage" id="affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage"></a> {% hint style="danger" %} If you offer affirm as a payment option you must route the customer directly to the thank you page after purchase. They do not allow for upsell processing. {% endhint %} <figure><img src="/files/mcO5gPeKGtHvdqfwiei0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#affirm-checkoutchamp-step9-publish.youredoneandreadytotest" id="affirm-checkoutchamp-step9-publish.youredoneandreadytotest"></a> <figure><img src="/files/Q0pa52qy95i70oflps70" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Afterpay {% hint style="warning" %} **Disclaimers:** * ***No card details are stored for merchants using Afterpay’s Payment Gateway*** * ***Afterpay will only work for one-time purchases and will NOT support one-click upsells nor recurring billing/subscriptions*** * ***You can enable the “Multi-Pay Rebills” setting which will require a credit card on the checkout pages to accept one-click upsells and recurring payment*** * **Customer info fields are required for this alternate payment method.** {% endhint %} {% hint style="info" %} Afterpay is supported on Afterpay, Adyen V2, and Stripe V2 gateways {% endhint %} {% hint style="info" %} **Clearpay** is also supported. Please follow the same documentation using Afterpay and drag on the Clearpay button instead of the Afterpay button on step 6. {% endhint %} <figure><img src="/files/bIq0bCNxy2nAJMnevcI1" alt=""><figcaption></figcaption></figure> *** ### Step 1: Login and navigate to the funnel you’d like to add Afterpay to <a href="#afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto" id="afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto"></a> <figure><img src="/files/jjhmZONMsVsvtUZlKJDE" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/zDj6zQDEPcvrB2Qe1JMp" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#afterpay-checkoutchamp-step3-openthepaymentssection" id="afterpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/TQ3km7U2IHEpUmfvs6JA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add or select existing Afterpay or Adyen V2 or Stripe V2 gateway credentials <a href="#afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials" id="afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials"></a> <figure><img src="/files/LKqIyldT9DUHIRB8ynhv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EQwQ3yv2HIDPiYs1wMFV" alt=""><figcaption></figcaption></figure> {% hint style="info" %} * Enter a **Title** to easily identify your Afterpay account. * **Merchant\_ID** - Found on the footer of the Home page inside your Afterpay account. * **Secret\_Key** - This is emailed to the account owner upon the account's creation. If you are having difficulties finding this you can reach out to your Business Development Manager or you can reach Afterpay Merchant Support: <https://developers.afterpay.com/afterpay-online/docs/merchant-support> * Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#afterpay-checkoutchamp-step5-saveandcontinue" id="afterpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Afterpay button <a href="#afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton" id="afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton"></a> <figure><img src="/files/tiY8CuIZ1gATBTNjRJCg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/eCoqpv2y4JVlKnY8ihSo" alt=""><figcaption></figcaption></figure> *** #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn" id="afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn"></a> <figure><img src="/files/kXcljmNE3o0v31mjSbfV" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page. Exit the page builder. <a href="#afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/z6lSUjhpko3fZWT3ZBkU" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Afterpay button. <a href="#afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton" id="afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton"></a> <figure><img src="/files/eCh66Xu3QBz58QRmo2Kk" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#afterpay-checkoutchamp-step9-publish.youredoneandreadytotest" id="afterpay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # Amazon Pay ### Step 1: Login and navigate to the funnel on which to add Amazon Pay <a href="#amazonpay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddamazonpay" id="amazonpay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddamazonpay"></a> <figure><img src="/files/n6npYKOADbAqSUU8cDtZ" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#amazonpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="amazonpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/LVamMbTZQdCXCueYEc5Z" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#amazonpay-checkoutchamp-step3-openthepaymentssection" id="amazonpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/d876nLJBAVll1rlc333q" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add Amazon Pay credentials <a href="#amazonpay-checkoutchamp-step4-addamazonpaycredentials" id="amazonpay-checkoutchamp-step4-addamazonpaycredentials"></a> <figure><img src="/files/jwTD3xpYW6JoH1QWwUb5" alt=""><figcaption></figcaption></figure> {% hint style="info" %} * Select or add an Amazon Pay merchant account. * Client ID, Seller ID, and Access Key values can be found in the **Amazon SellerCentral Portal** by logging into <https://sellercentral.amazon.com/> and going to Integration → MWS Access Key. * The **Enable Recurring** checkbox determines whether to use Amazon billing agreements to enable recurring purchases. If checked, the customer will be required to check the “Use my selected payment method for future purchases and payments to this merchant” box in the Amazon-generated consent widget to complete the purchase. If unchecked, the order will be processed as a one-time payment. {% endhint %} <figure><img src="/files/WXqp5AV3HxVCvEWzqA44" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#amazonpay-checkoutchamp-step5-saveandcontinue" id="amazonpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Amazon Pay button <a href="#amazonpay-checkoutchamp-step6-editcheckoutpageandaddamazonpaybutton" id="amazonpay-checkoutchamp-step6-editcheckoutpageandaddamazonpaybutton"></a> You can choose a gold, light, or dark Amazon Pay button. The difference is color only. Add only one button to the page. <figure><img src="/files/5dRvkTcsKzdUbB1DDtwT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8ccS46q2l3tVGKrt0EPu" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page and exit the page builder <a href="#amazonpay-checkoutchamp-step7-savethepageandexitthepagebuilder" id="amazonpay-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/3MCHLQFz6eem43XJ8175" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Amazon Pay button for navigation. <a href="#amazonpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheamazonpaybuttonfornavigation" id="amazonpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheamazonpaybuttonfornavigation"></a> <figure><img src="/files/ZmPFaDCjrguxtKcGhOPv" alt=""><figcaption></figcaption></figure> ### Step 9: Publish the funnel. You’re done and ready to test! <a href="#amazonpay-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest" id="amazonpay-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/kwM7ArIRYgqxGXFHoKiu" alt=""><figcaption></figcaption></figure> *** ## Creating Amazon Pay App And Adding Your Domain <a href="#amazonpay-checkoutchamp-creatingamazonpayappandaddingyourdomain" id="amazonpay-checkoutchamp-creatingamazonpayappandaddingyourdomain"></a> 1. Log in to <https://sellercentral.amazon.com> 2. Go to **Integration → Integration Central** 3. Go to **Manage client ID/store ID(s)** section at the bottom of the page and click “**Create new client ID/store ID**” or click “**View client ID/store ID(s)**” and “**Edit**” to update existing app. 4. Add “**<https://funnels-build.Checkout> Champ.com**“ and “**<https://funnels.Checkout> Champ.com**“ or your custom funnel domain to **JavaScript origins** and **return URLs** and create or update. Upon clicking the Amazon Pay button on your checkout page, you will get the message “We’re sorry The payment method that you chose isn\['t available for this purchase. Please choose another. Integration error summary” in the login popup window if your funnel domain is not added to your Amazon Pay client ID configuration. *** ## Transaction Flow <a href="#amazonpay-checkoutchamp-transactionflow" id="amazonpay-checkoutchamp-transactionflow"></a> ### The Customer will click the Amazon-generated Amazon Pay button <a href="#amazonpay-checkoutchamp-thecustomerwillclicktheamazon-generatedamazonpaybutton" id="amazonpay-checkoutchamp-thecustomerwillclicktheamazon-generatedamazonpaybutton"></a> <figure><img src="/files/nh80GVXPKPFAt5HXxnxF" alt=""><figcaption></figcaption></figure> ### A window will popup for the customer to sign into Amazon <a href="#amazonpay-checkoutchamp-awindowwillpopupforthecustomertosignintoamazon" id="amazonpay-checkoutchamp-awindowwillpopupforthecustomertosignintoamazon"></a> <figure><img src="/files/AXUiBzBzvuyRkWSpHK6W" alt=""><figcaption></figcaption></figure> ### The customer will return to your checkout page, select shipping address and payment method from the Amazon-generated widgets, and click the Amazon Pay button to complete the purchase. <a href="#amazonpay-checkoutchamp-thecustomerwillreturntoyourcheckoutpage-selectshippingaddressandpaymentmetho" id="amazonpay-checkoutchamp-thecustomerwillreturntoyourcheckoutpage-selectshippingaddressandpaymentmetho"></a> <figure><img src="/files/blBHe2MulzCv1sAPrIAd" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8KPaBithxyM6vlkjq9a8" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Apple Pay Use these instructions for Apple Pay processing on CheckoutChamp hosted pages {% hint style="danger" %} **Not all gateways support Apple Pay. Apple Pay is supported on Acquired3DS, AdyenV2, Airwallex, Authorize.netV2, Bambora, cardstream, Celerispay, CheckoutV2, EasyPay Direct, eMerchantPay, Fluid Pay, Gala Technology, Merchant Warrior, MerchantConnect, MerchantConnectV2, Mollie, NMI, NomuPay, Payarc, PaysafeV2, Priority, Solid, SquareV2, SquareV2, Stripe, Surgeify, Swipen, TotalApps, Truevo, Trust Payments, Vantiv, VantivV2, Verifi, Whitelabel Payments, WorldlineV2, Worldnet, and Worldpay.** Fluid Pay, NMI, Stripe, Adyen, Airwallex, Checkout.com, Payarc, and Trust Payments offer a special onboarding workflow. See the section below specific to those gateways. {% endhint %} {% hint style="warning" %} Apple Pay is generally one-time use. As of November 14th, 2025, Rebills and 1-click upsells are supported on AdyenV2, Airwallex, eMerchantPay, Fluid Pay, Merchant Warrior, Payarc, Stripe, Checkout.com, and Trust Payments. NMI supports rebills and 1-click upsells on some processors. It must be used in conjunction with the customer vault functionality. Confirm with your gateway and test thoroughly before starting live traffic. {% endhint %} {% hint style="info" %} ***The Apple Pay button ONLY displays on live pages if the customer's Apple Pay wallet is configured AND the device supports Apple Pay (Mac or iPhone with touch ID).*** {% endhint %} *** ### Use an existing Apple Pay Merchant ID? {% hint style="info" %} You can use an existing Apple Pay Merchant ID if: * The Merchant ID is from your own Apple Developer account * The Merchant ID was created for you by your gateway The Apple Pay Merchant ID always begins with **merchant.** {% endhint %} #### Update your gateway with your existing Apple Pay Merchant ID 1. Login to [crm.checkoutchamp.com](http://crm.checkoutchamp.com/). Go to Gateways > Gateway List > edit the gateway on which to transact Apple Pay. *Note: Not all gateways support Apple Pay. See the list at the top of this article.* 2. Under the **Apple Pay** section, enable the **Use an existing Apple Pay Merchant ID?** option and enter your Apple Pay Merchant ID in the **Existing Apple Pay Merchant ID** field. <figure><img src="/files/6mVJmKkqsUOwiLZJklCx" alt=""><figcaption><p>Use an existing Apple Pay Merchant ID</p></figcaption></figure> 3. Click the Update button to update the gateway. <figure><img src="/files/J6bW0fEMP99a7iL6b38P" alt=""><figcaption><p>The Success Message After Updating Your Gateway</p></figcaption></figure> The Apple Pay section will now show your uploaded Apple Pay Merchant ID. <figure><img src="/files/nIM2YdnrJQ8MJL58uvO9" alt=""><figcaption><p>Example Enabled Apple Pay Merchant ID</p></figcaption></figure> Proceed to [Step 4](#step-4-register-apple-pay-domains). *** ### Use an Apple Pay Merchant ID generated by CheckoutChamp {% hint style="danger" %} **You do not need your own Apple Developer account for this process!** The Apple Merchant ID used with your gateway will be created by and maintained by CheckoutChamp. {% endhint %} *** #### Fluid Pay, NMI, Stripe, Adyen, Airwallex, Checkout.com, Payarc, and Trust Payments These gateways do not require a certSigningRequest file. Proceed to [Step 4](#step-4-register-apple-pay-domains). Using one of these gateways also allows for selection of an ATRI profile on your funnel. Placing multiple of these gateways into an ATRI profile or cascade will allow routing and cascades for Apple Pay. See [Step 7](#step-8-enter-apple-pay-details). *** #### Other Gateways {% hint style="warning" %} **Payments cannot be processed without a valid Payment Processing Certificate from your payment processor.** \ The **Payment Processing Certificate** is a file obtained from your gateway that usually ends with a **.certSigningRequest** or **.csr** file extension. You will need to follow this guide to obtain the file from your gateway (see [Step 1](#step-1-obtain-payment-processing-certificate)) and upload this file to CheckoutChamp using the **Upload Certificate** button under the Apple Pay section on the gateway edit page in the CRM (see [Step 2](#step-2-load-certificate-into-checkoutchamp)). CheckoutChamp will upload this file to Apple, and Apple will use the public key from the certificate to encrypt Apple Pay tokens during checkout. Your gateway will then use the private key from the certificate to decrypt the Apple Pay token in order to process the payment. That is why certificates are gateway specific, and the same certificate cannot be used across gateways. \ Some gateways require that a **.cer** file be uploaded back to them. This is a file that is generated by Apple that can be downloaded via the **Download Apple File** button on the gateway edit page in the CRM after CheckoutChamp has completed on-boarding of the certificate and enabled the gateway for Apple Pay (see [Step 3](#step-3-upload-apple-pay-file-back-to-gateway)). {% endhint %} {% hint style="warning" %} **Please Note: Your Gateway’s Payment Processing Certificate **<mark style="color:orange;">**EXPIRES every 25 months**</mark>**. You will need to generate and upload a NEW certificate to your CheckoutChamp gateway prior to the expiration date.** {% endhint %} *** ### Step 1: Obtain Payment Processing Certificate <a href="#step-1-obtain-payment-processing-certificate" id="step-1-obtain-payment-processing-certificate"></a> Obtain an Apple Pay Payment Processing Certificate (.certSigningRequest file) from your gateway. If your gateway requires that you provide an Apple Pay Merchant ID to obtain a certificate, copy the **Pending Apple Pay Merchant ID** from the gateway edit page in the CRM. <figure><img src="/files/4USFXGnh7FRVnsjdXR5U" alt="" width="410"><figcaption></figcaption></figure> {% tabs fullWidth="true" %} {% tab title="Authorize.net" %} * Log in to the Authorize.net portal - <https://login.authorize.net/> * Select **Account** from the main toolbar. * Choose **Digital Payment Solutions** from the menu on the left. * Click **Apple Pay**. * Go to the gateway edit page for your Authorize.net gateway inside of the CRM and click the copy button next to the **Pending Apple Pay Merchant ID**. * Fill in the Pending Apple Pay Merchant ID copied from the CRM in the Apple Merchant ID Field. * Click the **Generate Apple CSR** button. <https://support.authorize.net/knowledgebase/Knowledgearticle/?code=000001505> {% endtab %} {% tab title="Airwallex" %} <mark style="color:red;">**NO NOT USE THESE STEPS FOR AIRWALLEX**</mark>. This is a legacy workflow and is retained here for reference only. Any new Airwallex gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. Inside of Airwallex: * Go to **Payments > Settings**. * Click **Manage** next to the Apple Pay row. * Click the **Upload Certificate** in the iOS certificates section. * Click **Download CSR file**. * A .certificateSigningRequest file will download. Keep that page open and in a new tab go to the gateway edit page in the CRM of your Airwallex gateway. From there: * Click the **Upload Certificate** button in the Apple Pay section and upload the **.certificateSigningRequest** file downloaded from Airwallex. * Wait for CheckoutChamp to board this certificate onto Apple Pay. This may take some time. You will be notified by email when it is complete. * Once on-boarding has been completed in CheckoutChamp, return to the gateway edit page and click **Download Apple File**. * A **.cer** file will download. Return to the iOS certificates page in Airwallex. From there: * Click **Select file** under the Upload your certificate file step. * Select the **.cer** file downloaded from the gateway edit page in the CRM. * Click **Upload**. {% embed url="<https://www.airwallex.com/docs/payments__global__apple-pay__enable-apple-pay-via-web-application__apple-pay-for-ios>" %} Step 1 is relevant from this help doc. {% endembed %} {% endtab %} {% tab title="NMI" %} * <mark style="color:red;">**NO NOT USE THESE STEPS FOR NMI**</mark>. This is a legacy workflow and is retained here for reference only. Any new NMI gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. * Go to the gateway edit page for your NMI gateway inside of the CRM and click the copy button next to the **Pending Apple Pay Merchant ID**. * In the NMI portal, go to **Options -> Apple Pay** and choose the **App** tab. <https://secure.nmi.com/merchants/options.applepay.v2.php?Action=ApplePay&subaction=SetupApp> <figure><img src="/files/9Bx4FK8qgEPN9tEEprox" alt=""><figcaption></figcaption></figure> * Fill in the Pending Apple Pay Merchant ID copied from the CRM in the Apple Pay Merchant ID field. * Click **Generate Certificate Signing Request**. * The Gateway.certSigningRequest file will automatically download. {% endtab %} {% tab title="Stripe" %} <mark style="color:red;">**NO NOT USE THESE STEPS FOR STRIPE**</mark>. This is a legacy workflow and is retained here for reference only. Any new Stripe gateways should use the [instructions](#fluid-pay-nmi-adyen-and-trust-payments) earlier in this document. Stripe may require a new application * In Stripe, go to **Settings > Business settings > Payments methods > Apple Pay > Configure > iOS certificates > Add new application**. * Click **Add new application** on the iOS certificates panel. * There will be a popup asking to download a CSR file. Click **Continue**. A **.certSigningRequest** file will download. Keep that page open and in a new tab go to the gateway edit page in the CRM of your Stripe gateway. From there: * Click the **Upload Certificate** button in the Apple Pay section and upload the .certificateSigningRequest file downloaded from Stripe. * Wait for CheckoutChamp to board this certificate onto Apple Pay. This may take some time. You will be notified by email when it is complete. * Once on-boarding has been completed in CheckoutChamp, return to the gateway edit page and click **Download Apple File**. * A **.cer** file will download. Return to the iOS certificates new application page in Stripe. From there: * Upload the **.cer** file downloaded from the gateway edit page in the CRM. <https://docs.stripe.com/apple-pay?platform=ios#csr> {% endtab %} {% endtabs %} *** ### Step 2: Load Certificate into CheckoutChamp <a href="#step-2-load-certificate-into-checkoutchamp" id="step-2-load-certificate-into-checkoutchamp"></a> Login to [crm.checkoutchamp.com](http://crm.checkoutchamp.com/). Go to Gateways > Gateway List > edit the gateway on which to transact Apple Pay. *Note: Not all gateways support Apple Pay. See the list at the top of this article.* Click the green **Certificate** button on the right side and upload the certSigningRequest file. {% hint style="warning" %} Be sure the file matches the gateway (e.g., a Stripe file is valid only on a Stripe gateway). {% endhint %} <figure><img src="/files/ZIvH5Bsfi1Ktq2wu7f9L" alt="" width="406"><figcaption></figcaption></figure> The gateway certificate will be automatically boarded onto Apple Pay and the gateway enabled for Apple Pay. If successful, the edit page will refresh with the enabled Apple Pay Merchant ID displayed. You will be notified by email and CRM notification that the gateway has been successfully enabled for Apple Pay. Proceed to [Step 3](#step-3-upload-apple-pay-file-back-to-gateway). Otherwise, the page will refresh, and the name of the uploaded file will be displayed. There is a button to remove the file and a button to upload a new certificate. Use these buttons if a file was uploaded in error. <figure><img src="/files/KmdUnDR89yh0TK18JpiL" alt="" width="408"><figcaption></figcaption></figure> Please review these [gateway instructions for obtaining a payment processing certificate](#step-1-obtain-payment-processing-certificate). If the certificate is already in use at another Apple Developer account, then you could remove the file and follow these [instructions to use an existing Apple Pay Merchant ID](#use-an-existing-apple-pay-merchant-id). *** ### Step 3: Upload Apple Pay file back to gateway <a href="#step-3-upload-apple-pay-file-back-to-gateway" id="step-3-upload-apple-pay-file-back-to-gateway"></a> Step 2 is complete when Apple Pay is enabled on the CheckoutChamp gateway. Your payment gateway may require an Apple Pay Certificate File (.cer) be uploaded for their verification. Use the **Apple Pay File** button to download the file. <figure><img src="/files/eGjLgXgzEQ4GRWQ53Hvq" alt="" width="410"><figcaption></figcaption></figure> *** ### Step 4: Navigate to each funnel on which to add Apple Pay <a href="#step-4-register-apple-pay-domains" id="step-4-register-apple-pay-domains"></a> <figure><img src="/files/yRJuw7wuYV8ALd803dox" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 5: Click the gear button on the top left to open the funnel settings <a href="#step-6-click-the-gear-button-on-the-top-left-to-open-the-funnel-settings" id="step-6-click-the-gear-button-on-the-top-left-to-open-the-funnel-settings"></a> <figure><img src="/files/dcK69wX3XDInllomBB9J" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 6: Open the Payments section <a href="#applepay-checkoutchamp-step8-saveandcontinue" id="applepay-checkoutchamp-step8-saveandcontinue"></a> <figure><img src="/files/fDZ5Wl8Xy17BSkFa4YQr" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 7: Enter Apple Pay details <a href="#step-8-enter-apple-pay-details" id="step-8-enter-apple-pay-details"></a> Enter these details and Save * **Gateway**: Choose any gateway that has an Apple Pay merchant id. ATRI profiles are also allowed, if they contain one or more of the required gateways noted earlier in this article. * **Partner Merchant Identifier**: automatically filled in with the Apple Pay merchant id * **Merchant Name**: Customizable merchant name to display to customers while authorizing payment. * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" * **Country**: Country to use for each Apple Pay Session * **Require Address**: choose to require address entry on the checkout page prior to launching Apple Pay <figure><img src="/files/fdpf96WRiXKTT2AGYZlo" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 8: Edit Checkout page and add Apple Pay button <a href="#applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton" id="applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton"></a> <figure><img src="/files/MWi0rz7z7wvYbxcZUt3U" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/XAG7G8XoZJStdflG4Gcq" alt="" width="563"><figcaption></figcaption></figure> #### Step 8-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> <figure><img src="/files/AMDNZtBrrThuoN8fUpPg" alt="" width="288"><figcaption></figcaption></figure> #### An Apple Pay button on a published page will be visible only on Apple devices, and its appearance will follow Apple Pay button CSS styling. <a href="#applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara" id="applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara"></a> <figure><img src="/files/eO5XHu8R5S8HXdNDeYy9" alt="" width="350"><figcaption><p><strong>Apple Pay Buttons as shown in the page builder</strong></p></figcaption></figure> <figure><img src="/files/moriQNwDrkg9HVkDuTSn" alt="" width="563"><figcaption><p><strong>Apple Pay Buttons as shown on published checkout page on Apple devices</strong></p></figcaption></figure> *** ### Step 9: Save the page and exit the page builder. <a href="#applepay-checkoutchamp-step11-savethepageandexitthepagebuilder" id="applepay-checkoutchamp-step11-savethepageandexitthepagebuilder"></a> <figure><img src="/files/wpY7OGWi7xQ1Lhn53VA5" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 10: On the arrow leaving the checkout page, choose the Apple Pay button for navigation. <a href="#applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation" id="applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation"></a> <figure><img src="/files/taxKGjFn0CPXWrl81bGM" alt="" width="466"><figcaption></figcaption></figure> *** ### Step 11: Upsell pages <a href="#applepay-checkoutchamp-step13-upsellpages" id="applepay-checkoutchamp-step13-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Apple Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have an Apple Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on upsell pages instead of an Apple button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Apple Pay or non-Apple Pay based on the checkout. Apple Pay will redirect the consumer to Apple to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have an Apple button on upsell pages.** Place one or more standard buttons AND one or more Apple Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Apple Pay. Pressing the Apple Pay buttons will redirect the consumer to Apple to complete the upsell. When the live page loads the Apple Pay buttons are removed if the checkout was not Apple Pay. The standard buttons will submit the upsell. *** ### Step 12: Publish the funnel. You’re done and ready to test! <a href="#applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest" id="applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/4WOuYALNmZqgS90hTOIi" alt="" width="563"><figcaption></figcaption></figure> ***Apply Pay checkout is available only on Apple devices. Apple Pay buttons on a live page will only display on Apple devices.*** <https://support.apple.com/en-us/HT208531> # Legacy Apple Pay Setup (Apple Pay Plugin) {% hint style="danger" %} **Not all gateways support Apple Pay. Apple Pay is supported on Acquired3DS, Adyen, Authorize.netV2, Bambora, cardstream, Celerispay, CheckoutV2, Easy Pay Direct, Gala Technology, Merchant Warrior, MerchantConnect, MerchantConnectV2, NMI, NomuPay, PaysafeV2, Priority, SquareV2, SquareV2, StripeV2, Surgeify, Swipen, TotalApps, Truevo, Vantiv, VantivV2, Verifi, Whitelabel Payments, WorldlineV2, Worldpay.** {% endhint %} {% hint style="danger" %} **This Apple Pay setup method should only be used if you are using your own Apple Pay Developer Account with the Apple Pay plugin.** {% endhint %} {% hint style="warning" %} **Apple Pay setup requires successful configuration of your Apple Pay Certificates, Identifiers & Profiles in your Apple Developer account. You can find more information on how to properly configure your Apple Pay account on the Apple side in the Apple Developer docs:** [**Configure Apple Pay**](https://developer.apple.com/help/account/configure-app-capabilities/configure-apple-pay) {% endhint %} {% hint style="warning" %} **Payments cannot be processed without a valid Payment Processing Certificate from your Gateway. You will upload your Gateway’s Payment Processing Certificate (a “csr” file with a .certSigningRequest file extension) to your Apple Developer account.** {% endhint %} {% hint style="warning" %} **Please Note: Your Gateway’s Payment Processing Certificate **<mark style="color:orange;">**EXPIRES every 25 months**</mark>**. You will need to generate and upload a NEW certificate to your Apple Developer account prior to the expiration date.** {% endhint %} {% hint style="info" %} ***The button ONLY displays if customer's Apple Pay wallet is configured AND device supports Apple Pay (mac or iphone with touch ID).*** {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to add Apple Pay <a href="#applepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddapplepay" id="applepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddapplepay"></a> <figure><img src="/files/POL4K3dsVFuvMMgVq90L" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#applepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="applepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/t0VD5eEp4gumihgk7XgR" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#applepay-checkoutchamp-step3-openthepaymentssection" id="applepay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/rWElE5lZD24v3KtDXzQI" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 4: Choose an existing Apple Pay plugin / Merchant ID configuration or click the plus sign to create a new one. <a href="#applepay-checkoutchamp-step4-chooseanexistingapplepayplugin-merchantidconfigurationorclicktheplussig" id="applepay-checkoutchamp-step4-chooseanexistingapplepayplugin-merchantidconfigurationorclicktheplussig"></a> <figure><img src="/files/hqLcSTm7FZmiAVklF6cz" alt="" width="494"><figcaption></figcaption></figure> {% hint style="info" %} ***If you click the plus sign to create a new plugin, you will need to copy and paste the credentials detailed in Step 5.*** {% endhint %} *** ### Step 5: Add the Apple Pay Merchant credentials <a href="#applepay-checkoutchamp-step5-addtheapplepaymerchantcredentials" id="applepay-checkoutchamp-step5-addtheapplepaymerchantcredentials"></a> <figure><img src="/files/uJwoq6JqXu4C8ny0yLGg" alt="" width="563"><figcaption></figcaption></figure> **merchantIdentifier**: * Your Apple Pay **Merchant Identifier** * Can be found on your Apple Developer Account at <https://developer.apple.com/account/resources/identifiers/list/merchant> **Download your Merchant Identity Certificate and its Private Key** <figure><img src="/files/KaEXok729e59PgpR4fqs" alt="" width="563"><figcaption></figcaption></figure> * To download your Merchant Identity Certificate and its Private Key, first open Keychain Access. * Navigate to the “Certificates” section. * Highlight both the certificate and the key (down arrow). * Right click. * Export 2 items. * File format Personal Information Exchange (.p12) * Convert the .p12 file to PEM format * Launch the terminal on your Mac. * Change directory to the folder where you have saved the .p12 file. * Run the following openssl pkcs12 command to generate a .pem file: * openssl pkcs12 -in pushcert.p12 -out pushcert.pem -nodes -clcerts **merchantCert**: * Your Apple Pay **Merchant Identity Certificate** * As noted above, this must be downloaded from your Apple Account and converted to PEM format. * Open your new PEM file in a text editor, like Notepad. Copy the contents of the text file and paste into the “merchantCert” box. * Pasted text must include everything from “-----BEGIN CERTIFICATE-----” to “-----END CERTIFICATE-----”. **certPrivateKey**: * The **private key** of your Merchant Identity Certificate * This must be converted to PEM format along with your downloaded Apple Pay Merchant Identity Certificate * Open your new PEM file in a text editor, like Notepad. Copy the contents of the text file and paste into the “certPrivateKey” box * Pasted text must include everything from “-----BEGIN PRIVATE KEY-----” to “-----END PRIVATE KEY-----”. **displayName**: * Default merchant name to display to the customer while authorizing payment * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" *** ### Step 6: Save and Continue <a href="#applepay-checkoutchamp-step6-saveandcontinue" id="applepay-checkoutchamp-step6-saveandcontinue"></a> *** ### Step 7: Configure Apple Pay funnel settings. <a href="#applepay-checkoutchamp-step7-configureapplepayfunnelsettings" id="applepay-checkoutchamp-step7-configureapplepayfunnelsettings"></a> <figure><img src="/files/ARlguFXffcldt7396q9Y" alt="" width="494"><figcaption></figcaption></figure> * **Gateway**: Gateway on which to process a transaction the with Apple Pay token. Gateway is optional. Not entering a gateway will process the transaction on the gateway assigned to the product purchased. Do ensure the gateway is in the supported list at the top of this document. Also ensure you have uploaded a valid Payment Processing Certificate from your Gateway in your Apple Developer account. * **Plugin**: Apple Pay plugin / Merchant ID configuration settings to use to create Apple Payment Sessions. This is required. * **Merchant Name**: Customizable funnel merchant name to display to the customer while authorizing payment. If not entered, the session will default to the plugin settings displayName. * Ex: "Touch ID to Pay **My Store** (displayName) $118.00" * **Country**: Country to use for Apple Pay Session * You will upload **Domain File** in Step 9. *** ### Step 8: Save and Continue <a href="#applepay-checkoutchamp-step8-saveandcontinue" id="applepay-checkoutchamp-step8-saveandcontinue"></a> *** ### Step 9: Upload Apple’s Domain Verification File and verify your domain on your Apple account <a href="#applepay-checkoutchamp-step9-uploadapplesdomainverificationfileandverifyyourdomainonyourappleaccount" id="applepay-checkoutchamp-step9-uploadapplesdomainverificationfileandverifyyourdomainonyourappleaccount"></a> 1. Go to <https://developer.apple.com/account/resources/identifiers/list/merchant> and select the Merchant ID that you are using with this funnel. 2. On the Edit or Configure Merchant ID page, go to Merchant Domains section and click Add Domain. 3. Enter your funnel domain and save. 4. Click Download and download the apple-developer-merchantid-domain-association txt file. 5. On your funnel Payments settings, click Choose File next to the Domain File label. 6. Select your downloaded verification text file and click Open. 7. Publish the funnel. This will upload the file to the .well-known folder on your funnel. 8. Click Verify back on your Apple Merchant Domain page. {% hint style="danger" %} When using Apple Pay in multiple funnels published to the same domain, you will need to upload the file to a single funnel and publish that funnel as the default funnel. {% endhint %} {% hint style="info" %} ***If integrating with Stripe and verification returns a 404 error from Stripe, you may need to submit a Checkout Champ support ticket to have our development team manually remove the “.txt” file extension from the uploaded file.*** ***Likewise, submit a Checkout Champ support ticket in the event an incorrect Domain File is uploaded, or an existing file needs to be replaced.*** {% endhint %} *** ### Step 10: Edit Checkout page and add Apple Pay button <a href="#applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton" id="applepay-checkoutchamp-step10-editcheckoutpageandaddapplepaybutton"></a> <figure><img src="/files/7HffDIJSP3supyMsm3XZ" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/tn42JT1rHnocVYsvl2sf" alt="" width="563"><figcaption></figcaption></figure> #### Step 10-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="applepay-checkoutchamp-step10-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> <figure><img src="/files/HAC6gtFTC3MYfXFpCSQn" alt="" width="288"><figcaption></figcaption></figure> #### An Apple Pay button on a published page will be visible only on Apple devices, and its appearance will follow Apple Pay button CSS styling. <a href="#applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara" id="applepay-checkoutchamp-anapplepaybuttononapublishedpagewillbevisibleonlyonappledevices-anditsappeara"></a> <figure><img src="/files/fHGmeS55TTFMRKq9bynX" alt="" width="350"><figcaption><p>Apple Pay buttons as shown in the page builder</p></figcaption></figure> <figure><img src="/files/W9pXC5tTIGZUCUK3WY7R" alt="" width="563"><figcaption><p><strong>Apple Pay Buttons as shown on published checkout page on Apple devices.</strong></p></figcaption></figure> *** ### Step 11: Save the page and exit the page builder. <a href="#applepay-checkoutchamp-step11-savethepageandexitthepagebuilder" id="applepay-checkoutchamp-step11-savethepageandexitthepagebuilder"></a> <figure><img src="/files/ot0Ux6GEzBerL6ZcqtC8" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 12: On the arrow leaving the checkout page, choose the Apple Pay button for navigation. <a href="#applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation" id="applepay-checkoutchamp-step12-onthearrowleavingthecheckoutpage-choosetheapplepaybuttonfornavigation"></a> <figure><img src="/files/RqNAxK7pCNfpOUKoMHH1" alt="" width="466"><figcaption></figcaption></figure> *** ### Step 13: Upsell pages <a href="#applepay-checkoutchamp-step13-upsellpages" id="applepay-checkoutchamp-step13-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Apple Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have an Apple Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on upsell pages instead of an Apple button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Apple Pay or non-Apple Pay based on the checkout. Apple Pay will redirect the consumer to Apple to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have an Apple button on upsell pages.** Place one or more standard buttons AND one or more Apple Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Apple Pay. Pressing the Apple Pay buttons will redirect the consumer to Apple to complete the upsell. When the live page loads the Apple Pay buttons are removed if the checkout was not Apple Pay. The standard buttons will submit the upsell. *** ### Step 14: Publish the funnel. You’re done and ready to test! <a href="#applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest" id="applepay-checkoutchamp-step14-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/j2mduMSg7LZvAUdwD5Fy" alt="" width="563"><figcaption></figcaption></figure> ***Apply Pay checkout is available only on Apple devices. Apple Pay buttons on a live page will only display on Apple devices.*** <https://support.apple.com/en-us/HT208531> # Multi-Pay Rebills If enabled, a credit card will be required on your checkout page during third-party multi-pay checkout. The card can then be used for rebills and upsells. This option works with Affirm, Afterpay, Klarna, and Sezzle. Example: You want the customer to be able to choose to pay for the initial one-time offer in multiple payments with Afterpay and also start a recurring subscription that will be charged via credit card. A credit card will be required and validated before processing the order at Afterpay. If the Afterpay payment is successful, then a recurring subscription will be processed via credit card. {% hint style="info" %} This is also the method to offer upsells along with Multi-Pay checkout. The card will be used for the upsells. {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to enable Multi-Pay Rebills. <a href="#multi-payrebills-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoenablemulti-payrebills" id="multi-payrebills-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoenablemulti-payrebills"></a> <figure><img src="/files/3vkkJE5SkFESahdklJbu" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#multi-payrebills-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="multi-payrebills-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/nbBtHqD3QaFObcqnPK2G" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#multi-payrebills-checkoutchamp-step3-openthepaymentssection" id="multi-payrebills-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/IICnZ0XGfmGCt02Ys85q" alt=""><figcaption></figcaption></figure> *** ### Step 4: Check Enable checkbox under Multi-Pay Rebills. <a href="#multi-payrebills-checkoutchamp-step4-checkenablecheckboxundermulti-payrebills" id="multi-payrebills-checkoutchamp-step4-checkenablecheckboxundermulti-payrebills"></a> <figure><img src="/files/eeBbpWcdA3Fd2RWtJ8HA" alt=""><figcaption></figcaption></figure> *** ### Step 5: Click the Edit button next to the Multi-Pay Rebills checkbox. <a href="#multi-payrebills-checkoutchamp-step5-clicktheeditbuttonnexttothemulti-payrebillscheckbox" id="multi-payrebills-checkoutchamp-step5-clicktheeditbuttonnexttothemulti-payrebillscheckbox"></a> <figure><img src="/files/bEUnOSDiO9bVyRwtXbfz" alt=""><figcaption></figcaption></figure> *** ### Step 6: Click Create Product Configuration. <a href="#multi-payrebills-checkoutchamp-step6-clickcreateproductconfiguration" id="multi-payrebills-checkoutchamp-step6-clickcreateproductconfiguration"></a> <figure><img src="/files/AOgUIPdqP5TIH6oiQzJV" alt=""><figcaption></figcaption></figure> *** ### Step 7: Select the Base Product, Multi-Pay Product, and Rebill Product (optional) and Save and Continue. <a href="#multi-payrebills-checkoutchamp-step7-selectthebaseproduct-multi-payproduct-andrebillproduct-optional" id="multi-payrebills-checkoutchamp-step7-selectthebaseproduct-multi-payproduct-andrebillproduct-optional"></a> <figure><img src="/files/00HmvAxIKDxdpUap2bFJ" alt=""><figcaption></figcaption></figure> **Base Product**: The product that will trigger the multi-pay rebill process. This product must be in the cart or on the checkout button. **Multi-Pay Product**: The one-time product that will be billed using the multi-pay gateway. This can be the same product as **Base Product**. **Rebill Product**: The recurring product that will be charged in credit card rebills. This is optional. Not setting a rebill product will still allow the credit card to be used on upsells. This must be a different product than **Base Product** and **Multi-Pay Product**. *** ### Step 8: Close the Multi-Pay Product Configuration window and click Save & Continue on the Payments window. <a href="#multi-payrebills-checkoutchamp-step8-closethemulti-payproductconfigurationwindowandclicksave-and-con" id="multi-payrebills-checkoutchamp-step8-closethemulti-payproductconfigurationwindowandclicksave-and-con"></a> <figure><img src="/files/4hvU1sOOLIgUaca7vum4" alt=""><figcaption></figcaption></figure> *** ### Step 9: Edit and save your checkout page and links as needed to have both a credit card input and the button of the multi-pay gateway (Affirm, Afterpay, Klarna, Sezzle) in the same parent element. <a href="#multi-payrebills-checkoutchamp-step9-editandsaveyourcheckoutpageandlinksasneededtohavebothacreditcar" id="multi-payrebills-checkoutchamp-step9-editandsaveyourcheckoutpageandlinksasneededtohavebothacreditcar"></a> <figure><img src="/files/0EEkOQy7qkmjePhtrOWH" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#multi-payrebills-checkoutchamp-step9-publish.youredoneandreadytotest" id="multi-payrebills-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # BitPay {% hint style="warning" %} **Disclamers:** * ***BitPay does not support rebills*** * ***BitPay does not support an Auth/Capture model***<br> * ***Upsells are supported on BitPay. However the process requires the consumer to repeat the entire checkout flow with their BitPay wallet. 1-click upsells are not possible with cryptocurrency.***<br> * **Customer info fields are required for this alternate payment method.** {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add BitPay to <a href="#bitpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddbitpayto" id="bitpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddbitpayto"></a> <figure><img src="/files/vhVeycxQ3E2Jt5vJ18O0" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#bitpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="bitpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/fmhEGfVfRYRl3ItbAEAi" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#bitpay-checkoutchamp-step3-openthepaymentssection" id="bitpay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/1ANoV0AsbDzlKBHbHX9G" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new BitPay gateway credentials <a href="#bitpay-checkoutchamp-step4-addnewbitpaygatewaycredentials" id="bitpay-checkoutchamp-step4-addnewbitpaygatewaycredentials"></a> <figure><img src="/files/PUXGyfc49Lc9RL7wzYTN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/CPxmzDDtVc2OrPOdf7IT" alt=""><figcaption></figcaption></figure> * Enter **token** from your BitPay account * Login to BitPay Account > Payment Tools > API Tokens (Under the Integration Resources) * Click “Add New Token” * Enter your token label * Do not check "Require Authentication" * Click "Add Token" *** ### Step 5: Save and Continue <a href="#bitpay-checkoutchamp-step5-saveandcontinue" id="bitpay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and drag the BitPay button to the page <a href="#bitpay-checkoutchamp-step6-editcheckoutpageanddragthebitpaybuttontothepage" id="bitpay-checkoutchamp-step6-editcheckoutpageanddragthebitpaybuttontothepage"></a> <figure><img src="/files/ySwPWdkoJLBr6VBukqb5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/WL2Hg8vOFtXoCGPTD4qB" alt=""><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#bitpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="bitpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/STs2oyRyrYJZP4l8ssFS" alt=""><figcaption></figcaption></figure> *** ### Step 7: Save the page. Exit the page builder. <a href="#bitpay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="bitpay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/EkPzi1BKfE9mYGgr7dIG" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the BitPay button. <a href="#bitpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebitpaybutton" id="bitpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebitpaybutton"></a> <figure><img src="/files/tiyxVaVYcW60xt7KCSpF" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#bitpay-checkoutchamp-step9-publish.youredoneandreadytotest" id="bitpay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> # Bancontact {% hint style="info" %} Bancontact is supported through Stripe V2, Checkout.com, Adyen V2, Airwallex, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add Bancontact <a href="#bancontact-checkoutchamp-step1-loginandnavigatetothefunneltoaddbancontact" id="bancontact-checkoutchamp-step1-loginandnavigatetothefunneltoaddbancontact"></a> <figure><img src="/files/c6bHgShPG2QtQ0wHQSyp" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#bancontact-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="bancontact-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/Bs1WC3sX2jUuZNsnwcNN" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#bancontact-checkoutchamp-step3-openthepaymentssection" id="bancontact-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/eBsOANlLxPfZSJdAhPwH" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#bancontact-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="bancontact-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Stripe, Checkout.com, Airwallex, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, and NomuPay gateways can be selected here <figure><img src="/files/YsiGNDCyEQTMXTb9xaup" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#bancontact-checkoutchamp-step5-saveandcontinue" id="bancontact-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the Bancontact button <a href="#bancontact-checkoutchamp-step6-editcheckoutpagetoaddthebancontactbutton" id="bancontact-checkoutchamp-step6-editcheckoutpagetoaddthebancontactbutton"></a> <figure><img src="/files/Keafn0vHYrgAW2EStWGA" alt=""><figcaption></figcaption></figure> ### Button <a href="#bancontact-checkoutchamp-button" id="bancontact-checkoutchamp-button"></a> <figure><img src="/files/wOTHxbbd8SePv4uzfkGZ" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#bancontact-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighli" id="bancontact-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighli"></a> ### Radio <a href="#bancontact-checkoutchamp-radio" id="bancontact-checkoutchamp-radio"></a> <figure><img src="/files/UvAn89F3j7FuvwJBWKX6" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#bancontact-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="bancontact-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/OulQSzdePsuTct8sG1Tx" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to BANCONTACT (in all caps). <a href="#bancontact-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_m" id="bancontact-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_m"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#bancontact-checkoutchamp-step7-savethepage.exitthepagebuilder" id="bancontact-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/E1qi80YBBqCS1nurFky0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Bancontact button. <a href="#bancontact-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebancontactbutton" id="bancontact-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethebancontactbutton"></a> <figure><img src="/files/M4aFUy0csPKbSAvEi9o9" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#bancontact-checkoutchamp-step9-publish.youredoneandreadytotest" id="bancontact-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # BLIK {% hint style="info" %} BLIK is supported through Stripe, Mollie, and Airwallex gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add BLIK <a href="#giropay-checkoutchamp-step1-loginandnavigatetothefunneltoaddgiropay" id="giropay-checkoutchamp-step1-loginandnavigatetothefunneltoaddgiropay"></a> <figure><img src="/files/lYvRtjG64hB50AeHcjNu" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#giropay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="giropay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/oBXpFCLIVbBF54QmTXgX" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#giropay-checkoutchamp-step3-openthepaymentssection" id="giropay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/HhyokdLBTjLPyaRZY6mo" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#giropay-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="giropay-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * StripeV2, Mollie, and Airwallex gateways can be selected here <figure><img src="/files/xZZc4zFdK0dMLiqM6NgL" alt="" width="375"><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#giropay-checkoutchamp-step5-saveandcontinue" id="giropay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit the Checkout page and add the BLIK button or radio <a href="#giropay-checkoutchamp-step6-editthecheckoutpageandaddthegiropaybutton" id="giropay-checkoutchamp-step6-editthecheckoutpageandaddthegiropaybutton"></a> <figure><img src="/files/GlVpScQho7LiMCadY4RB" alt="" width="183"><figcaption></figcaption></figure> ### Button <a href="#giropay-checkoutchamp-button" id="giropay-checkoutchamp-button"></a> <figure><img src="/files/VaiLLWYm1Vcj1BvjMeMa" alt="" width="563"><figcaption></figcaption></figure> #### Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#giropay-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlight" id="giropay-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlight"></a> ### Radio <a href="#giropay-checkoutchamp-radio" id="giropay-checkoutchamp-radio"></a> <figure><img src="/files/udBiaPMkH1zJLmGfklg9" alt="" width="563"><figcaption><p>A</p></figcaption></figure> #### Add a form radio button to the page. Design this to your preference. <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> #### Select the radio button. Set the Name to “payment\_method” and Value to "BLIK". <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> <figure><img src="/files/7bSv4kX8IkFAeRws4DWf" alt="" width="297"><figcaption></figcaption></figure> #### This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“ <a href="#giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth" id="giropay-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_meth"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate conflicts. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#giropay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="giropay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZriPHZhfFUqagGCkbBVY" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the BLIK button. If using radio or checkbox then choose the standard checkout button. <a href="#giropay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegiropaybutton" id="giropay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegiropaybutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#giropay-checkoutchamp-step9-publish.youredoneandreadytotest" id="giropay-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Boleto {% hint style="info" %} Boleto is supported through Stripe V2 and Checkout V2 payment gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add Boleto to <a href="#boleto-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddboletoto" id="boleto-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddboletoto"></a> <figure><img src="/files/v9xd2pS1IfRWOjUSSBB5" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#boleto-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="boleto-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/8iXEKqN0cPEp7nX0RSE3" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#boleto-checkoutchamp-step3-openthepaymentssection" id="boleto-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/p4CepPMXA0XXqrGkFgCm" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add StripeV2 and CheckoutV2 gateway credentials <a href="#boleto-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials" id="boleto-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials"></a> * StripeV2 and CheckoutV2 gateways can be selected here <figure><img src="/files/vYtoEFKht7tL73f3P2BX" alt=""><figcaption></figcaption></figure> {% hint style="info" %} 1. Enter a **Title** to easily identify your Boleto account 2. Add the **public\_key** and **private\_key** obtained from your Boleto account 3. Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#boleto-checkoutchamp-step5-saveandcontinue" id="boleto-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Boleto button <a href="#boleto-checkoutchamp-step6-editcheckoutpageandaddboletobutton" id="boleto-checkoutchamp-step6-editcheckoutpageandaddboletobutton"></a> <figure><img src="/files/nMhaeFZ3v11L4BRqBMWe" alt=""><figcaption></figcaption></figure> ### Button <a href="#boleto-checkoutchamp-button" id="boleto-checkoutchamp-button"></a> <figure><img src="/files/DlmKDJJpxMr4qWmwToOn" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#boleto-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="boleto-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#boleto-checkoutchamp-radio" id="boleto-checkoutchamp-radio"></a> <figure><img src="/files/CS4hFppySMmatn2ps0zu" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#boleto-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="boleto-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/Efyy0OZdb0IPCGWZc1tr" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to “BOLETO“ in all caps. <a href="#boleto-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="boleto-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#boleto-checkoutchamp-step7-savethepage.exitthepagebuilder" id="boleto-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/rk38RywrlV5eBMjyJzGv" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Boleto button. <a href="#boleto-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheboletobutton" id="boleto-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheboletobutton"></a> <figure><img src="/files/mD11TgldGo4USLCtHSaC" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#boleto-checkoutchamp-step9-publish.youredoneandreadytotest" id="boleto-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # EPS {% hint style="info" %} EPS is supported through Stripe V2, Airwallex, eMerchantPay, Mollie, Worldline, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add EPS <a href="#sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort" id="sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort"></a> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> *** ### Step 3: Open the Payments section <a href="#sofort-checkoutchamp-step3-openthepaymentssection" id="sofort-checkoutchamp-step3-openthepaymentssection"></a> *** ### Step 4: Add the payment gateway on which to transact <a href="#sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Select the gateway here here *** ### Step 5: Save and Continue <a href="#sofort-checkoutchamp-step5-saveandcontinue" id="sofort-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the EPS button <a href="#sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton" id="sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton"></a> ### Button <a href="#sofort-checkoutchamp-button" id="sofort-checkoutchamp-button"></a> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#sofort-checkoutchamp-radio" id="sofort-checkoutchamp-radio"></a> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to EPS in all caps. <a href="#sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> Use either all buttons or radios for pay source selection to mitigate any conflicts *** ### Step 7: Save the page. Exit the page builder. <a href="#sofort-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sofort-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: On the arrow leaving the checkout page, choose the EPS button. <a href="#sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton" id="sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sofort-checkoutchamp-step9-publish.youredoneandreadytotest" id="sofort-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Google Pay {% hint style="danger" %} **Not all gateways support Google Pay**. Google Pay is supported on Acquired3DS, Adyen, Airwallex, Authorize.netV2, Braintree, cardstream, Celerispay, CheckoutV2, Easy Pay Direct, Fluid Pay, Fondy, Gala Technology, Merchant Warrior, NMI, NomuPay, Pay.com , Payarc, PaysafeV2, Priority, Revolve3, Solid, SquareV2, StripeV2, Surgeify, Swipen, TotalApps, Truevo, VantivV2, Whitelabel Payments, WorldlineV2, Worldpay. {% endhint %} {% hint style="warning" %} Google Pay is generally one-time use. Rebills and 1-click upsells are supported on AdyenV2, Airwallex, eMerchantPay, NMI, Stripe, CheckoutV2, and Trust Payments. Confirm with your gateway and test thoroughly before starting live traffic. {% endhint %} *** ### Step 1: Login and navigate to the funnel on which to add Google Pay <a href="#googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay" id="googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay"></a> <figure><img src="/files/jvoD14QOIaGEvZnsZy34" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open the funnel settings <a href="#googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/YrC62eUdod7DLyAPk903" alt="" width="373"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#googlepay-checkoutchamp-step3-openthepaymentssection" id="googlepay-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/N5E5xV9EOvK5T9QmqNq7" alt="" width="359"><figcaption></figcaption></figure> *** ### Step 4: Add the Google Pay credentials <a href="#googlepay-checkoutchamp-step4-addthegooglepaycredentials" id="googlepay-checkoutchamp-step4-addthegooglepaycredentials"></a> Select the **Gateway** that you want your Google Pay transactions to run to. Ensure the gateway is in the supported list at the top of this document. Please review the tooltips in the app for a detailed explanation of each credential. <figure><img src="/files/mA9fU2xyDDGbB1ugJtKl" alt="" width="375"><figcaption></figcaption></figure> **Gateway Value** can be found here <https://developers.google.com/pay/api/web/reference/request-objects#gateway> <figure><img src="/files/M0zdEYUZzzPvbiNQYQzA" alt="" width="563"><figcaption><p><strong>searching for NMI on Google's gateway list</strong></p></figcaption></figure> <figure><img src="/files/0PcSHVoEYB7KrjJLfmja" alt="" width="563"><figcaption><p><strong>searching for Stripe on Google's gateway list</strong></p></figcaption></figure> **Gateway Merchant ID** is the Merchant Id provided by your gateway (you may need to reach out to the gateway or merchant provider for this value). It is the same value found on your VAR sheet and should be the same value as entered here on your gateway configuration: <figure><img src="/files/nLNgrHRx7SCN8ydeAwYd" alt="" width="375"><figcaption></figcaption></figure> {% hint style="info" %} Stripe requires entry of a Publishable Key instead of Gateway Merchant Id. This is a long value that starts with pk\_ and is appended with your account ID. Enter pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/\[the accountId from your StripeV2 gateway in Checkout Champ - without the brackets] It should look something like this when fully entered pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/acct\_12345678 {% endhint %} {% hint style="info" %} Google documents are wrong on Fluid Pay. Gateway must be "gatewayprocessing" (without quotes) and gatewayMerchantId must be the public api key from your Fluid Pay portal. {% endhint %} **Merchant ID** is retrieved from your business console <https://pay.google.com/business/console/> Place your page in **Test Mode** to enable testing with Google. Do be sure to uncheck when testing is complete. Click [here ](#googlepay-checkoutchamp-testmodetestmode)for more details on testing. <figure><img src="/files/cd0w9Cb66q5wmB0Vhs18" alt="" width="234"><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#googlepay-checkoutchamp-step5-saveandcontinue" id="googlepay-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add Google Pay button <a href="#googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton" id="googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton"></a> You can choose a white or black Google Pay button. Do not add both to the page. The difference is color only. <figure><img src="/files/MlG1b5r6ZH2PB0foaQkp" alt="" width="183"><figcaption></figcaption></figure> <figure><img src="/files/g00vYWuinmEfcin63bZO" alt="" width="563"><figcaption></figcaption></figure> #### Step 6-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> #### Step 6-2: Alternatively Google Pay can be launched from the standard page checkout button with use of a payment radio. Drag a form radio button to the page. Set Name=payment\_method, Value=GOOGLEPAY. If the radio is selected on the live checkout page then Google Pay will launch when the page checkout button (or link) is pressed. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a> *** ### Step 7: Save the page and exit the page builder. <a href="#googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder" id="googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/PduiyJ6OqcjqPSzSeCun" alt="" width="317"><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Google Pay button for navigation. <a href="#googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation" id="googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation"></a> <figure><img src="/files/CkUMt5bFJTkK5mhTYfOX" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 9: Upsell pages <a href="#googlepay-checkoutchamp-step9-upsellpages" id="googlepay-checkoutchamp-step9-upsellpages"></a> {% hint style="info" %} There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow. {% endhint %} Option 1: **Your gateway supports a 1-click upsell on Google Pay using a payment token returned from the gateway at checkout** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have a Google Pay button on each page. The buttons will submit using the original payment token. Option 2: **Your gateway does not support Option 1. You prefer to have a generic button on the upsell page instead of a Google button.** Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Google Pay or non-Google Pay based on the checkout. Google Pay will redirect the consumer to Google to complete the upsell. No additional work is needed. Option 3: **Your gateway does not support Option 1. You prefer to have a Google button on the upsell page.** Place one or more standard buttons AND one or more Google Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Google Pay. Pressing the Google Pay buttons will redirect the consumer to Google to complete the upsell. When the live page loads the Google Pay buttons are removed if the checkout was not Google Pay. The standard buttons will submit the upsell. ### Step 10: Publish the funnel. You’re done and ready to test! <a href="#googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest" id="googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/n3FDbOCQkhfyB1UO9qbZ" alt="" width="563"><figcaption></figcaption></figure> *** ### Test Mode <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a> {% hint style="warning" %} **This section is used for Google to approve your implementation. You must uncheck the Test Mode box and enter your live Merchant ID and Merchant Name once approved.** {% endhint %} {% hint style="info" %} ***In Test Mode a transaction will not go to the gateway for approval. The transaction will automatically approve.*** {% endhint %} Full testing details can be found [here](https://developers.google.com/pay/api/android/guides/resources/test-card-suite) You may need to enable test cards on your Google Pay account. See [here](https://groups.google.com/g/googlepay-test-mode-stub-data). Follow these steps to test Google Pay on CheckoutChamp: 1. Set **Gateway, Gateway Value,** and **Gateway Merchant ID** using instructions in Step 4 2. Set **Merchant ID** to “12345678901234567890” (without the double quotes) 3. Set **Merchant Name** to “Merchant Name” (without the double quotes) 4. Select the **Test Mode** box <figure><img src="/files/o6U2SlbxsWkqTpxvlsev" alt="" width="563"><figcaption></figcaption></figure> Additional Test Mode Notes:<br> Inside of the Google Pay Business Console you will locate your "Merchant ID" After you have joined the Google Group providing access to the test cards and test addresses provided by Google, Google Pay requires the Merchant to create an Integration inside of the Google Pay business console, inside of the "Google Pay API" section. Select "Web Integration". The integration configuration will request for a few inputs. \ First it will request "Your Website", this will be your domain registered into Checkout Champ(whichever domain the Checkout Page is tied to). Second, it will ask "Your Google Pay API integration type"- Select "Gateway" Last request from Google is to supply screenshots of your buyflow/order flow. "Item Selection"- will be your Product Selection page\ "Pre-purchase Screen"- will be your Checkout Page (Important: make sure Google Pay button is visible in your screenshot) "Payment Method Screen"- will be a screenshot of the pop-up of the Google login the consumers will interact with"Google Pay API Payment Screen"- You will need to log into a Google account following selecting the "Google Pay" button on your page, this will show the Test Card Number and Test Address provided by Google, grab this as a screenshot. (Tip: Android won't allow you to take a screenshot of this screen, so take a picture of the screen using another device.) "Post-Purchase Screen"- this will be a screenshot of a Thank you page, Google requires a Google Pay mark on the thank you page in order to approve integration. Feel free to upload this supplied image if you would like: <figure><img src="/files/rBWNMiRrge2z3bgNCDAq" alt=""><figcaption></figcaption></figure> *** ### Style <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a> In the Visualizer settings under **Payments → Google Pay**, the **Button Type** setting updates the Google Pay button text according to the selected option. After selecting a button type, save and publish. <figure><img src="/files/bPrut589XAxDVeZDPEGB" alt=""><figcaption></figcaption></figure> <table><thead><tr><th width="175">Button Type</th><th>Dark</th><th>Light</th></tr></thead><tbody><tr><td>book</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>buy</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>checkout</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>donate</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>order</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>pay</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>plain</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>subscribe</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr></tbody></table> {% hint style="warning" %} The Google Pay brand name must not be translated. Don't create buttons with your own localized text. {% endhint %} {% embed url="<https://developers.google.com/pay/api/web/guides/brand-guidelines#mark>" %} # iDEAL {% hint style="info" %} iDEAL is supported through Stripe V2, Checkout.com, Adyen V2, Celeris, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, Celeris, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add iDEAL <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/kufkqs9Kd8j7aEvzBUd5" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#ideal-checkoutchamp-step3-openthepaymentssection" id="ideal-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/oFoxHqtWEvwTXKw1EkYA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Stripe V2, Checkout.com, Adyen V2, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, and NomuPay gateways can be selected here. Press the + button to add a new gateway. <figure><img src="/files/RU4XVOjFYmEIr6DVfu5U" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the iDEAL button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/juXVHcddnZAeMF4HVy2f" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> <figure><img src="/files/0Mm0AuTJq3iRpwpzXpPh" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/jIghZncW62YOg2htFuWF" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZebPiV3bykg9xeeVehL0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the iDEAL button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/pLYKez0gx88IyqCNOZr0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Klarna Klarna is supported through Klarna, Adyen V2, Airwallex, Checkout.com, Cardstream, Mollie, NomuPay, Swipen, Sotpay, Stripe V2, WithReach, and Worldpay V2 payment gateways {% hint style="info" %} SOFORT is now available through Klarna Payments. If you already offer Klarna’s alternative payment options, then you will need to activate the **pay by bank transfer** module in your Klarna payments integration. {% endhint %} {% hint style="info" %} Rebills and 1-click upsells are supported on Klarna, Adyen, and Airwallex. Stripe supports rebills for Klarna, but not 1-click upsells. The other gateways in this article do not offer those features. {% endhint %} {% hint style="warning" %} **Disclaimers:** * **No card details are stored for merchants using Klarna’s Payment Gateway** * **Customer info fields are required for Klarna payment method. Klarna does not return customer information to the page.** {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add Klarna to <a href="#klarna-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddklarnato" id="klarna-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddklarnato"></a> <figure><img src="/files/i9aOuJ0vBrVDmkQ3PYWC" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#klarna-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="klarna-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/DXY1WNaUF93s9QXDX20u" alt="" width="559"><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#klarna-checkoutchamp-step3-openthepaymentssection" id="klarna-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/FmMAZWw01xpWn5zEXlYo" alt="" width="538"><figcaption></figcaption></figure> *** ### Step 4: Add new Klarna gateway credentials <a href="#klarna-checkoutchamp-step4-addnewklarnagatewaycredentials" id="klarna-checkoutchamp-step4-addnewklarnagatewaycredentials"></a> * Klarna, Adyen V2, Airwallex, Cardstream, Checkout.com, Mollie, NomuPay, Swipen, Sotpay, Stripe V2, and Worldpay V2 gateways can be selected here <figure><img src="/files/sgmsyCq5dzsKdOHGT92Q" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/02qLGKAlHLeVb5tOBs1w" alt="" width="563"><figcaption></figcaption></figure> <br> {% hint style="info" %} 1. Enter a **Title** to easily identify your Klarna account 2. Enter the following information specific to Klarna: 3. **Region -** choose your region. Europe, North America, or Oceania. 4. **Username** - Obtained from your Klarna’s Settings > API page 5. **Password** - Obtained from your Klarna API page * You may want to create a new set of API credentials for your CRM connection. Klarna provides a dropdown to view different API Keys/store connections. 6. **Descriptor** - Obtained from your Klarna API page 7. **Mid #** - Obtained from your Klarna API page. Located before the “\_” of the username Click the green **Create Gateway** button to save your changes and create the gateway {% endhint %} {% hint style="info" %} ***For descriptor information please review the*** [***Klarna Merchant Guidelines***](https://docs.klarna.com/guidelines/merchant-assets/#payment-descriptors) ***documentation with Klarna*** {% endhint %} *** ### Step 5: Save and Continue <a href="#klarna-checkoutchamp-step5-saveandcontinue" id="klarna-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add a Klarna button <a href="#klarna-checkoutchamp-step6-editcheckoutpageandaddklarnabutton" id="klarna-checkoutchamp-step6-editcheckoutpageandaddklarnabutton"></a> <figure><img src="/files/ysrhFk5k7akHh1T1eEj5" alt="" width="122"><figcaption></figcaption></figure> ### Button <a href="#klarna-checkoutchamp-button" id="klarna-checkoutchamp-button"></a> <figure><img src="/files/2IbHV4UgI60ZZvrbUhPX" alt="" width="563"><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#klarna-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="klarna-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/WerXZYbUmeg5pAJC1HVu" alt="" width="563"><figcaption></figcaption></figure> *** ### Radio <a href="#klarna-checkoutchamp-radio" id="klarna-checkoutchamp-radio"></a> If you would prefer to have users checkout using the main checkout button, rather than the individual Klarna button, you can use the “payment\_method” radio button. <figure><img src="/files/ZurIgJF0pZfr1yKiEvNg" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#klarna-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="klarna-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/UXzWEOMSq2bSSzrvk1Pt" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#klarna-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="klarna-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#klarna-checkoutchamp-step7-savethepage.exitthepagebuilder" id="klarna-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/HNOcScW2hIsBSxVzZVbY" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Klarna button. <a href="#klarna-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheklarnabutton" id="klarna-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheklarnabutton"></a> <figure><img src="/files/hMrmS4KBrg8meVYkkOkk" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#klarna-checkoutchamp-step9-publish.youredoneandreadytotest" id="klarna-checkoutchamp-step9-publish.youredoneandreadytotest"></a> <figure><img src="/files/hHrngRYiCKjxr9ZMSF1N" alt="" width="563"><figcaption></figcaption></figure> # Link by Stripe Link autofills your customers’ payment information to create an easy and secure checkout experience. {% hint style="success" %} Link enables customers to save their preferred payment methods to their account and access those credentials at any of the hundreds of thousands of Link-enabled businesses. For your business, this means a fast, streamlined, and better-converting checkout experience. {% endhint %} {% hint style="info" %} <https://stripe.com/payments/link> {% endhint %} {% hint style="info" %} This document is for CheckoutChamp hosted pages. If you need to integrate Link on your own hosted pages, install Link onto your checkout page using Stripe instructions and include the following parameters on the [Import Order API](https://apidocs.checkoutchamp.com/#275a54c6-b4b0-414c-819b-7387e9a81f58) call: * prepaidType = STRIPE\_LINK * paySource = PREPAID * forceMerchantId = the Stripe gatewayId in CheckoutChamp * formCardNonce = the Link payment method id {% endhint %} ## Gateway Setup Configure a standard [Stripe gateway](/crm/gateway-setup/gateway-integrations/stripe) ## Funnel Setup Go to any funnel. Settings > Payments > Alternate Payment Methods. Choose the Stripe gateway for Link. Save. <figure><img src="/files/pVGVzmR1GELvhH1nEwny" alt="" width="563"><figcaption></figcaption></figure> ## Checkout Page Setup There are 2 options for checkout page design. Explore carefully to choose the best option for you. Link requires customization of the checkout page. Choose one of our Link checkout page templates to obtain these customizations automatically. Make the modifications manually on all other checkout pages. If Link is not working as expected then first verify each of these requirements is in place on the page. ### Option 1: Stripe is the only card checkout on the page Link can process direct credit cards using its standard web components which are displayed on page load. {% hint style="warning" %} This option is compatible with other payment providers, such as PayPal and Apple Pay, that do not require address entry on the page. Any provider that requires address entry on the page is not compatible with this option. Consider Option 2 below. {% endhint %} 1. Edit a checkout page 2. Drag a Box element onto the page. Give it class **cc-stripe-link-email**. This element replaces the standard email address input. Remove any other email inputs on the page. 3. Remove phone number input from the page 4. Remove all shipping address inputs from the page. Add a Box element in place of shipping inputs. Give it class **cc-stripe-link-shipping**. 5. Remove all billing address inputs from the page. Add a Box element in place of billing inputs. Give it class **cc-stripe-link-billing**. 6. Remove card inputs, payment option elements and all payment buttons on the page. Add a Box element on page in place of card inputs. Give it class **cc-stripe-link-payment**. 7. Replace the standard checkout Submit button with the Link payment button. You may drag on a new Link payment button or simply go to the existing button Settings and change Type to Link. In either case, add the class "cc-stripe-link-submit" to the Link button. 8. Save 9. Exit the page builder 10. On the arrow leaving the checkout page, choose the Link payment button 11. Publish the funnel ### Option 2: Allow card checkouts on non-Stripe gateways If you choose to process direct credit card payments with non-Stripe gateways then Link becomes a checkout option for the consumer. This is similar to Klarna, Apple Pay, Google Pay, etc. This option involves an extra button click for the consumer to choose Link. {% hint style="warning" %} This option is compatible with all other payment providers {% endhint %} {% hint style="warning" %} This option is compatible with PayPal Fastlane. Add the proper classes as defined in Option 2 of [Fastlane instructions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/paypal/fastlane). Some elements will have both Fastlane and Link classes. {% endhint %} 1. Edit a checkout page 2. Place a Link button on the checkout page. Go to Blocks > Buttons > drag Link to the page. 3. Drag a standard button onto the page near the Link button. Add class **cc-stripe-link-cancel** to the button. This button is used to cancel Link checkout. 4. Place a Box element on top of the page near the email address input . Give it class **cc-stripe-link-email**. 5. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-shipping** to the box. 6. Find the billing address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-billing** to the box. 7. Find the card inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-stripe-link-payment** to the box. 8. Add class **cc-stripe-link-hide** to the parent element of email address input, phone number input, shipping inputs, billing inputs, all other payment options and buttons, and any **billShipSame** checkbox. This may be multiple parent elements. Add the class to each. Do not add the class to the parent of the main checkout button or link. 9. Save 10. Exit the page builder 11. On the arrow leaving the checkout page, choose the the standard checkout Submit button 12. Publish the funnel # MobilePay {% hint style="info" %} MobilePay is supported through Stripe V2 and Adyen V2 gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add MobilePay <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings > Payments <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/blYDuC7TrdUMjw7Sif5c" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 3: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Choose the gateway for MobilePay. Press the + button to add a new gateway. <figure><img src="/files/ELxyrVX2AUHKVMwKSniR" alt="" width="563"><figcaption></figcaption></figure> *** ### Step 4: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 5: Edit Checkout page to add the MobilePay button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/XiUx6BuhJJGkEi9kvwnm" alt="" width="563"><figcaption></figcaption></figure> #### Customize button size by clicking on the button and dragging the highlighted corners or use the Settings tab for advanced edits. On the Settings tab, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> #### Add a form radio button to the page. Design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Select the radio button and set Name = payment\_method. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Set the Value of the radio button to MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> <figure><img src="/files/fPQqkilzImzBpva7AI6h" alt=""><figcaption></figcaption></figure> #### <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 6: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 7: On the arrow leaving the checkout page, choose the MobilePay button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/Wbkqp3FbyuUgLoYyAns5" alt=""><figcaption></figcaption></figure> *** ### Step 8: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # P24 {% hint style="info" %} P24 is supported through Stripe V2, Checkout.com, Adyen V2, Airwallex, eMerchantPay, Mollie, Swipen, Trust Payments, Worldpay, Worldline, Gala Technology, Global Payments, Cardstream, and NomuPay gateways {% endhint %} ### Step 1: Login and navigate to the funnel to add P24 <a href="#p24-checkoutchamp-step1-loginandnavigatetothefunneltoaddp24" id="p24-checkoutchamp-step1-loginandnavigatetothefunneltoaddp24"></a> <figure><img src="/files/AQsdDih2FAqvnMhwQxbs" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#p24-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="p24-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/N4GUt1x0lG1hkAeVbRmC" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#p24-checkoutchamp-step3-openthepaymentssection" id="p24-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/LgJdijl9cx2889o28qO7" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#p24-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="p24-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * StripeV2, CheckoutV2, Airwallex, eMerchantPay, Swipen, Trust Payments, Worldpay, Worldline, Cardstream, and NomuPay gateways can be selected here <figure><img src="/files/P6M335qDReabO4L6l6X9" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#p24-checkoutchamp-step5-saveandcontinue" id="p24-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add a P24button <a href="#p24-checkoutchamp-step6-editcheckoutpagetoaddthep24button" id="p24-checkoutchamp-step6-editcheckoutpagetoaddthep24button"></a> <figure><img src="/files/uKEKEKyM07ShZS1z9hTk" alt=""><figcaption></figcaption></figure> ### Button <a href="#p24-checkoutchamp-button" id="p24-checkoutchamp-button"></a> <figure><img src="/files/frtyrSLfeK1ogzf1kqKH" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#p24-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedco" id="p24-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedco"></a> ### Radio <a href="#p24-checkoutchamp-radio" id="p24-checkoutchamp-radio"></a> <figure><img src="/files/1Jhm98nYke6FLdlP1gem" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#p24-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="p24-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/IaB8mwmzdl9M6rZ6V6Xp" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#p24-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="p24-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#p24-checkoutchamp-step7-savethepage.exitthepagebuilder" id="p24-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/usY3JQ9VCKHTAsn5jZPA" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the P24 button. <a href="#p24-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethep24button" id="p24-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethep24button"></a> <figure><img src="/files/XSoGCeN7nvPGPlCREifm" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#p24-checkoutchamp-step9-publish.youredoneandreadytotest" id="p24-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # PayPal {% hint style="danger" %} **Authorization trials (such as Hold Trial Charge, Authorize and Void, etc.) are not supported through PayPal Seamless Checkout** {% endhint %} {% hint style="warning" %} **“Security error: Security header is not valid” means you are using sandbox credentials against the live PayPal endpoint.** {% endhint %} {% hint style="info" %} If you are wanting to integrate PayPal on the WithReach gateway, see [here](/crm/gateway-setup/gateway-integrations/withreach) {% endhint %} {% hint style="info" %} Before beginning these steps you must [register your PayPal account](/crm/gateway-setup/gateway-integrations/paypal-commerce-checkout) {% endhint %} ### Step 1: Login and navigate to the funnel on which to add PayPal <a href="#paypalseamlesscheckout-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddpaypal" id="paypalseamlesscheckout-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddpaypal"></a> <figure><img src="/files/Xy0dnkJWG4Nll7kHJ3ZX" alt=""><figcaption></figcaption></figure> *** ### Step 2:Click the Settings button on the top left to open the funnel settings <a href="#paypalseamlesscheckout-checkoutchamp-step2-clickthesettingsbuttononthetoplefttoopenthefunnelsettings" id="paypalseamlesscheckout-checkoutchamp-step2-clickthesettingsbuttononthetoplefttoopenthefunnelsettings"></a> <figure><img src="/files/w8lO2UlH9lYM3KmBVdYi" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#paypalseamlesscheckout-checkoutchamp-step3-openthepaymentssection" id="paypalseamlesscheckout-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/GzxODMwfDwoRP40Z8j9E" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add a new PayPal gateway or select an existing PayPal gateway <a href="#paypalseamlesscheckout-checkoutchamp-step4-addanewpaypalgatewayorselectanexistingpaypalgateway" id="paypalseamlesscheckout-checkoutchamp-step4-addanewpaypalgatewayorselectanexistingpaypalgateway"></a> *Note: you can also select a WithReach gateway here. FraudNet, Venmo, and Pay Later are not valid on WithReach.* <figure><img src="/files/MpZq2DCglGaErsWVbLuE" alt="" width="563"><figcaption></figcaption></figure> When checked, the Venmo and Buy Now Pay Later buttons automatically appear alongside the PayPal button. {% hint style="info" %} Note: Using the Venmo and Pay Later options require the use of the Pay Pal button. These options will not display when using the Radio “payment\_method” alternative. {% endhint %} {% hint style="danger" %} If using PayPal's SDK the page currency will be sent, please make sure you have 'Send To Gateway' enabled for those currencies in the campaign. (Venmo, Pay Later, Fastlane) {% endhint %} #### Step 4-1: Adding New PayPal account <a href="#paypalseamlesscheckout-checkoutchamp-step4-1-addingnewpaypalaccount" id="paypalseamlesscheckout-checkoutchamp-step4-1-addingnewpaypalaccount"></a> <figure><img src="/files/mO0wCa35DtKMbTK9ZAx0" alt=""><figcaption></figcaption></figure> Enter a **Title** and optionally add **brandName**.<br> {% hint style="info" %} **secure3DS** - Choose this option if accepting credit cards through PayPal and are in need of 3D Secure protection (Strong Customer Authentication) **force3DS** - Check this box to require 3D Secure on all credit card payments. An unchecked box will use 3D Secure only when the issuing bank requires it. **useTestServer** - use sandbox credentials to test the integration. Be sure this is unchecked for live processing. Using sandbox credentials on a live account will result in an error reading “Client Authentication failed”. See [here ](/crm/gateway-setup/gateway-integrations/paypal-commerce-checkout#paypalcommercecheckout-testserverusingthetestserver)for more details. **guestCheckout** - Will redirect the customer to PayPal’s guest checkout page instead of the PayPal login page **referenceTransactions** - Required if using PayPal for upsells and/or recurring billings **sendFulfillmentTrackingNumber** - Send the tracking numbers for orders to PayPal **skipAddressNonShippable** - If there are only digital products on an order then do not require selection of a delivery address at PayPal {% endhint %} Click “Save & Continue” when you are finished with the PayPal configuration. *** ### Step 5: Save and Continue <a href="#paypalseamlesscheckout-checkoutchamp-step5-saveandcontinue" id="paypalseamlesscheckout-checkoutchamp-step5-saveandcontinue"></a> {% hint style="info" %} Before saving, consider if you need to use Venmo, Pay Later, or FraudNet. Check the appropriate box as needed. Venmo and Pay Later are supported only when **referenceTransactions** is disabled OR **referenceTransactions** and **vaultEnabled** are both enabled. You cannot choose different payment types for checkout and upsells. For example, if a checkout is done on Venmo then the upsell must also be on Venmo. Rebills are supported on Venmo when **referenceTransactions** and **vaultEnabled** are both enabled. Rebills are never supported on Pay Later. {% endhint %} <figure><img src="/files/7oN3OjbEPAkkcTma64xX" alt=""><figcaption></figcaption></figure> *** ### Step 6: Edit Checkout page and add PayPal button <a href="#paypalseamlesscheckout-checkoutchamp-step6-editcheckoutpageandaddpaypalbutton" id="paypalseamlesscheckout-checkoutchamp-step6-editcheckoutpageandaddpaypalbutton"></a> There are 2 PayPal buttons from which to choose. The difference is style only. You can add multiple PayPal buttons to a page. <figure><img src="/files/3YMsSEpJedu1CdHwYFu3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/MlxOWJF6VdWCIMyLs3In" alt=""><figcaption></figcaption></figure> **Step 6-1(button)**: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <figure><img src="/files/R2N8P8y9iaAQEHrnhRSM" alt=""><figcaption></figcaption></figure> *** ### Radio <a href="#paypalseamlesscheckout-checkoutchamp-radio" id="paypalseamlesscheckout-checkoutchamp-radio"></a> <figure><img src="/files/ILx7SKMJlKA7gnSAbCby" alt=""><figcaption></figcaption></figure> **Step 6-1(radio)**: Add a radio button to the page. You may design this to your preference. <figure><img src="/files/KFHMMJBPMm7dCSYYA5Nh" alt=""><figcaption></figcaption></figure> **Step 6-2(radio)**: Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps (CREDITCARD, PAYPAL, etc). {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page and exit the page builder <a href="#paypalseamlesscheckout-checkoutchamp-step7-savethepageandexitthepagebuilder" id="paypalseamlesscheckout-checkoutchamp-step7-savethepageandexitthepagebuilder"></a> <figure><img src="/files/ZXEqfDkbGRmM1pZk99uv" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the PayPal button(s) for navigation. <a href="#paypalseamlesscheckout-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethepaypalbutton-s" id="paypalseamlesscheckout-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethepaypalbutton-s"></a> <figure><img src="/files/QgQug0r2U3ofoWNKoYa4" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish the funnel. You’re done and ready to test! <a href="#paypalseamlesscheckout-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest" id="paypalseamlesscheckout-checkoutchamp-step9-publishthefunnel.youredoneandreadytotest"></a> <figure><img src="/files/PGTIRZ8Z1cm63Jhh90Nj" alt=""><figcaption></figcaption></figure> *** ### Recurring Billing without Reference Transactions enabled <a href="#paypalseamlesscheckout-checkoutchamp-recurringbillingwithoutreferencetransactionsenabled" id="paypalseamlesscheckout-checkoutchamp-recurringbillingwithoutreferencetransactionsenabled"></a> {% hint style="warning" %} #### Unfortunately, it is not possible to do recurring billings with PayPal if you cannot enable Reference Transactions on your PayPal account. Contact PayPal to have Reference Transactions enabled. <a href="#paypalseamlesscheckout-checkoutchamp-unfortunately-itisnotpossibletodorecurringbillingswithpaypalify" id="paypalseamlesscheckout-checkoutchamp-unfortunately-itisnotpossibletodorecurringbillingswithpaypalify"></a> {% endhint %} *** ### Upsells without Reference Transactions enabled <a href="#paypalseamlesscheckout-checkoutchamp-upsellswithoutreferencetransactionsenabled" id="paypalseamlesscheckout-checkoutchamp-upsellswithoutreferencetransactionsenabled"></a> If Reference Transactions is not enabled on your PayPal account, you can still use PayPal for upsells by redirecting the customer back to PayPal for each upsell. CheckoutChamp knows if the customer paid with a credit card or PayPal on the initial sale and will process with the same payment method on the upsell pages. This means you don’t need to design your upsell pages any differently than they already are. Using your existing “Yes” button on the upsell pages, a PayPal customer will redirect to PayPal if the PayPal gateway added into CheckoutChamp does not have Reference Transactions enabled. # Fastlane Enter your payment details once. Then checkout with just a click wherever Fastlane is available. {% embed url="<https://www.paypal.com/us/fastlane>" %} <figure><img src="/files/Ho7FcPykERcoRzhrsBPf" alt=""><figcaption></figcaption></figure> ## PayPal Commerce Setup Go to funnel Settings > Merchant Accounts > choose the PayPal Commerce account. Enable **referenceTransactions**. Verify that **vaultEnabled** is enabled. These 2 options are required for Fastlane. {% hint style="info" %} Fastlane is available for US customers only. {% endhint %} {% hint style="warning" %} Reference transactions must also be enabled on your PayPal account. Please confirm with PayPal if this is unknown. {% endhint %} ## Funnel Setup Go to any funnel. Settings > Payments > PayPal. Choose the PayPal Commerce gateway and enable Fastlane. Fastlane is compatible with the other PayPal setup options. Save. <figure><img src="/files/B9jjZqERoGlsb0FhDnBo" alt="" width="375"><figcaption></figcaption></figure> ## Checkout Page Setup There are 2 options for checkout page design. Explore carefully to choose the best option for you. Fastlane requires customization of the checkout page. Choose one of our Fastlane checkout page templates to obtain these customizations automatically. Make the modifications manually on all other checkout pages. If Fastlane is not working as expected then first verify each of these requirements is in place on the page. ### Option 1: PayPal is the only card checkout on the page PayPal can process direct credit cards in addition to venmo, pay later, and standard PayPal. If you use the PayPal gateway for direct credit card payments then you can save your customers an extra click with Fastlane. The Email Address input will be open for Fastlane on page load. {% hint style="warning" %} This option is compatible with other payment providers, such as Apple Pay, that do not require address entry on the page. Any provider that requires address entry on the page is not compatible with this option. Consider Option 2 below. {% endhint %} 1. Place the Email Address input near the top of the page. This should come before address and phone. 2. Drag a Box element onto the page below Email Address. Set id=**cc-fastlane-watermark**. This element is used to show the Fastlane messaging. 3. ``` <figure><img src="/files/gMeAHAQcwZbG5kZpF9C5" alt="" width="375"><figcaption></figcaption></figure> ``` 4. Drag a standard button onto the page. Give it class **cc-fastlane-profile**. This button should be near Email Address. This button is used to trigger email lookup at Fastlane. 5. ``` <figure><img src="/files/NmuSlNDmXPTSyA5ZutFE" alt="" width="375"><figcaption></figcaption></figure> ``` 6. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Give the box class **cc-fastlane-shipping**. 7. ``` <figure><img src="/files/czQr0a4RJ9dpNeM5MaWA" alt="" width="375"><figcaption></figcaption></figure> ``` 8. Add class **cc-fastlane-member-hide** to the parent element of shipping inputs, billing inputs, and any billShipSame checkbox. This is likely to be multiple elements. Add the class to each. 9. ``` <figure><img src="/files/h4b6UdxNqlWdqrtzAA5v" alt="" width="375"><figcaption></figcaption></figure> ``` 10. Remove any card inputs from the page (cardNumber, expiry month, and cardSecurityCode) 11. Drag a Box element onto the page where the card inputs previously existed. Set id=**cc-fastlane-payment**. 12. ``` <figure><img src="/files/hgk06IQPv1CP7iVJ94uj" alt="" width="375"><figcaption></figcaption></figure> ``` 13. Find the Checkout button on the page. Add class **cc-fastlane-submit** to the button. 14. ``` <figure><img src="/files/LalGeHGOKejxFRdGO5Ow" alt="" width="375"><figcaption></figcaption></figure> ``` 15. Save 16. Exit the page builder 17. Publish the funnel ### Option 2: Allow card checkouts on non-PayPal gateways If you choose to process direct credit card payments with non-PayPal gateways then Fastlane becomes a checkout option for the consumer. This is similar to Klarna, Apple Pay, Google Pay, etc. This option involves an extra button click for the consumer to choose Fastlane. {% hint style="warning" %} This option is compatible with all other payment providers {% endhint %} {% hint style="warning" %} This option is compatible with Stripe Link. Add the proper classes as defined in Option 2 of [Link instructions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/link-by-stripe). Some elements will have both Fastlane and Link classes. {% endhint %} 1. Place a Fastlane button on the checkout page. Go to Blocks > Buttons > drag Fastlane to the page. 2. Place the Email Address input near the top of the page. This should come before address and phone. 3. Drag a Box element onto the page below Email Address. Set id=**cc-fastlane-watermark**. This element is used to show the Fastlane messaging. 4. ``` <figure><img src="/files/q90PA1ZxR0OdILVnO7Gi" alt="" width="375"><figcaption></figcaption></figure> ``` 5. Drag a standard button onto the page. Add class **cc-fastlane-profile** to the button. This button should be near Email Address. This button is used to trigger profile lookup at Fastlane once email is entered on the page. 6. ``` <figure><img src="/files/7T7L3wbBNVHf8jMqyDrO" alt="" width="375"><figcaption></figcaption></figure> ``` 7. Drag a second standard button onto the page. Add class **cc-fastlane-cancel** to the button. This button should be near Email Address and the button in step 4. This button is used to cancel Fastlane checkout. 8. Find the shipping address inputs on the page. Find the parent element to those inputs. Drag a Box element onto the page just above the parent element (not inside the parent element). Add class **cc-fastlane-shipping** to the box. 9. Add class **cc-fastlane-member-hide** to the parent of shipping inputs, billing inputs, and any billShipSame checkbox. This may be multiple elements. Add the class to each. 10. Clone (duplicate) the credit card payment option element 11. Set radio value to "PAYPAL\_FASTLANE" for the cloned element 12. Add class **cc-fastlane-show** to the cloned element 13. Remove any card inputs from the cloned element (cardNumber, expiry month, and cardSecurityCode) 14. Drag a Box element inside the cloned element where the card inputs previously existed. Set id=**cc-fastlane-payment**. 15. ``` <figure><img src="/files/vCmJZ7NtLf52EYX8kFC7" alt="" width="375"><figcaption></figcaption></figure> ``` 16. Save 17. Exit the page builder 18. On the arrow leaving the checkout page, choose the button suffixed with "-PAYPAL\_FASTLANE" to route the Fastlane checkout. 19. Publish the funnel # SEPA {% hint style="info" %} SEPA is supported through Global Payments, StripeV2, AdyenV2, Airwallex, Mollie, Trust Payments, Worldline, Worldpay, Celeris, and CheckoutV2 payment gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel you’d like to add SEPA to <a href="#sepa-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddsepato" id="sepa-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddsepato"></a> <figure><img src="/files/Qmr4FdhcF4KjeL55dZCE" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sepa-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sepa-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/f29KkQa3o8aI6pG0nXZ4" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#sepa-checkoutchamp-step3-openthepaymentssection" id="sepa-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/JRNkTdA4AVaf9CqOehZL" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add the payment gateway on which to transact <a href="#sepa-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials" id="sepa-checkoutchamp-step4-addstripev2andcheckoutv2gatewaycredentials"></a> * Global Payments, StripeV2, AdyenV2, Airwallex, Trust Payments, Worldline, Worldpay, and CheckoutV2 gateways can be selected here <figure><img src="/files/IAWeayytJoFmfGbaNQvb" alt=""><figcaption></figcaption></figure> {% hint style="info" %} 1. Enter a **Title** to easily identify your SEPA account 2. Add the **public\_key** and **private\_key** obtained from your SEPA account 3. Add account **Limits**, **Descriptor,** and **Mid #** {% endhint %} *** ### Step 5: Save and Continue <a href="#sepa-checkoutchamp-step5-saveandcontinue" id="sepa-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add a SEPA button <a href="#sepa-checkoutchamp-step6-editcheckoutpageandaddsepabutton" id="sepa-checkoutchamp-step6-editcheckoutpageandaddsepabutton"></a> <figure><img src="/files/VL6EkFY43Q1odTgQhY74" alt=""><figcaption></figcaption></figure> ### Button <a href="#sepa-checkoutchamp-button" id="sepa-checkoutchamp-button"></a> <figure><img src="/files/XTfatwJAt7kmvXrrWZ8P" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sepa-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedc" id="sepa-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedc"></a> ### Radio <a href="#sepa-checkoutchamp-radio" id="sepa-checkoutchamp-radio"></a> <figure><img src="/files/B1ZKijSm7ClhHBGAO4UC" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sepa-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sepa-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/JCGUk8WFSS2rgbzUK3wp" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to “SEPA\_DEBIT“ in all caps. <a href="#sepa-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="sepa-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#sepa-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sepa-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/erNqNsr0RBOtLJDpAj1t" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the SEPA button. <a href="#sepa-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesepabutton" id="sepa-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesepabutton"></a> <figure><img src="/files/y2Scr2mhNxtFOoN7XKxp" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sepa-checkoutchamp-step9-publish.youredoneandreadytotest" id="sepa-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} SEPA payments require the customer pass their IBAN number * Choose the building blocks and navigate to Forms <figure><img src="/files/CM6r3IszVRKOQV8toUev" alt=""><figcaption></figcaption></figure> * Drag an Input around the SEPA button and set it to IBAN <figure><img src="/files/6KCsdhgih17lK8Un8dWE" alt=""><figcaption></figcaption></figure> # Sezzle ### Step 1: Login and navigate to the funnel on which to add Sezzle <a href="#sezzle-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddsezzle" id="sezzle-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddsezzle"></a> <figure><img src="/files/EveDVuoQ4JxSEYfZTRES" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sezzle-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sezzle-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/G92J2jLcjGagOFLaERLP" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#sezzle-checkoutchamp-step3-openthepaymentssection" id="sezzle-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/JcY5LuP0WW7tG2UijZln" alt=""><figcaption></figcaption></figure> *** ### Step 4: Add new Sezzle gateway credentials <a href="#sezzle-checkoutchamp-step4-addnewsezzlegatewaycredentials" id="sezzle-checkoutchamp-step4-addnewsezzlegatewaycredentials"></a> <figure><img src="/files/6vWc2iWzbSiZZRVL8zwV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ygLZukUvZcxSG22dQwii" alt=""><figcaption></figcaption></figure> Enter a **Gateway Title** to easily identify the Sezzle account. Then add the **public\_key** and **private\_key** obtained from your Sezzle account. Add **Limits** and also the **Merchant Descriptor** and **Mid #** *** ### Step 5: Save and Continue <a href="#sezzle-checkoutchamp-step5-saveandcontinue" id="sezzle-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page and add the Sezzle button <a href="#sezzle-checkoutchamp-step6-editcheckoutpageandaddthesezzlebutton" id="sezzle-checkoutchamp-step6-editcheckoutpageandaddthesezzlebutton"></a> <figure><img src="/files/tsRL3ZIRJcPtaY5NKl4f" alt=""><figcaption></figcaption></figure> ### Button <a href="#sezzle-checkoutchamp-button" id="sezzle-checkoutchamp-button"></a> <figure><img src="/files/OLg8dtsBsqLI60e0w4bZ" alt=""><figcaption></figcaption></figure> #### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sezzle-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="sezzle-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a> <figure><img src="/files/kZLlp7SI3koLhFQ6H20H" alt=""><figcaption></figcaption></figure> ### Radio <a href="#sezzle-checkoutchamp-radio" id="sezzle-checkoutchamp-radio"></a> <figure><img src="/files/mkaRug1ibqB3KeTcYx1a" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sezzle-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sezzle-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/oeokxwem6vr5K9w9biYn" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#sezzle-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sezzle-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection to mitigate any conflicts {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#sezzle-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sezzle-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/Wz3rqXeQLi9RyrnfGQU7" alt=""><figcaption></figcaption></figure> *** ### Step 8: Choose the Sezzle button on the arrow leaving the checkout page. <a href="#sezzle-checkoutchamp-step8-choosethesezzlebuttononthearrowleavingthecheckoutpage" id="sezzle-checkoutchamp-step8-choosethesezzlebuttononthearrowleavingthecheckoutpage"></a> <figure><img src="/files/qAGX81ftrnbNGnObuWmR" alt=""><figcaption></figcaption></figure> ### Step 9: Publish. You’re done and ready to test! <a href="#sezzle-checkoutchamp-step9-publish.youredoneandreadytotest" id="sezzle-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # Swish {% hint style="info" %} Swish is supported through Stripe V2, Mollie, Swipen, Cardstream, and NomuPay gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add Swish <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a> <figure><img src="/files/icw538AMaVDwmieesHws" alt=""><figcaption></figcaption></figure> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="ideal-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> <figure><img src="/files/kufkqs9Kd8j7aEvzBUd5" alt=""><figcaption></figcaption></figure> *** ### Step 3: Open the Payments section <a href="#ideal-checkoutchamp-step3-openthepaymentssection" id="ideal-checkoutchamp-step3-openthepaymentssection"></a> <figure><img src="/files/oFoxHqtWEvwTXKw1EkYA" alt=""><figcaption></figcaption></figure> *** ### Step 4: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a> * Stripe V2, Swipen, Cardstream, and NomuPay gateways can be selected here. Press the + button to add a new gateway. <figure><img src="/files/RU4XVOjFYmEIr6DVfu5U" alt=""><figcaption></figcaption></figure> *** ### Step 5: Save and Continue <a href="#ideal-checkoutchamp-step5-saveandcontinue" id="ideal-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the Swish button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a> <figure><img src="/files/Nl7L5fMnBDcPQp7XFqHu" alt=""><figcaption></figcaption></figure> ### Button <a href="#ideal-checkoutchamp-button" id="ideal-checkoutchamp-button"></a> <figure><img src="/files/juXVHcddnZAeMF4HVy2f" alt=""><figcaption></figcaption></figure> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a> ### Radio <a href="#ideal-checkoutchamp-radio" id="ideal-checkoutchamp-radio"></a> <figure><img src="/files/0Mm0AuTJq3iRpwpzXpPh" alt=""><figcaption></figcaption></figure> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> <figure><img src="/files/jIghZncW62YOg2htFuWF" alt=""><figcaption></figcaption></figure> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to SWISH (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a> {% hint style="warning" %} Use either all buttons or radios for pay source selection. Do not mix the method on the page. {% endhint %} *** ### Step 7: Save the page. Exit the page builder. <a href="#ideal-checkoutchamp-step7-savethepage.exitthepagebuilder" id="ideal-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> <figure><img src="/files/ZebPiV3bykg9xeeVehL0" alt=""><figcaption></figcaption></figure> *** ### Step 8: On the arrow leaving the checkout page, choose the Swish button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a> <figure><img src="/files/pLYKez0gx88IyqCNOZr0" alt=""><figcaption></figcaption></figure> *** ### Step 9: Publish. You’re done and ready to test! <a href="#ideal-checkoutchamp-step9-publish.youredoneandreadytotest" id="ideal-checkoutchamp-step9-publish.youredoneandreadytotest"></a> {% hint style="warning" %} Customer info fields are required for this alternate payment method. {% endhint %} # TWINT {% hint style="info" %} TWINT is supported through the Stripe V2 and Mollie gateways {% endhint %} *** ### Step 1: Login and navigate to the funnel to add TWINT <a href="#sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort" id="sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort"></a> *** ### Step 2: Click the gear button on the top left to open Settings <a href="#sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="sofort-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a> *** ### Step 3: Open the Payments section <a href="#sofort-checkoutchamp-step3-openthepaymentssection" id="sofort-checkoutchamp-step3-openthepaymentssection"></a> *** ### Step 4: Add the payment gateway on which to transact <a href="#sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a> * Stripe V2 gateways can be selected here *** ### Step 5: Save and Continue <a href="#sofort-checkoutchamp-step5-saveandcontinue" id="sofort-checkoutchamp-step5-saveandcontinue"></a> *** ### Step 6: Edit Checkout page to add the TWINT button <a href="#sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton" id="sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton"></a> ### Button <a href="#sofort-checkoutchamp-button" id="sofort-checkoutchamp-button"></a> #### Step 6-1(button): Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a> ### Radio <a href="#sofort-checkoutchamp-radio" id="sofort-checkoutchamp-radio"></a> #### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a> #### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to TWINT in all caps. <a href="#sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a> Use either all buttons or radios for pay source selection to mitigate any conflicts *** ### Step 7: Save the page. Exit the page builder. <a href="#sofort-checkoutchamp-step7-savethepage.exitthepagebuilder" id="sofort-checkoutchamp-step7-savethepage.exitthepagebuilder"></a> *** ### Step 8: On the arrow leaving the checkout page, choose the TWINT button. <a href="#sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton" id="sofort-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethesofortbutton"></a> *** ### Step 9: Publish. You’re done and ready to test! <a href="#sofort-checkoutchamp-step9-publish.youredoneandreadytotest" id="sofort-checkoutchamp-step9-publish.youredoneandreadytotest"></a> Customer info fields are required for this alternate payment method. # Social Proof Go to funnel Settings and select **Social Proof**. Social Proof displays up to 50 recent orders on checkout pages or lead pages in reverse chronological order, so that visitors can see the most recent buyers and their products. This can help increase conversions and trust among potential customers. The selection criteria are: * funnel campaign * past 7 days * no test cards * status Complete orders only (cancelled and refunded orders are excluded) * from the same country as current checkout country. If country is changed on the checkout page then orders will be fetched anew. Choose to **Enable Social Proof**. Set the remaining configuration options as desired. Your configuration is displayed on the left side. Press Save & Continue when finished. Social Proof displays on checkout pages with a Country or Ship Country element. Social Proof can also display on lead pages. Scroll to the bottom of the configuration options to enable lead pages. {% hint style="warning" %} Be sure to Publish your funnel for these changes to take effect. {% endhint %} <figure><img src="/files/6oydffqeIqlWMUBi5w3m" alt=""><figcaption></figcaption></figure> # Order Perks Deliver relevant low-friction perks to customers for making a purchase Order Perks displays additional offers to your customers on Thank You pages. The offers are targeted based on behavior, context, and preferences. This can be an easy source for increased revenue. Revenue is generated for every customer that clicks. Additional revenue is generated for every customer that purchases. The revenue varies based on the market value of the perk offered, but a reasonable estimate is $0.30-0.35 per click. This revenue is given directly as a credit on your Checkout Champ subscription each month. Go to funnel Settings and select **Order Perks.** Choose to **Enable Order Perks**. Set the remaining configuration and style options as desired. Read all the tooltips for additional information. Your configuration is displayed on the left side. Press Save & Continue when finished. **Order Perks** displays on Thank You pages after completed orders. **Order Perks** does not display in preview mode or for test cards. {% hint style="warning" %} Be sure to Publish your funnel for these changes to take effect {% endhint %} <figure><img src="/files/DTtngjOKOfYHaJQ0cdx1" alt="" width="563"><figcaption></figcaption></figure> # Maintenance This menu option hosts Maintenance utilities for your funnel * [SEO](#maintenance-seo) * [Upload Files](#maintenance-uploadfiles) *** ### SEO <a href="#maintenance-seo" id="maintenance-seo"></a> CheckoutChamp will automatically place search engine tags in the head of the default page in your funnel. This is placed only on the default page. This makes it easy to have your page crawled by search engines. It is then your responsibility to optimize your page content for SEO. CheckoutChamp adds OpenGraph and Twitter meta tags to the page head. 1. Edit your checkout funnel 2. Go to **Settings > Maintenance** 3. Choose to allow search engines to crawl your pages 4. **Page Title** - enter a title to be displayed in search engine results. This value defaults to the funnel title. 5. **Description** - enter a short page description to be displayed in search engine results. 6. **Feature Image** - select an image that will show on social media search results 7. Close the Maintenance window 8. Edit the default page in the funnel 9. Save the page (you do not have to make any changes to the page) and exit the page builder 10. Publish <figure><img src="/files/byjU3UWVwm8IMovTstgN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/AeCOJT1msgPiHHQvbcd5" alt=""><figcaption></figcaption></figure> Here is a page example with SEO tags automatically added <figure><img src="/files/2e1W1PG0OnZE5LHeElOh" alt=""><figcaption></figcaption></figure> *** ### Upload Files <a href="#maintenance-uploadfiles" id="maintenance-uploadfiles"></a> Upload any files needed by your site, such as a web app manifest. When you are complete, edit the default page in the funnel, save the page (you do not have to make any changes to the page) and exit the page builder, and then Publish the funnel. You can reference your uploaded file from your published URL. For example, assuming your published funnel is located at “<http://www.yourfunnelhere.com”>, a recently uploaded js file named “generic.js” would be found at “<http://www.yourfunnelhere.com/generic.js”>. <figure><img src="/files/2B9UkP5tZ7Z6R63Mdbfa" alt=""><figcaption></figcaption></figure> *** ## Geolocation <figure><img src="/files/lystf1kUp3SjTDE3cQK5" alt=""><figcaption></figcaption></figure> In the Geolocation tab there are 3 options and a toggle. **None -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to disable this functionality. **Browser -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to use the browsers geolocation. **Server -** CheckoutChamp defaults country and state on checkout pages by geolocating the IP address. Choose this option to use the server-side geolocation service. **Default a country if no geolocation match** (toggle) - If geolocation does not match a country in the campaign, then default the first country in the campaign onto the order. {% hint style="info" %} If this is not toggled the page will load with the place holder {% endhint %} *** ## Miscellaneous <figure><img src="/files/earDvRNczKqD0DUQWcPY" alt=""><figcaption></figcaption></figure> **Show exceptions in a popup -** Check this box to show exceptions in a popup. By Default all exceptions are shown as a label on the page. **Update currency on change of country -** Automatically update the order currency when the billing country is changed. The campaign base currency will be used if the country currency is not on the campaign. **Enable phone format by country -** Allows consumers to choose a phone country. Show a country flag. Enforce the country phone format. **Verify Out-of-Stock products -** Do not allow purchase of out-of-stock shippable products. Show an out-of-stock indication to consumers. **Disable removal of default coupon -** Do not allow removal of the default coupon. The default coupon will count against the max coupons allowed on the order. **Disable shipping price display -** Do not show shipping prices as part of the shipping method selection. **Disable lazy loading -** Disable lazy loading of media (Image, Video, iframe) on all pages. {% hint style="danger" %} **Don't forget to publish your changes.** {% endhint %} # URL Customization ### Slugs <a href="#urlcustomization-slugs" id="urlcustomization-slugs"></a> There are several instances in Checkout Champ in which it would be helpful or even necessary to add a slug to the end of your URL. First, here is how you can add a slug to your page, then we can look at a few different examples of when you would use them. #### Adding a Slug - <a href="#urlcustomization-addingaslug" id="urlcustomization-addingaslug"></a> By default all published pages in Checkout Champ will have a randomly generated slug attached to the end of the URL for identification purposes. (see Image below) <figure><img src="/files/ZT3JdXJRuMwE2vTEGf6n" alt=""><figcaption></figcaption></figure> To change this, go to the visualizer, select a page you want to give a slug. Then select the gear icon in the bottom left of the tool bar. (Pictured below) <figure><img src="/files/5za6XcnXOIR5MPxkcg78" alt=""><figcaption></figcaption></figure> On the right side settings panel that pops up, select the “**Published Page Name**” input. Add whatever slug you would like to appear at the end of your URL and then be sure to **Tab off of the input to save it**. (Pictured below) <figure><img src="/files/Uqr3blokovsF3dAPTVue" alt=""><figcaption></figcaption></figure> **You’ll see the following prompt to publish your funnel to see the changes.** <figure><img src="/files/O5ILvWlgExlg5hF0lQwa" alt=""><figcaption></figcaption></figure> When you return to your site, you will see the slug at the end! <figure><img src="/files/kvMdCmAesvy1rcXBSlS3" alt=""><figcaption></figcaption></figure> *** ### When to add a slug: <a href="#urlcustomization-whentoaddaslug" id="urlcustomization-whentoaddaslug"></a> #### Split Tests - <a href="#urlcustomization-splittests" id="urlcustomization-splittests"></a> If you want to run a split test to try out what versions of your site works best, you can add a slug to the end of both URLs to better differentiate them for yourself. See [Creating a Split Variation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/creating-a-split-variation) on how to do that. Once your splits are created, you will need to select the gear icon for each A and B variation inside the page settings to add the slug. **Remember to tab off the Split Name to save the slug**. <figure><img src="/files/zdmmAcmImnVtFayYgItX" alt=""><figcaption></figcaption></figure> #### Shopify Redirect - <a href="#urlcustomization-shopifyredirect" id="urlcustomization-shopifyredirect"></a> If you are creating a redirect from Shopify, it is highly recommended to add a slug to each page in your funnel. This way you can use the same domain and the slug will indicate which page someone is on. For example: [www.myshop.com/checkout](http://www.myshop.com/checkout). It will also create a more consistent experience for customers as they redirect from Shopify to Checkout Champ. Contact your Account Manager for more details on redirects. #### Funnel Clones - <a href="#urlcustomization-funnelclones" id="urlcustomization-funnelclones"></a> In some instances, you might want to duplicate your entire funnel and run them both with some variations instead of split testing just one page. ***Assuming you will be using the same domain for both funnels, you will need to add slugs to every page in one or both funnels***. Follow the instructions in [Duplicating Pages & Funnels](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicating-pages-and-funnels) then once all the pages load, you will need to add a slug to each page in the funnel so the domains are unique from your other funnel. # Page Templates <figure><img src="/files/W22vKXgQ9mcMuL11qxdn" alt=""><figcaption></figcaption></figure> Within Checkout Champ we provide a number of templates for each page type. Many people get bogged down in design, so hopefully these will save you much time! We recommend you use our templates for several reasons: * They will save you time as designing your own page from scratch can take some time to perfect. * Templates are easy to edit and designed to work in the Checkout Champ platform. * They provide great examples of the design possibilities within Checkout Champ. * They have been tested and approved for use. * Superior support for templates compared to custom pages. *Don't see a template that fits your needs?* **Let us know!** We are always designing more based on feedback! ### Selecting a Template <a href="#pagetemplates-selectingatemplate" id="pagetemplates-selectingatemplate"></a> When you drag a new page type onto the visualizer, you will need to select a template first. Do this by selecting the page settings cog icon. <figure><img src="/files/fthvYRMcZ4iTXuwLpMPJ" alt=""><figcaption></figcaption></figure> From here you can select a template to edit, or select the first blank template (in red below) if you want to build your page from scratch. <figure><img src="/files/LzinwQIGjUjv2zb7dkhK" alt=""><figcaption></figcaption></figure> Once you select a template you can edit the images and text to fit your needs. Templates are designed to need minimal editing. Just replace our info with yours and you’re ready to start selling! <figure><img src="/files/joyn8ZX613Zm2cwptW67" alt=""><figcaption></figcaption></figure> # Page Builder After you drag a page type to the funnel visualizer, click on the page and then click the settings gear icon to select a template. You can choose from My Pages (pages you’ve already created), Free Pages, or Premium Pages <figure><img src="/files/y59D7MIcXKJby2OOtiId" alt=""><figcaption></figcaption></figure> <figure><img src="/files/JJ1T1x9irNxuD5hyKuz1" alt=""><figcaption></figcaption></figure> After you select a template, click on the page again and click the Pencil button to begin editing the page <figure><img src="/files/q787kpxpnwuMwCe0ndny" alt=""><figcaption></figcaption></figure> ### Relative Links {% hint style="info" %} These links are deprecated content. Please use [Page Builder 2.0](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0). {% endhint %} * [Builder Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar) * [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles) * [Layer Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/layer-manager) * [Building Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks) * [Adding Local HTML Files](/funnel-builder/creating-and-editing-funnels-pages/adding-local-html-files) # Builder Toolbar The Builder Toolbar is a quick navigation menu which supports valuable functions and can be found at the top of every Checkout Champ page within the Page Builder. <figure><img src="/files/RE3c8k571SO0tc0lcrkf" alt=""><figcaption></figcaption></figure> [Back](#bac) | [Blocks Menu](#blocks-menu) | [Show Hidden Layers](#show-hidden-layers) | [Code Editor](#code-editor) | [Pages](#pages) | [Chat GPT](#chat-gpt) | [View Components](#view-components) | [Popups](#popups) | [Sticky Bar](#sticky-bar) | [Page Import](#page-import) | [Undo and Redo](#undo-and-redo) | [Help](#help) | [Clear Canvas](#clear-canvas) | [Absolute/Relative](#absolute-relative) | [Light/Dark Mode](#light-dark-mode) | [Preview](#preview) | [Save](#save) | [Cart](#cart) ## Back The "back" button will exit the page back to the funnel visualizer. If the page has not been saved since its last edit, you will receive a prompt asking if you would like to save before exiting. <figure><img src="/files/UMlQiHumUpA0MqJUMG7w" alt=""><figcaption></figcaption></figure> ## Blocks Menu The blocks menu opens the Blocks toolbar which houses all of the builder's draggable elements. <figure><img src="/files/FdKqD51OfTyKQJpDiAxk" alt=""><figcaption></figcaption></figure> ## Show Hidden Layers Clicking the Hidden Layers button will bring you into your Layer Manager, highlighting any layers that have been hidden from view. <figure><img src="/files/QOJaZl211t9zu1Hlyx0j" alt=""><figcaption></figcaption></figure> ## Code Editor The Code Editor allows you to view and edit the HTML and CSS code using a popup containing a two-sided popup. <figure><img src="/files/D9JElnwL1IMDcPldlzrY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ynePvigaqHmT8od4lj6C" alt=""><figcaption></figcaption></figure> ## Viewports Clicking the Viewports dropdown allows you to view and edit your pages in 5 pre-defined screen sizes (Desktop, Large Tablet, Tablet, Large Mobile, and mobile). Being able to navigate between views allows you to view and edit your layout with mobile responsiveness in mind. <figure><img src="/files/75eYXUSLf6rIAfy0Uj3j" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bRmQvpNPLdDhm22Bhdgd" alt=""><figcaption></figcaption></figure> ## Pages The pages dropdown allows you to switch to any other page in your funnel without leaving the builder. If the current page has not been saved since its last edit, you will receive a prompt asking if you would like to save before switching to the next page. <figure><img src="/files/mz72kN4wd0dIluSpDkNR" alt=""><figcaption></figcaption></figure> ## Chat GPT Clicking the Chat GPT icon will launch Chat GPT in a new window. This allows users to easily create marketing copy on the fly to copy/paste back in the editor. <figure><img src="/files/PXBEAGCtD5O4zC9YSaBB" alt=""><figcaption></figcaption></figure> ## View Components By selecting or deselecting View Components, you can hide or reveal the component borders to view the page with or without visible element sections. <figure><img src="/files/eJrySslshO0M6u5meCtq" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TH1jrHaicl1AYmPxeBp1" alt=""><figcaption></figcaption></figure> With the component view enabled, you will see dotted lines surrounding each of the individual components/blocks on the page. ## Popups Upon clicking the Popups button, the Popup Manager will display so you can add a new popup or to edit existing popups. <figure><img src="/files/6SzW9WvvjUbercFAlTOz" alt=""><figcaption></figcaption></figure> ## Sticky Bar Selecting Sticky Bar allows you to add or edit your page's sticky bar. A sticky bar adds a box/bar that "sticks" to the top or bottom of the page to display a message, product button, picture or anything interesting so that it is always displayed prominently, yet non-intrusively. <figure><img src="/files/dD2ov7j8d5ehRT7Y0f5d" alt=""><figcaption></figcaption></figure> ## Page Import The Page Import tool allows users to import pages built outside of Checkout Champ using a live URL. <figure><img src="/files/lJM9EWLuORNSaKrZyJsF" alt=""><figcaption></figcaption></figure> ## Undo and Redo Undo and Redo allow you to easily remove or add changes back as you are editing. <figure><img src="/files/Hb6rhKHz8X9VbbOJO8m6" alt=""><figcaption></figcaption></figure> ## Help By selecting the ' ? ' you can easily access the Checkout Champ Knowledge base articles, like this one! <figure><img src="/files/PCQcVRp6fHWIEWOqNsW4" alt=""><figcaption></figcaption></figure> ## Clear Canvas Clear Canvas will allow you to wipe the canvas clear and start with a blank page. <figure><img src="/files/YVt5C53EoZQMhwIDbrBg" alt=""><figcaption></figcaption></figure> When you click the icon, you will receive a prompt ensuring you intend to clear the canvas. <figure><img src="/files/Y5UNHsek4HBqmt1AxjD4" alt=""><figcaption></figcaption></figure> ## Absolute/Relative Toggling between Absolute and Relative adjusts how elements are placed on the canvas. When in Absolute mode, elements remain where they are dragged on the canvas (like images placed on top of each other). In Relative mode, elements are placed onto the canvas relative to their parent elements. <figure><img src="/files/IhxogWU9kavj0doPYlnq" alt=""><figcaption></figcaption></figure> ## Light/Dark Mode The Light/Dark Mode switch allows you to change the Funnel Builder color scheme based on your preference. <figure><img src="/files/19muHwwZkqwD5BtN6Fyg" alt=""><figcaption></figcaption></figure> ## Preview By selecting the eye, you can Preview your page as you are building to check your progress. <figure><img src="/files/RngpA3uo4xR7V1i9Etnv" alt=""><figcaption></figcaption></figure> ## Save Save your changes as you work in the Page Builder. <figure><img src="/files/qgI95ErW9Jd2zXjybUCW" alt=""><figcaption></figcaption></figure> ### Cart On pages containing a Header element, you will see the Cart icon in the toolbar. The Cart icon opens the side cart element for you to view and edit as needed. Note: The side cart is not available on checkout pages. <figure><img src="/files/MimvPbLdsK6cEoZpcd4d" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ynHvRToSqROoRNWHtoGR" alt=""><figcaption></figcaption></figure> # Device View Changer Checkout Champ gives you all the necessary tools you need to optimize your pages so that they are responsive and beautiful on any device. While many responsive features are automatically applied to your page, you can customize your layout as needed. Using the Device View Changer, you can view and edit your page layout using 5 preset screen sizes reflecting commonly used devices: <figure><img src="/files/bRmQvpNPLdDhm22Bhdgd" alt=""><figcaption></figcaption></figure> (Desktop, Laptop/Large Tablet, Tablet, Large Mobile and Mobile) By selecting the different device views in the editor, you can see how your page will look on the 5 different screen sizes. You can also modify your page design to reflect styling specific to the different device layouts. As you edit, the styling changes cascade downward. <figure><img src="/files/iMtc9aWswhNYJF9S8UxF" alt=""><figcaption></figcaption></figure> Any styling edits made on the desktop view will cascade down across all screen sizes. However, you can use the Device View Changer to edit the smaller screen sizes independently. This allows you to change the styling for tablet and mobile screens or even hide elements you don’t want visible on the smaller screen sizes. # Popups Popups can be used in a variety of ways, but the generally the purpose is to keep the customers engaged on your site. Upon clicking the Popup button within the Page Builder Toolbar, the Popup Manager will display so you can add a new popup or to edit an existing one. There is no limitation on how many popups you can create. <figure><img src="/files/U98KljDR8VOOLvDCHN5p" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9eDrqiLO96Lgd39Ct4yG" alt=""><figcaption></figcaption></figure> Once you have clicked the “Add new popup” button or the Edit button on an existing popup, the popup will display within the builder and you can edit elements as you normally would. The Popup-body element (the outermost parent element of the popup) has settings within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles) to further customize your popup. <figure><img src="/files/yUzGiEcd2XtG1rtBOemW" alt=""><figcaption></figcaption></figure> **Delay (Min and Sec)**: Delay the popup from triggering for a determined amount of time. **Trigger On** options include: Trigger On Load - The popup displays when the page initially loads completely.\ Trigger On Scroll - The popup displays when the user starts to scroll down on the page.\ Trigger On Exit - The popup displays when the user's mouse cursor leaves the window.\ \*\*See below for triggering a popup upon the click of a button or link **Popup Width**: Choose between Small, Medium, and Large sized popup. **Corner Radius**: Choose how rounded the corners of the popup should be. **Edges**: Choose if All, None, the Top Only, or the Bottom Only edges should use the corner radius selection. **Animate**: Add an animation to your popup. **Animation Duration (Sec)**: Set how long, in seconds, that the animation for your popup should last. When you have finished designing your popup, click the Popup button again within the Page Builder Toolbar to close the popup. {% hint style="info" %} If you ever want to disable a popup, you can either set the Trigger On setting to None, or you can delete the popup from the Popup Manager. {% endhint %} *** ### \*\*Trigger Popup when a button or link is clicked <a href="#popups-triggerpopupwhenabuttonorlinkisclicked" id="popups-triggerpopupwhenabuttonorlinkisclicked"></a> There may be cases where you would prefer the popup to display when the customer clicks a button or link on the page. To do this, make sure the Trigger On setting within your popup is set to None. Next, close the popup designer and click on the button or link that you would like to trigger the popup. With the button or link highlighted, click the Style Manager button and open the Settings for the element. Finally, set the button/links Action selection to Open Popup and set the Popup selection to the popup you would like to display when the button/link is clicked. **\*Required fields will need to be filled before the Popup will load** <figure><img src="/files/wlU0JF9HJ3ZH0dHsG223" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} If you ever decide to remove the popup, make sure you edit your button/link to adjust the action accordingly. {% endhint %} # Settings and Styles Select Settings or Styles to quickly reveal the settings or style management pane to edit as needed. **Settings** - Each element has different settings <figure><img src="/files/pcggFnceL4Q1dqwuYRki" alt=""><figcaption></figcaption></figure> The Style manager has Basic and Advanced settings with the Advanced settings allowing for slightly more control and flexibility than the Basic settings. <figure><img src="/files/mk2RKJcUxHhm0CdwJ4uw" alt=""><figcaption></figcaption></figure> **Dimension/Size & Spacing** - Adjust the height, width, margins and padding of the element **Font** - Adjust the font type, color, size, etc **Border** - Adjust the border for the element **Shadow** - Apply a shadow to the element **Background/Effects** - Control the background and/or shadow style of the element **Extra** - Adjust the opacity of an element **Flex** - Control flex properties of the element # Layer Manager The Checkout Champ Layer Manager allows you to manage your page structure to nest components and manage page elements quickly and easily. To find a specific element in the layer manager, open the layer manager with the hamburger icon on the far right of the tool bar. Once the layers are displayed, go ahead and click on the element you would like to find. Once you do so the element will be displayed inside the layer manager. <figure><img src="/files/PjkkxoBbZSuSqA4P8FmJ" alt=""><figcaption></figcaption></figure> As your page grows, you can reposition elements by dragging the element up or down in the layer manager, view and hide elements (eye icon), lock elements to prevent editing (lock icon), and reveal nested layers (arrow icon) to manage nested elements. <figure><img src="/files/oa3Q0F7YNoHc5CQB6O7w" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Hiding an element from the desktop view will hide the element across all device views. However, you can hide an element on the tablet and/or mobile view and it will remain on the desktop view. {% endhint %} # Hiding and Revealing Elements The layer manager can be used in powerful ways to optimize a page layout for different devices. For example, you could have a large, wide image displayed on desktop but hide it on mobile devices and instead reveal a smaller, narrower design for mobile. This feature allows you to create a different visual experience based on screen size using the built-in viewports (Desktop, Large Tablet, Tablet, Large Mobile and Mobile). You can see your page across all 5 viewports by clicking the different screen sizes in the top toolbar. <figure><img src="/files/iMtc9aWswhNYJF9S8UxF" alt=""><figcaption></figcaption></figure> ### Here's how you can Show or Hide elements The initial screen in the builder is the Desktop layout. Should you need to see some items on desktop, but no on the on the smaller screens, you can open the Layer Manager. Once open, click on the element in the Layer Manger or directly on the page. Then, click the eye icon to hide that element from view. <figure><img src="/files/KCgnmXlgbTDUaE1QUj8C" alt=""><figcaption></figcaption></figure> The eye icon now has a strikethrough line through the icon to show the layer is hidden from view. <figure><img src="/files/GxDk4UMpSK6CDM4Bkb6i" alt=""><figcaption></figcaption></figure> To show the element once more, click the eye icon again. You will need to repeat this process for each screen size. ### Visibility Toggles Alternately, you may also show and hide elements using the Visibility toggles in that element's settings. Click the element and open the Settings menu. Then click the Visibility toggles to turn visibility on or off for each screen size as needed. <figure><img src="/files/qirw4IZq310kL24ctigA" alt=""><figcaption></figcaption></figure> # Building Blocks Blocks are elements you can add to your page using a quick and easy drag and drop action. Blocks have unique styling and configuration options and are described below. When editing a page you will find the Building Blocks on the top right of the screen. <figure><img src="/files/C8ossvqhQ95v08Z0dwwN" alt=""><figcaption></figcaption></figure> You find links for each Building Block section below: * [Basic Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks) * [Form Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks) * [Button Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks) * [Product Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/product-blocks) * [Carousel / Slider Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/carousel-slider-blocks) * [Icon Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/icon-blocks) * [Social Media Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/social-media-blocks) * [Testimonial Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/testimonial-blocks) * [Extra Blocks](https://help.konnektive.com) * [My Element Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/my-element-blocks) # Basic Blocks Basic blocks are webpage elements which are common to most pages. <figure><img src="/files/qjraChQRJWIF8LwQq8ss" alt=""><figcaption></figcaption></figure> *** ## **Columns** <a href="#basicblocks-columns" id="basicblocks-columns"></a> Columns allow you to divide your page into sections and edit unique sections of your page. An inner column can divide column elements into smaller sections of your page. {% hint style="info" %} *You need at least a single column added to the page builder to begin placing other elements.* {% endhint %} <figure><img src="/files/hRgfniJJH7o1TAWN4ADr" alt=""><figcaption></figcaption></figure> ### Custom Block <a href="#basicblocks-box" id="basicblocks-box"></a> **Custom Block is an interface used to create content-ready Rows.** <figure><img src="/files/ZRPmcO7oBWVpNkAyREyj" alt=""><figcaption></figcaption></figure> Custom Block presents a series of settings to create a customized Row using basic options from the [Bootstrap framework](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/bootstrap-integration). Drag the block onto the page where needed. A popup will show with the available options. <figure><img src="/files/w0FcnXuCLNu28hzqQ4zH" alt=""><figcaption></figcaption></figure> **Using the Row Confiuration, you will choose how many Columns you need in your Row and assign basic styling, as needed. Then set your Column configuration.** <figure><img src="/files/8lXHIzn1BCt04vZI13QV" alt=""><figcaption></figcaption></figure> Column configuration includes several basic content selections. The available options include: * Text blocks * Cards * Image Placeholders * Buttons * Form Elements. Each selection gives you a basic element ready to edit and style. The Cards selection is a basic layout including an image placeholder, a title, a text block and a button. Once your selections are made, click "Generate Layout" to add the content to the page. This layout generator includes only basic styling. Once generated, you can use the [Style Manger](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager#select-styles-to-reveal-the-style-management-panel) to edit and style the individual components as needed. <figure><img src="/files/6xOFIi9xrpc5bV06IEjA" alt=""><figcaption></figcaption></figure> A word on Margin and Padding: You'll note there is no option for Margin in the Column Configuration. Margins interfere with the Bootstrap grid layout. Column width is determined by the number of columns in the row, 1-12 columns total. To add space around the content in a column, set the column padding as needed. If you need space around the outer edge of all columns in the Row, set your Row padding accordingly. Margin is the space outside the Row. Padding is the space inside the Row/outside the columns. ### Box <a href="#basicblocks-box" id="basicblocks-box"></a> Box is an additional div element to use as a container of other elements * Elements not supported inside a Box: Header, Footer, Inner Row. * Box cannot be dropped inside the following elements: Body, Row, Product Row, Text, Headline, Link, Image, Video, Map, Horizontal Line, Select, Input, Checkbox, Radio, Buttons, Label, Survey Options, Carousel. ## **Header** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Header to your page which can be styled to your liking. This element is used to apply a [Common Header](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to your funnel pages. <figure><img src="/files/9W0rjGuPptROh9TJZKR8" alt=""><figcaption></figcaption></figure> ## **Footer** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Footer to your page which can be styled to your liking. This element is used to apply a [Common Footer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements) to your funnel pages. <figure><img src="/files/QEoUO1JM5baIhP9h4jJp" alt=""><figcaption></figcaption></figure> ## **Headline and Text** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drage a Headline or Text element to your page. <figure><img src="/files/tLE3aJaE56HJDNWhWgZv" alt=""><figcaption></figcaption></figure> Text inside Headline and Text elements can be modified from the inline Text Editor menu. You can change the style of the text by making it bold, italicized, underlined or applying strike through. A text element can also be converted to a link. <figure><img src="/files/MH6gCLqfDVn3hGZwUN6m" alt=""><figcaption></figcaption></figure> Text can also be styled and managed in the Font styling menu. <figure><img src="/files/1umMkJKb8AhxMdJ1MuMB" alt=""><figcaption></figcaption></figure> ## **Link** <a href="#basicblocks-link" id="basicblocks-link"></a> Drag a link element to embed a link onto the page. <figure><img src="/files/zmetc5bQGjhvxfljZlRx" alt=""><figcaption></figcaption></figure> Within the Style menu for the link you can define the following attributes and behaviors: <figure><img src="/files/oyXobZm9Q2Vrr8z3eUAb" alt=""><figcaption></figcaption></figure> * Title: (Required) The text displayed for your link. * Link: When a link is defined, the visitor will be taken to an external redirect. * Action: (Required) What to do when your visitor selects the link. * Full details are [here](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks/button-and-link-actions) * Target: Defines which window the visitor will navigate to the url in: * This Window * New Window * Product: Assign a product to the link * Variant: Assign a variant to the link (must select Product first) * Replacement: Assign the product that should be replaced when the customer buys an "upgrade" * Animation: Apply an animation to your link * Delay (Sec): Add a delay (in seconds) before your link animation starts * Speed: Select the speed at which the animation plays * Loop: Choose if the animation should loop or not * Align: Define the alignment of your link respective to its parent element (column, inner column, etc.) ## **Image** <a href="#basicblocks-image" id="basicblocks-image"></a> You can add images to your Checkout Champ Page and asset folder by dragging the Image Block to your page. <figure><img src="/files/bQA6JSYji9jvlRPp8yHB" alt=""><figcaption></figcaption></figure> When you drag an image to your page, the image folder will display which will allow you to perform the following actions: #### Select an image from your Checkout Champ Assets Folder: <figure><img src="/files/VoJAHUsy0DEvrDEHP4hI" alt=""><figcaption></figcaption></figure> #### Upload an image to your Checkout Champ Assets Folder: <figure><img src="/files/Ih13oRhV2OgZSsRmmkJl" alt=""><figcaption></figcaption></figure> #### Select an icon from the Checkout Champ Icon Library: <figure><img src="/files/UszSQg3hKCyiu8uFb1UY" alt=""><figcaption></figcaption></figure> #### Select a Stock image from Unsplash: <figure><img src="/files/4yFM3hQQL7JcHlNAYLiJ" alt=""><figcaption></figcaption></figure> #### Enter the image's source URL: <figure><img src="/files/NBOZLC2Uv25Pz641pHKA" alt=""><figcaption></figcaption></figure> Once your image is added to your page, you will be able to format and style it in the following ways: <figure><img src="/files/RACXfhVZeivCCAuqOI7Z" alt=""><figcaption></figcaption></figure> * Title: Define a Title for your image. * Alt: Define alternative text for your image. * Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. * Alt tags will be displayed in place of an image if an image file cannot be loaded. * Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly. * Link: You can configure a link to your image so that when a visitor selects the image, they can be taken to a different site. * Target: If you have configured a link on your image, you can define whether the user will be taken to a different site in the same browser window or if a new browser window will be opened. * Align: Define the alignment of your image respective to its parent element (column, inner column, etc.) ## **Video** <a href="#basicblocks-video" id="basicblocks-video"></a> You can easily add exciting video content to your Checkout Champ page. <figure><img src="/files/hDEMZqz4IChvOIYjlnkC" alt=""><figcaption></figcaption></figure> After dragging the Video element to the page, open the style manager to define the settings for your video. <figure><img src="/files/SfQL8bJhpGTyTh7UVxzN" alt=""><figcaption></figcaption></figure> * Provider: Checkout Champ can support video content from the following providers: * HTML 5 Source * YouTube * YouTube (No cookie) * Vimeo * Wistia * JW Player * Rumble * Source: Once you select the video provider, you can define where your content is stored with that provider by setting the source. * Poster: If you want a specific image to display before your video plays, you can define a poster. * Autoplay: By enabling autoplay, your video content will begin as soon as the visitor arrives at your site. * Loop: By enabling loop, the video will restart once it has been completed. * Controls: By enabling controls, your visitor will be able to control your page’s video to pause, play, enable full-screen mode, and more. * Aspect Ratio: Choose from a set of predeteremined aspect ratios #### Videos: Call to action <a href="#basicblocks-videos-calltoaction" id="basicblocks-videos-calltoaction"></a> {% hint style="info" %} **This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers** {% endhint %} Call-to-action displays an element at a set time in a video **Step 1**: Select the video element. Open the video manager by clicking the clock icon. <figure><img src="/files/CSJszI5mESD1jppAsHC4" alt=""><figcaption></figcaption></figure> **Step 2**: Enter the time and the Id of the element to open at that time. <figure><img src="/files/9v1axjlmdHUcKKeZt40O" alt=""><figcaption></figcaption></figure> Press “Add new time log” to enter as many open times as needed **Step 3**: Save and Publish # Rows & Columns Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows. <figure><img src="/files/W98Q6tWoyAhF4IXLzL4s" alt=""><figcaption></figcaption></figure> #### CSS styling in Checkout Champ <a href="#rows-and-columns-cssstylingincheckoutchamp" id="rows-and-columns-cssstylingincheckoutchamp"></a> Our rows and columns rely on the Bootstrap CSS framework, a set of styles which adds structure to the page. As such, new columns will be be dragged onto the page with the Bootstrap class "col". This is the base Bootstrap CSS column class signifying "auto" width and will be automatically adjusted based on the page layout and number of columns in the row. #### Column Sizing <a href="#rows-and-columns-columnsizing" id="rows-and-columns-columnsizing"></a> The proper way to size columns is by using the Bootstrap Grid System and its associated classes, as explained below. You may manually adjust column widths, but that may have unintended consequences on the responsiveness of your design and is not recommended. #### Flexbox (Flex) A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry! Checkout Champ has a Flex interface built into the Advanced Styles menu. <figure><img src="/files/cETJs2Frw4szhjWyZRP5" alt=""><figcaption></figcaption></figure> You can adjust the Flex settings by making selections from the available options. <figure><img src="/files/rgn0rKxFccKQKyyCREWu" alt=""><figcaption></figcaption></figure> Alternately, you could click one of the nine options available in the Flex graph. This graph is a visual way to set the same Flex settings. Clicking the graph options will change the Flex settings accordingly. However, if you want uniform columns and rows across all devices, you’ll want to add and edit the Bootstrap column classes. These classes are explained in detail on the Bootstrap Grid System page. Please visit the following link to read more about the Bootstrap Grid System:\ <https://getbootstrap.com/docs/4.3/layout/grid/> Example Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem! You would use Bootstap column classes to set the proper layout.\ \ When looking at the classes assigned to each column, you will notice each column comes “fk-col” and "col". Similarly, each row uses “fk-row”. Both “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes automatically give each row and column the default style you see. <figure><img src="/files/10PXIQkqNITtnuNMDgLI" alt=""><figcaption></figcaption></figure> Using these default classes, Checkout Champ rows and columns are designed to automatically resize across screens sizes and stack on top of each other on smaller screens, like different mobile devices. But you can also control exactly where columns stack on top of one another by specifying the col classes. Let’s say you want to adjust the layout. On large mobile devices you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into the Bootstrap Grid System. (See this page for reference - <https://getbootstrap.com/docs/4.3/layout/grid/>) <figure><img src="/files/Dk1X3A9QyIAEvb9H3fd3" alt=""><figcaption></figcaption></figure> First, let's design for mobile views. (See our article on [device view](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/builder-toolbar/device-view-changer)). On the desktop view, click in the box to "Add class here". Type your new class. In this case, type “col-lg-8” and click "Enter". Flex styling operates on fractions of Twelve, so “col-lg-8” assigns the column to span 8 horizontal fractions of the viewable screen. That is Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. You will then add "col-12" to make the column span full-width, all 12 spots of the 12-spot grid, and stack on top of each other on smaller, mobile screens. <figure><img src="/files/e4QQFoAED2yGTRSxU7Lz" alt=""><figcaption></figcaption></figure> Now you would add “col-lg-4” and "col-12" to Column 2's classes and click "Enter". <figure><img src="/files/evi1TPpJS1gfgpDIs53J" alt=""><figcaption></figcaption></figure> Your two columns are now different widths on desktop and other large screens. On smaller screens, those same two columns will take up the full-width of the page, stacking on top of each other. The Bootstrap Grid Systems, and its associated classes, make responsive design a breeze. Rather than specifying pixel widths for all of your columns, you only need to set the appropriate Flex classes, 1-12. Your columns will resize in each row on their own, showing the columns at the desired width across screen sizes.\ \ Again, visit the [Bootstrap Grid System page](https://getbootstrap.com/docs/4.3/layout/grid/) to learn more about all you can do with Column Classes and Flex settings. #### Manual Adjustment (Not recommended) To manually edit the width of your column, first delete the "col" class from the column's Classes by clicking "X" icon next to the "col" class. <figure><img src="/files/5EL7QEnrx2YYtdt84GNK" alt=""><figcaption></figcaption></figure> Then adjust the width in the Styles menu. <figure><img src="/files/K1YhiNl2XHM3RkVIXvgv" alt=""><figcaption></figcaption></figure> \ Using the Styles menu, you could move the width slider to the desired width or type a numerical width. Widths can be set in pixels or percentage. To resize on its own, you could also type "auto" (without the quotation marks) rather than specific numbers.\ \ Again, manual width adjustment is not the recommended approach as it can lead to unintended consequences across your page layout. # Form Blocks heckout Champ allows you to build custom forms or use premade form templates. The form templates available are dependent on the page type you are creating. <figure><img src="/files/J4JZXilcLy8mKTlKi5tE" alt=""><figcaption></figcaption></figure> * [Forms](#formblocks-form) * [Input](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/duplicate-input-indicator) * [Label](#formblocks-label) * [Radio Button](#formblocks-radiobutton) * [Checkbox](#formblocks-checkbox) * [Select](#formblocks-select) * [Select Month & Select Year](#formblocks-selectmonth-and-selectyear) * [Shopping Cart](#formblocks-shoppingcart) *** ### Forms <a href="#formblocks-form" id="formblocks-form"></a> <figure><img src="/files/i2cYuqGLShj2JDRSyNQX" alt=""><figcaption></figcaption></figure> The forms element will add a basic form to your page which you can add more inputs to and style to your needs and preferences. This form includes the following fields: * Name - Input Field for First Name * Email - Input Field for Email address * Gender - Radio Buttons with Male/Female options * Save/Submit Button - Button element which can be configured to perform specific actions based on your preference. <figure><img src="/files/FH8Zpen753ltbsiphpSv" alt=""><figcaption></figcaption></figure> *** ### Input <a href="#formblocks-input" id="formblocks-input"></a> <figure><img src="/files/ap8sjaipJkVIdloX5ElX" alt=""><figcaption></figcaption></figure> A form input field which can be used to collect custom data. After selecting an Input element, use the Settings inside the Style Manager to determine which field that the input represents. {% hint style="success" %} Additional instructions for Custom Fields: [Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs) Additional instructions for Placeholder formats: [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats) {% endhint %} <figure><img src="/files/2OBbYI7AIpbXxSYwf1kU" alt=""><figcaption></figcaption></figure> *** ### Label <a href="#formblocks-label" id="formblocks-label"></a> <figure><img src="/files/R77LukSEUjUG5aZgBTSK" alt=""><figcaption></figcaption></figure> Use labels to define form elements.<br> *** ### Radio Button <a href="#formblocks-radiobutton" id="formblocks-radiobutton"></a> <figure><img src="/files/HfZf1oCzQ3Y8936kdJw5" alt=""><figcaption></figcaption></figure> Add a radio button element to your page when you want your visitors to make a selection. A radio button can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your radio button. <figure><img src="/files/Cn0jFH1jjCtyrHTiUNTW" alt=""><figcaption></figcaption></figure> *** ### Checkbox <a href="#formblocks-checkbox" id="formblocks-checkbox"></a> <figure><img src="/files/EqN6uPOfzcm8nav6o1U4" alt=""><figcaption></figcaption></figure> Add a checkbox element to your page when you want your visitors to select or acknowledge something on your page. A checkbox can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your checkbox. <figure><img src="/files/OkFw9IFq0ZdLNm1H6xJp" alt=""><figcaption></figcaption></figure> *** ### Select <a href="#formblocks-select" id="formblocks-select"></a> <figure><img src="/files/B6PR4VcUd2d7TTHrirYX" alt=""><figcaption></figcaption></figure> This element can be used to provide a drop down menu of different options.\ \ After dropping the Select element to your page, click on the element and view it’s settings under the Style Manager. <figure><img src="/files/njvmBa8KbHuUhjfk20il" alt=""><figcaption></figcaption></figure> Set the Name of the element from the dropdown options. If you choose Card Month, Card Year, Ship Profile, State, Ship State, Country or Ship Country, the options for the customer will automatically appear on the live page. *** ### Select Month & Select Year <a href="#formblocks-selectmonth-and-selectyear" id="formblocks-selectmonth-and-selectyear"></a> <figure><img src="/files/7XQewuppDKlqWgd4p6zR" alt=""><figcaption></figcaption></figure> These are premade versions of the Select element which are preset to be a month/year selector. *** ### Shopping Cart <a href="#formblocks-shoppingcart" id="formblocks-shoppingcart"></a> <figure><img src="/files/uWRv0Sz9MIKZXqsH4S5R" alt=""><figcaption></figcaption></figure> Please view [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks/shopping-cart-element) for more information about the Shopping Cart element. *** # Shopping Cart Element * [Legacy Cart](#shoppingcartelement-legacycart) * [Product Images](#shoppingcartelement-productimages) * [Shopping Cart](#shoppingcartelement-shoppingcart) * [Additional Features/Settings](#shoppingcartelement-additionalfeatures-settings) * [Side Cart / Drawer Cart](#shoppingcartelement-sidecart-drawercart) The shopping cart elements are used to dynamically display the customer’s chosen product details and the corresponding prices and amounts. The shopping cart element blocks are also sometimes known as an “order summary”, but the elements in the builder are labeled as a “Shopping Cart”. ### Legacy Cart <a href="#shoppingcartelement-legacycart" id="shoppingcartelement-legacycart"></a> The Legacy Shopping Cart element displays the chosen product details, including a **per unit price\*** for each product in the table and can be found under the Forms section of the Building Block elements. **\*See instructions below to make the price in the table reflect the quantity chosen.** <figure><img src="/files/iCaJPxOjULqKsSrusIWJ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/h0XS3oPGPUL4SYTPBNRk" alt=""><figcaption></figcaption></figure> This element comes with two options for displaying the quantity. You can remove either the quantity bubble or the entire quantity column (both parts). <figure><img src="/files/5ROFC8ASnK2Dcvl0e7rW" alt=""><figcaption></figcaption></figure> If you decide to use the quantity column, this provides the customer with the ability to adjust the quantity of the products the chose by default, but these buttons can be removed if you don’t want the customer to adjust the quantity. <figure><img src="/files/psqye9hIjKerJJEYYW3S" alt=""><figcaption></figcaption></figure> **\*The table can be adjusted so the price on the table reflects the quantity chosen.** To do so, open the code editor inside the page and perform a CTRL+F for “Price”. Find the section that looks like the screenshot below where you can see the table headers for Item, Quantity (if not removed), and Price. <figure><img src="/files/Qcx2VcTq0bOycBFAxcpX" alt=""><figcaption></figcaption></figure> Go to the title within this table which is defined as “Price” and change “Price” to “Total” Once that is changed, be sure to save the editor, then save the page and publish the funnel. ### Product Images <a href="#shoppingcartelement-productimages" id="shoppingcartelement-productimages"></a> If product photos are stored in Checkout Champ CRM, when a shopping cart element with an image is added to a page, the CRM image will display on the page when the product is selected. Make sure your base product has an image under CRM→Products . <figure><img src="/files/7NLNQmUDmXNLNFUZEs2V" alt=""><figcaption></figcaption></figure> Once your page is previewed or published and the product is selected, the image will be presented from CRM: <figure><img src="/files/DPHhnrCDGz5qVQ7tQXmz" alt=""><figcaption></figcaption></figure> ### Shopping Cart <a href="#shoppingcartelement-shoppingcart" id="shoppingcartelement-shoppingcart"></a> Our Shopping Cart element comes with all of the features and data of the Legacy cart. However, the Shopping Cart element has more flexibility when it comes to styling. The cart is built on Bootstrap rows and columns which allows users to utilize flex settings to change the layout across all screen sizes. It also allows users to change how the order information is displayed given users more options when designing pages. <figure><img src="/files/a1DqipQxemOakUsJuBSY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/mQgUVAO9Y9YWh8gVvjt5" alt=""><figcaption><p>Default mobile view</p></figcaption></figure> ### Additional Features/Settings <a href="#shoppingcartelement-additionalfeatures-settings" id="shoppingcartelement-additionalfeatures-settings"></a> The Shopping Cart also allows features not available in the Legacy Cart. By duplicating the default product price box and changing the associated CSS classes, you can also show customers the product compare at price, product savings and/or product savings percentage. Then you can style each new figure as needed, even adding additional text boxes to show any additional text you may want to show (as shown below). <figure><img src="/files/ZfaoURHRXQefwlTWq6Oi" alt=""><figcaption><p>Additional Features</p></figcaption></figure> To add these features to your cart, you would need to duplicate the default product price box and edit the CSS classes to display the desired data. <figure><img src="/files/FJtrZ6NSoaabohHI50f6" alt=""><figcaption><p>Edit CSS Classes</p></figcaption></figure> The additional CSS classes are below: To display the product compare at price, use "cc-cart-row-prod-compare"![](/files/bGpehh48qv6Za3xr567o) To display the product savings, use "cc-cart-row-prod-saving" ![](/files/DYWbBGZUaSXurGrtFoxY) To display the product saving percentage, use "cc-cart-row-prod-saving-perc"![](/files/heN7fbW1CDTB3Hxs1Qvr) To display product savings with a minus sign before the currency sign, use “cc-negative-savings”. Once added, you can style as needed using the font settings for each element. **Items of note:** These additional elements are displayed “per product” in the cart. The “Compare At Price” is set on the Campaign Offer. <figure><img src="/files/s27on4Bt5yR1TFCru1GU" alt=""><figcaption></figcaption></figure> The calculations are done as follows: “Product Savings” = Compare At Price - Offer Price “Product Savings Percentage” = (Compare At Price - Offer Price) / Compare At Price X 100 <details> <summary>How to adjust the cart to horizontal on mobile view</summary> * Search for the column with class col-sm-9 and replace it with col-9 ![](/files/LRe9DK1ai9k0uXlalerQ) * Search for the column with class col-sm-3 and replace it with col-3 ![](/files/qjpPEfKqaVfxDCWSRQ8N) * In the CSS set padding and margin to 1px on cc-cart-container * In the CSS set cc-cart-row to font-size:13px on @media (max-width:480px) * Set the text to align left it already isn't ![](/files/if4dHNYwv4Jj9g6SeG9t) </details> ### Side Cart / Drawer Cart <a href="#shoppingcartelement-sidecart-drawercart" id="shoppingcartelement-sidecart-drawercart"></a> Several of our pages will have a side cart (also called a drawer cart) available in the header element. Clicking the cart icon will open a side cart containing an order summary similar to our other order summaries with button to move to a cart page or go straight to your checkout page. In order to style the details of this element, you will first need to add a Header element, then open the side cart. <figure><img src="/files/jlPmJdW3ACJQfU09xLua" alt=""><figcaption></figcaption></figure> Once the Header element has been added to the page, you may open the side cart by clicking on the shopping cart icon in the top menu of the builder. Clicking the shopping cart icon visible on the page itself will not open the side cart in the builder. Once the side cart is open you are free to style as needed. <figure><img src="/files/nRPtwnt1Tb9IYeaxxY4F" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Clicking the shopping cart icon visible on the page’s Header element will open the Font Awesome icon selector allowing you to choose a different icon. Clicking that icon will not open the side cart. {% endhint %} # Button Blocks Inside the Buttons menu within the Building Blocks you have several buttons to choose from to add to your pages.\ \ You will find that some buttons have different styling variations, however, the functionality will remain the same across the different variants. <figure><img src="/files/97iAk3fezj7TycGUylAD" alt=""><figcaption></figcaption></figure> With the button element selected from the page, you can open the settings for the element to adjust several settings <figure><img src="/files/BFAOjk8lRFxtrwF2GaKW" alt=""><figcaption></figcaption></figure> **Title** - Gives a name to the button so you can easily identify it when applying to the page arrows on the funnel visualizer. **Text** - This is the text that displays onto the button. If no Title, the Text will show when configuring page arrows. **Action** - See [Button Actions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/button-blocks/button-and-link-actions) **Product** - Allows you to tie a product to a button so it is submitted with the customer's information. If your product was passed in from the previous page, or the checkout page has radio buttons or checkboxes with products applied, then you may not need to apply a product to the Checkout/Submit button. **Variant** - Same as product value but for that product’s specific variant. **Replacement** - This is useful for upgrading a one-time to a subscription on an upsell page. Will replace the product chosen in this value with the product selected in the product/variant value. **Animation** - Allows you to set an animation to your buttons. Can also be used to [hide a button](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) during a video. **Delay (Min)** - Sets a delay on when the button will begin animating. **Delay (Sec)** - Sets a delay on when the button will begin animating. **Speed** - Sets the speed of the animation. **Loop** - Choose if the animation should loop or not. **Align** - This will align the button to the left, center, or right side of the element it resides in. # Button & Link Actions There are various actions available on buttons. Most of these actions are also available on links. *** ## **Add To Cart** This action will add a product to the customer’s shopping cart, without navigating the customer to another page of the funnel. This is mainly used for storefront websites that contain a catalog of products and a dedicated cart page. ## **Submit + Route** Submit page data to the CRM and route the customer to the next page of the funnel. This action can be used to submit lead information, billing/shipping information, product information, and card information. Submit + Route should be used on Lead Pages where a form exists, and any Checkout Page or Upsell Page buttons that should allow the customer to buy the product(s). ## **Route to Next Page** Route the customer to another page in the funnel. Any inputs on the page will be saved to the user session. Any products chosen on the page will be saved in the shopping cart. This action is most commonly used on a landing page that contains a product selection without a form for the customer to enter their information. ## **Route & Clear Cart** Route & Clear Cart will route the customer to another page in the funnel. However, any products in the shopping cart will be removed. This action is most commonly used when offering a customer a discounted product on a secondary checkout page, typically triggered by an Exit popup. ## **Open Section** Open another element on the page. Specify the ID of that element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, any other buttons on the page that open a section will have their sections closed. The sections to open are available in the page builder for you to design, but those sections will be hidden when the published page loads. ## **Open Section + Hide** Open another element on the page AND hide this button. Specify the ID of the element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Submit Lead + Open Section** This action facilitates lead submission on a checkout page. Submit entered inputs for processing, remain on the page, open another element on the page, and hide this button. Specify the element to open in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Open Popup** Open the page popup. This is another type of trigger for the popup (on the popup itself you can choose to trigger on load or on scroll, with a time delay). See [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up) for more information. ## **Apply Coupon** If there is a coupon field on the page, this action will apply the entered coupon code to the order. ## Login Allow the customer to log into their account so they can purchase with their card on file. ## Default This option applies no action to the button. This is useful if you are using the button or link to trigger some sort of custom script. {% hint style="info" %} PayPal, Affirm, AfterPay, Klarna, Sezzle, iDEAL, Bancontact, GiroPay, Apple Pay, Amazon Pay and Google Pay buttons should always be set to **Submit + Route** {% endhint %} # Product Blocks Inside the Products menu within the Building Blocks you have several options to choose from to add to your pages.\ \ The Checkbox and Radio Button options are also available under the [Forms](broken://pages/MoWZFbWoEEpmI6p9PYOG) menu, but only the Product variation of these elements will allow you to tie a product to the checkbox or radio button.<br> * [Product Checkbox](#productblocks-productcheckbox) * [Product Radio Buttons](#productblocks-productradiobuttons) * [Variant Selection](#productblocks-variantselection) * [Product Selection](#productblocks-productselection) * [Product Tile](#productblocks-producttile) * [Order Bump](#productblocks-orderbump) <figure><img src="/files/JSRmaQ5ReDFxBSOp23Vx" alt=""><figcaption></figcaption></figure> *** ### Product Checkbox <a href="#productblocks-productcheckbox" id="productblocks-productcheckbox"></a> Dragging this Block onto the page will add three checkboxes to the page. You can remove any extras if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/i5T56As4tNi1fch26CjX" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/az7DHIEd8nbQwMGlunoH" alt=""><figcaption></figcaption></figure> *** ### Product Radio Buttons <a href="#productblocks-productradiobuttons" id="productblocks-productradiobuttons"></a> Dragging this Block onto the page will add three radio buttons to the page. You can remove the extra radio buttons if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/pNq8C6e5HmkilmDbWVd8" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the radio button and open the element’s settings within the Style Manager. You can also set a radio button to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/VeAEptIMlJbRAJhvDrAd" alt=""><figcaption></figcaption></figure> *** ### Variant Selection <a href="#productblocks-variantselection" id="productblocks-variantselection"></a> There are two premade variant selection blocks that you can drag onto your page where you can allow the customer to choose from multiple variants of a single product. <figure><img src="/files/gUDdjtVQpySEDDky832L" alt=""><figcaption></figcaption></figure> To apply a product to the element, you will click on the empty space within the element and then open the element’s settings After you apply the product, the variant options will be available within the dropdown menu. If you don’t have three variants, you can remove any extras by clicking the element and then the Trash Can on the element tool bar. *** ### Product Selection <a href="#productblocks-productselection" id="productblocks-productselection"></a> This is a premade element that allows you to quickly drag a button and image onto the page. <figure><img src="/files/0m1J0upQHc2ZBsHbjc8V" alt=""><figcaption></figcaption></figure> To apply a product to the element, click on the button and then open the element’s settings to choose the product and button action. *** ### Product Tile <a href="#productblocks-producttile" id="productblocks-producttile"></a> Dragging this Block onto the page will add three product tiles with radio buttons to the page. You can remove the extra tiles if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/jyJNrgeS7KdegZ1C2RVq" alt=""><figcaption></figcaption></figure> You can adjust the formatting within the [Style Manager](https://konnektive.atlassian.net/wiki/spaces/CC/pages/1859554055/Style+Manager) and swap out the images for your own product images. To apply products to each option, click on either the radio button or the normal button within each tile and then open the element’s settings to choose the product. You can also set a radio button to be preselected when the page loads by enabling the Checked option. *** ### Order Bump <a href="#productblocks-orderbump" id="productblocks-orderbump"></a> This is a premade element that you can drag to your page to offer extra products for the customer to purchase before submitting their payment on the checkout page. <figure><img src="/files/sERw92nPN1cLTcUqns89" alt=""><figcaption></figcaption></figure> You can adjust the formatting and the text within the element within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles). To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. *** # Carousel / Slider Blocks * [Carousel Elements](#carousel-sliderblocks-carouselelements) * [Additional Slides](#carousel-sliderblocks-additionalslides) * [Carousel Style](#carousel-sliderblocks-carouselstyle) * [Carousel Images](#carousel-sliderblocks-carouselimages) * [Thumbnail Nav Images](#carousel-sliderblocks-thumbnailnavimages) * [Carousel Settings](#carousel-sliderblocks-carouselsettings) * [Custom Slick Slider Settings](#carousel-sliderblocks-customslickslidersettings) Carousel Blocks offer several drag-on options for adding Image Carousels/Sliders to your pages. Built using the robust Slick Slider framework, each Carousel has a different layout but they come with the same available settings. To get started, navigate to the Carousel section of the Building Blocks menu and drag one of the Carousels onto your page. Please note, Carousels will need to be placed inside a column element to function correctly. <figure><img src="/files/2NA2TkNN4KJksGC6eKPu" alt=""><figcaption></figcaption></figure> ### Carousel Elements <a href="#carousel-sliderblocks-carouselelements" id="carousel-sliderblocks-carouselelements"></a> Each Carousel is made up of individual elements: * The Carousel container * The Carousel Slide container * The image and/or text of each slide <figure><img src="/files/H1PtWgVH2xfiYTqgk6Re" alt=""><figcaption></figcaption></figure> The image above shows each Carousel element highlighted by layer. {% hint style="info" %} Please note: You cannot select every layer simultaneously as depicted in this image. However, selecting the layer above will also select the elements contained in that layer. For example, selecting and duplicating a Carousel Slide element will also duplicate the image and text contained within that slide. {% endhint %} ### Additional Slides <a href="#carousel-sliderblocks-additionalslides" id="carousel-sliderblocks-additionalslides"></a> Each Carousel element begins as a main slide. You can add as many slides needed by clicking the duplicate button on any existing Carousel Slide element. Each duplicate slide will appear in sequential order after the copied slide. Once duplicated, you may edit each of the slide elements individually. <figure><img src="/files/fvWqMuLby5AzyWdNSV12" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} Take care to duplicate only the “Carousel Slide” element (the box surrounding the slide image and/or text). You do not want to duplicate the entire “Carousel” element. You also do not create additional slides by duplicating only the image. You must duplicate the “Carousel Slide” element. {% endhint %} ### Carousel Style <a href="#carousel-sliderblocks-carouselstyle" id="carousel-sliderblocks-carouselstyle"></a> After you drag a Carousel element onto the page, you can edit the slide elements (images and text) using standard styling (font settings, dimensions, etc.). Making these styling choices on the first slide will make it easier to replicate styles on subsequent slides as you would typically duplicate the first slide to make additional slides. {% hint style="info" %} It should be noted that carousel styling is best done by adding classes to the style elements rather than styling every component individually. For image dimensions, it is best to leave the image dimensions on “auto”. Then, allow the carousel dimensions to be dictated by its surrounding column. {% endhint %} ### Carousel Images <a href="#carousel-sliderblocks-carouselimages" id="carousel-sliderblocks-carouselimages"></a> Once you have duplicated the initial slide to create new slides, you will need to add your own slide images. To change the images in your slides, navigate to each individual slide by clicking on the arrows, dots, or dragging the image left-to-right. Once on the correct slide, double-click each image and select or upload your new image. ### Thumbnail Nav Images <a href="#carousel-sliderblocks-thumbnailnavimages" id="carousel-sliderblocks-thumbnailnavimages"></a> While the thumbnail slides and the main carousel slides are linked for navigation, in reality they are two distinct carousels. You need to select individual images for each carousel. However, the thumbnail slides will drive the navigation for the main carousel. For example, the first thumbnail slide will navigate to the first main slide. The second thumbnail slide will navigate to the second main slide, etc. You need only select images for each of the carousel slides in both the main carousel and the thumbnail carousel. ### Carousel Settings <a href="#carousel-sliderblocks-carouselsettings" id="carousel-sliderblocks-carouselsettings"></a> Each carousel includes a variety of settings to control how the slides function. Open the Settings tab to style Carousel operation. The function of each setting is described below: <figure><img src="/files/zYYmZm0Iwq7TXl2EOZEG" alt=""><figcaption></figcaption></figure> | **Setting** | | | --------------- | --------------------------------------------------------------------------- | | Touch Swipe | Allow navigating by swiping the slide, in addition to an arrows and/or dots | | Show Arrows | Show the navigation arrows | | Arrow Position | <p>Outside Carousel<br>Inside Carousel</p> | | Infinite | Continues back to the first slide when the last slide is reached | | Dots | Show navigation dots under the slides | | Vertical Slide | Slide the carousel up and down | | Vertical Swipe | Swipe up and down to move to the next slide | | Autoplay | Carousel slides automatically slide on page load | | Pause On Select | Stops autoplay when slide is clicked | | Pause On Hover | Pauses autoplay on mouse hover | | Fade | Adds a “fade” transition so one slide “fades” into the next | | Show Slides | Enter how many slides will show at once | | Scroll Slides | Enter how many slides will scroll at once | | Autoplay Speed | Number of seconds to wait between swipes | | Navigation For | Sets this carousel as thumbnail navigation for the specified carousel | ### Custom Slick Slider Settings <a href="#carousel-sliderblocks-customslickslidersettings" id="carousel-sliderblocks-customslickslidersettings"></a> For those familiar with manually installing Slick Slider carousel code, you do have the option to add custom Slick Slider settings directly in the carousel javascript. **The main carousel script should NOT be edited.** However, there is a “-var” script included with each carousel. The “-var” script is used to add custom javascript settings available from the [Slick Slider settings](https://kenwheeler.github.io/slick/) options. <figure><img src="/files/VjtsKtACFZoJwBqvYuzR" alt=""><figcaption></figcaption></figure> {% hint style="warning" %} If not done correctly, directly editing the HTML and JavaScript code of your page could negatively impact the performance of your carousel and/or your page. {% endhint %} # Icon Blocks Inside the Icons menu within the Building Blocks you have several options to choose from to add to your pages. <figure><img src="/files/ENd5kLxSyhbES43shFwS" alt=""><figcaption></figcaption></figure> After you drag an icon onto the page, you can click on the icon again to adjust it’s size by dragging the corners of the icon.\ \ If there is not an icon you are looking for, you can also use an [Image](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/basic-blocks) element to upload a picture. *** These are all of the available icons at the writing of this article: <figure><img src="/files/BjI4zm3Yi3Ix2aJYvsC0" alt=""><figcaption></figcaption></figure> # Social Media Blocks You can add social media icons to your pages for all of the major social media sites. These elements are located inside the Social Media menu within the Building Blocks. <figure><img src="/files/Wwm0DS2Ip1yVH9fZARR2" alt=""><figcaption></figcaption></figure> After you drag an icon onto the page, you can click on the icon again to adjust it’s size by dragging the corners of the icon.\ \ Also with the icon selected, you can set the link that the icon will open to within the element’s settings inside the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles). <figure><img src="/files/BOLGlJ1fBFCNalf9Tyv5" alt=""><figcaption></figcaption></figure> *** These are all of the available social media icons at the writing of this article: <figure><img src="/files/YLoU1Zd3at5gax8tCb0B" alt=""><figcaption></figcaption></figure> # Testimonial Blocks Inside the Testimonials menu within the Building Blocks you have several options to choose from to add to your pages. <figure><img src="/files/60ASXzT037JSK7Ur5jmt" alt=""><figcaption></figcaption></figure> After you drag a testimonial template onto the page, you can edit the images and adjust the formatting to your content.\ \ You can quickly add another testimonial of that same type by clicking on the space within the element that highlights the entire element, and then click the Duplicate button. <figure><img src="/files/VFYB1mbZeqEPpB51O38t" alt=""><figcaption></figcaption></figure> <br> # Extra Blocks * [Bullet List](#extrablocks-bulletlist) * [Progress Bar](#extrablocks-progressbar) * [Collapsible List / FAQ Section](#extrablocks-collapsiblelist-faqsection) * [Timer](#extrablocks-timer) The “Extra” blocks are a collection of elements that can be used to add additional functionality to your pages. <figure><img src="/files/iU8OZKF7I5hEuKU57HYy" alt=""><figcaption></figcaption></figure> ### Bullet List <a href="#extrablocks-bulletlist" id="extrablocks-bulletlist"></a> The bullet list block is used to add a bullet list to your pages. <figure><img src="/files/U7YAhJt7EyBiqpKpUNL4" alt=""><figcaption></figcaption></figure> Once dragged onto the page, the bullet list text can be styled using the Font settings. The bullet icon itself can be changed by clicking the icon and selecting a new icon from the Font Awesome icon selector. <figure><img src="/files/f4d0VKPeV0G6J2J4E4FL" alt=""><figcaption></figcaption></figure> When duplicating bullet list items to extend the number of items in your list, it is important to note the need to select the correct element. Do not duplicate the box containing the bullet text. You would need to arrow up and duplicate the “LI” element. <figure><img src="/files/1RmhIF7OkskAvt9gJbaV" alt=""><figcaption></figcaption></figure> ### Progress Bar <a href="#extrablocks-progressbar" id="extrablocks-progressbar"></a> The progress bar element is used to display the perception of progress across multiple pages. The progress bar does not actually track progress across pages. The progress percentage is a display element set on each page. There are several progress bar blocks available. The different blocks differ in style, but functionally they are the same. <figure><img src="/files/ruY4qmIuLp2m9egNWbjg" alt=""><figcaption></figcaption></figure> After dragging the progress bar block onto the page. Click the portion of the element containing the progress percentage ( % ). Once selected, you can change the font style, background settings and progress percentage in the settings menu. <figure><img src="/files/fhvcUJUEKY9isz1H3kP4" alt=""><figcaption></figcaption></figure> ### Collapsible List / FAQ Section <a href="#extrablocks-collapsiblelist-faqsection" id="extrablocks-collapsiblelist-faqsection"></a> There are two collapsible list blocks available. The difference between the two is the location of the dropdown icons (left or right). Functionally, they are the same. <figure><img src="/files/BqdNDTBYaKl3xCb649VQ" alt=""><figcaption></figcaption></figure> To use the collapsible list to add an FAQ-style question and answer section to your pages. Simply drag the block onto the page and edit as needed. Click on the different text elements to type your own questions and answers (descriptions) and use the Font settings to style accordingly. You may also change the open/close icons by clicking the icon and selecting a new icon from the Font Awesome icon selector. The top icon is the “open” icon. The bottom icon is the “close” icon. <figure><img src="/files/edJ8byEhY1xnqP9Nnvqj" alt=""><figcaption></figcaption></figure> Should you want one or more of the FAQs to be open by default, check the box for “Default Open” in the list settings. This would be set per FAQ. <figure><img src="/files/VUmUBo6eC2pDdkuyi604" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Please note: The FAQs/Collapsible Lists will always remain “open” inside the builder. {% endhint %} ### Timer <a href="#extrablocks-timer" id="extrablocks-timer"></a> The Timer element would be used any time you would like to add a timer to your pages to instill a sense of urgency on your pages. <figure><img src="/files/ldHiOsPGLuda309QMv8b" alt=""><figcaption></figcaption></figure> After you drag a timer block onto the page you can click on the numbers/text and use the Font menu under the Style Manager to adjust the font type, size, and color of the text and numbers. <figure><img src="/files/KpHEUe4WXUydf7PA6XXc" alt=""><figcaption></figcaption></figure> To configure the Timer itself, click on the space to the far left or right within the element that highlights the entire Timer element. Then open the element’s settings inside the [Style Manager ](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles)to configure the Timer. <figure><img src="/files/oz5XLAaqKSoXrhbH1QVe" alt=""><figcaption></figcaption></figure> **Timer Type**: * Minute Timer - Timer set based on Hours, Minutes, and Seconds values * Countdown Timer - Counts down to the Date and Time specified in the **Start** value * Count Up Timer - Timer counts up from 0 until the time set in the Hours, Minutes, and Seconds values **End Text**: The text you want to display after the timer completes. End Text could display a simple text message (EXPIRED!), a url to send users to another page (<https://etc>), or an element ID to open a previously hidden element (#12345) **Align**: Choose the alignment of the Timer within the element it resides **Hours**: Sets the hour value on the timer. Will overlap to Days value if >24 hours and Days is not removed from the Timer **Minutes**: Sets the minute value on the timer **Seconds**: Sets the seconds value on the timer Relative Links: [Make a button appear after a set amount of time](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) # My Element Blocks Inside the My Elements menu within the Building Blocks you see all of the elements that you have previously saved. This allows you to drop an element that you’ve built on to several pages without having to rebuild that element.<br> <figure><img src="/files/dYokjRH1shfoEQlJXCUF" alt=""><figcaption></figcaption></figure> \ Only Row, Column and Box elements can be saved to your My Elements section. To save a row, column, or box element, click on the area of the element where the column itself becomes highlighted. Then click the floppy disk icon to save that element for future use. {% hint style="info" %} Keep in mind the elements must fit inside of the page structure you are using them in. Columns go inside of Rows and so on. {% endhint %} <figure><img src="/files/tKxTuGaX4y5aAxsQLo9G" alt=""><figcaption></figcaption></figure> After you click save, name the element so it can be easily identified later on. <figure><img src="/files/Etv2QWXYzBAnO4Q11bBG" alt=""><figcaption></figcaption></figure> After saving the name of the element, you will now find this under your My Elements section. <figure><img src="/files/PIAGJjyw8en1PowO8LuX" alt=""><figcaption></figcaption></figure> To remove a saved element, open the My Elements section and then click the trash can icon on the element you’d like to remove. <figure><img src="/files/CUSlx3ZLnKiFjkl1jeSc" alt=""><figcaption></figcaption></figure> {% hint style="info" %} For more specific elements you can search the element id in the HTML and add data-box=”true” after the opening div, save it. Click on the element again and you will be able to save it. {% endhint %} # Page Builder 2.0 The new and improved CheckoutChamp page builder is here! [Explore all the new features.](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/new-features) #### Perform the upgrade Select any page on the visualizer and click the Settings gear icon. Then choose the **Upgrade to 2.0** button. <figure><img src="/files/VOs5JKFmnJdBJ9InxUxp" alt="" width="563"><figcaption></figcaption></figure> Follow the prompts to upgrade the page. There is also an option to upgrade all pages in the funnel. Choose the "all" option only when you are certain, as the procedure to revert the upgrade is page-by-page. Edit the page as you do any other page. #### Revert the upgrade You can revert the upgrade of a single page at any time. Open the page Settings. Choose **Version History**. <figure><img src="/files/bkY1W2hrioxW7glwjL3Z" alt="" width="563"><figcaption></figcaption></figure> Select the box next to the version prior to 2.0. Then press **Restore**. Any changes made on 2.0 will be lost. <figure><img src="/files/2VwHKtdCrPSGvSbZUPSp" alt="" width="563"><figcaption></figcaption></figure> ### Relative Links * [Builder Toolbar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar) * [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) * [Layer Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/layer-manager) * [Building Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks) * [Adding Local HTML Files](/funnel-builder/creating-and-editing-funnels-pages/adding-local-html-files) # New Features! Our new page editor contains everything you love about CheckoutChamp plus all of these new features 1. Streamlined UI/UX 2. Light and Dark modes 3. Absolute positioning of elements 1. Show relative positioning alignment and distances when dragging 2. Ability to overlap elements 3. Ability to group/ungroup elements 4. Ordering of absolutely positioned elements using Context Menu 1. Bring To Front 2. Send To Back 3. Bring Forward 4. Send Backward 4. Ability to switch between pages while in the page editor (edit multiple pages in one page editor session) 5. Right-click to perform operations on an element 1. Lock 2. Delete 3. Duplicate 4. Edit Code 5. Hide on all devices 6. Move front and back, for overlapped absolute-positioned elements 6. Page Builder keyboard shortcuts 1. Delete (Delete / Backspace) 2. Duplicate (Ctrl D / Cmd (⌘) D) 3. Edit Code (Ctrl E / Cmd (⌘) E) 4. Undo (Ctrl Z / Cmd (⌘) Z) 5. Redo (Ctrl Y / Cmd (⌘) Y) 6. Close the code editor, popup manager, and color picker (Esc) 7. Context Menu 1. Open for the current selected element (Right-click) 2. Open for the last selected element (Ctrl + Right-click) - Helpful when there is less whitespace for the element to be right-clicked 8. Open browser default context menu (Shift + Right-click) 7. Text Editor keyboard shortcuts 1. Use these shortcuts on the rich text editor 2. Copy (Ctrl C / Cmd (⌘) C) 3. Paste (Ctrl V / Cmd (⌘) V) 4. Bold (Ctrl B / Cmd (⌘) B) 5. Italic (Ctrl I / Cmd (⌘) I) 6. Underline (Ctrl U / Cmd (⌘) U) 7. Strikethrough (Ctrl + Shift + X / Cmd (⌘) + Shift + X) 8. Code Editor keyboard shortcuts 1. Use these shortcuts in the code editor 2. Go to parent (Ctrl P) 3. Close code editor (Esc) 4. Undo (Ctrl Z / Cmd (⌘) Z) 5. Redo (Ctrl Y / Cmd (⌘) Y) 9. Improved Undo and Redo 10. Improved Layer Manager 1. Rename elements 2. Right-click inside Layer Manager to manage elements 3. Keyboard shortcuts 11. Wider Settings and Style Manager panel to be fully readable on desktop and laptop 12. Style Manager 1. Basic and Advanced tabs on Style Manager. Your preference is retained leaving the page editor. 2. Ability to change styles for even/odd elements 13. Simple toggle to hide elements on each device on Settings Manager 14. Ability to easily switch between sub-types of elements in Settings Manager 1. Testimonial (and maintains content when switching) 2. Carousel 3. Order Bump 4. Button 5. Survey 6. Variant Product Sections 15. Blocks, Settings, and Style Manager all sit on top of the page editor canvas and can be moved around for page visibility. The page encompasses the entire width of the monitor. 16. Preview in a new tab, with ability to switch between 5 device views 17. Product Sections - variants and images of the assigned product are visible in the editor 18. Color picker retains the previous 15 colors selected per user 19. Color picker contains the main site color 20. Ability to multi-select elements and update styles for all 21. Ability to lock an element (settings and style and position) 22. Ability to view and edit code on an element 23. Improved code editor 1. Formatted and validated html and css 2. Expand html and css sections for readability 3. Full head and body sections in html 24. Group elements (Shift + Click or Ctrl + Click) 25. Icon selection moved from element to Settings Manager # Builder Toolbar The Builder Toolbar is a quick navigation menu which supports valuable functions. It is found at the top of every Checkout Champ page within the Page Builder. <figure><img src="/files/2yQDsmdgrtj9xZt0pkP1" alt=""><figcaption></figcaption></figure> *** ## Blocks Open the Blocks Menu to add new elements to the page. <figure><img src="/files/1NDBoqyiU3sZ6k51CoZn" alt=""><figcaption></figcaption></figure> ## Layer Manager Open the Layer Manager to view, rename, reorganize, lock, and show/hide the layers on the page. <figure><img src="/files/mL9Wr64wcnYWO6CgHqVF" alt=""><figcaption></figcaption></figure> Use the "Show Hidden Layers" button to highlight your hidden layers. Use the "Expand All" button to expand all of the layers on the page. ## Edit Code View and edit all page code. Use the right and left arrows to expand the viewing area for either html or css. Use **Format** to make a section more easily viewable. <figure><img src="/files/HFAK8yKcaxSOjdnNuQNu" alt=""><figcaption></figcaption></figure> <figure><img src="/files/q6SxezvlcMPq07qw7Yu2" alt=""><figcaption></figcaption></figure> ## Device Selection Switch between devices. There are 5 options - desktop, large tablet, tablet, large mobile, mobile. Please see [Device View Changer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/device-view-changer) for more information. <figure><img src="/files/45fCbvufcji4LNVLi1Dz" alt=""><figcaption></figcaption></figure> ## Page Selection Switch between pages in the funnel. Edit multiple pages without leaving the page builder. You will be prompted to save any pending edits when switching pages. <figure><img src="/files/qYkuFsPVFleQ3jbIZtlK" alt=""><figcaption></figcaption></figure> ## ChatGPT Use ChatGPT to help with page content <figure><img src="/files/QXKS2HaeJMiIUTaMUdCb" alt=""><figcaption></figcaption></figure> ## View Components Choose to hide or reveal the component borders <figure><img src="/files/3P5gPToDdrnvR9UjX6cZ" alt=""><figcaption></figcaption></figure> ## Popup Use the Popup button to launch the Popup Manager. Add and edit popups here. <figure><img src="/files/Jok0Cm4XohDHBRUGnMeU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fw3cMBUKVLwm6tAb6CR3" alt="" width="375"><figcaption></figcaption></figure> Please see [Popup Documentation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/popups) for more information. ## Sticky Bar Select Sticky Bar to add and edit the page sticky bar. <figure><img src="/files/ZWNliXIDthF7Df99TdEJ" alt=""><figcaption></figcaption></figure> A sticky bar is a horizontal bar that you can “stick” on the bottom of your Checkout Champ page to display a message, product button, picture or anything interesting so that it is always displayed prominently, yet non-intrusively. ## Import If you have built your page outside of Checkout Champ, you can import it by selecting the import feature. <figure><img src="/files/4ywYpKNataG2zCELe9vC" alt=""><figcaption></figcaption></figure> Enter the URL and press **Import** <figure><img src="/files/10DcJln25F3XwDsLkIRd" alt="" width="375"><figcaption></figcaption></figure> ## Undo and Redo Undo and Redo allow you to easily remove or add changes back as you are editing. <figure><img src="/files/Ip1CulsN9mrlHcle3bf4" alt=""><figcaption></figcaption></figure> ## Help Select the ' ? ' to access all Checkout Champ Knowledge Base articles, like this one! <figure><img src="/files/Ufq0I6anhtIQmW0wS3K8" alt=""><figcaption></figcaption></figure> ## Clear Canvas Clear Canvas will allow you to wipe the canvas clear and start with a blank page. <figure><img src="/files/71sA3RPEBrvYAwl83AL8" alt=""><figcaption></figcaption></figure> If the canvas is mistakenly cleared, then use Undo to revert it or exit the page builder without saving. ## Absolute/Relative Position The Absolute/Relative toggle allows you to move an element to an absolute position or to a position relative to other components. <figure><img src="/files/ZkFe6P4HTbt3cj9JnGzB" alt=""><figcaption></figcaption></figure> ## Light/Dark Mode The Light/Dark Mode toggle allows you to set the page builder color scheme based on your preference. <figure><img src="/files/OSi3OQLT7dDgCpRH4Es0" alt=""><figcaption></figcaption></figure> ## Preview Use the Preview button to open the page in a new tab <figure><img src="/files/ZMWhgbgjSvWMyeeKsHfl" alt=""><figcaption></figcaption></figure> ## Save Save your changes to the page. There are options - Save, Save & Close, and Close. <figure><img src="/files/y8K4lNQtnIkiS4hpf5il" alt=""><figcaption></figcaption></figure> # Device View Changer Checkout Champ provides the necessary tools to make your pages responsive and beautiful on any device. While many responsive features are automatic, you can customize your layout as needed. Using the Device View Changer, you can view and edit your page layout using 5 preset screen sizes reflecting commonly used devices: <figure><img src="/files/eGB823PqczAXL1YglFru" alt="" width="563"><figcaption></figcaption></figure> (Desktop, Laptop/Large Tablet, Tablet, Large Mobile and Mobile) By selecting the different device views in the editor, you can see how your page will look on the 5 different screen sizes. You can also modify your page design to reflect styling specific to the different device layouts. As you edit, the styling changes cascade downward. <figure><img src="/files/OKljpCol77Ddw9br860M" alt="" width="563"><figcaption></figcaption></figure> Any styling edits made on the desktop view will cascade down across all screen sizes. However, you can use the Device View Changer to edit the smaller screen sizes independently. This allows you to change the styling for tablet and mobile screens or even hide elements you don’t want visible on the smaller screen sizes. # Popups Popups can be used in a variety of ways, but the generally the purpose is to keep customers engaged on your site. Upon clicking the Popup button within the Page Builder Toolbar, the Popup Manager will display so you can add a new popup or to edit an existing one. There is no limit to how many popups you can create. <figure><img src="/files/Jok0Cm4XohDHBRUGnMeU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fw3cMBUKVLwm6tAb6CR3" alt="" width="375"><figcaption><p>Popup Manager</p></figcaption></figure> Once you have clicked the “Add new popup” button or the Edit button on an existing popup, the popup will display within the builder and you can edit elements as you normally would. The Popup-body element (the outermost parent element of the popup) has settings within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) to further customize your popup. <figure><img src="/files/Pcn1iE87VuW7T9ZfndnN" alt="" width="563"><figcaption></figcaption></figure> **Delay (Min and Sec)**: Delay the popup from triggering for a determined amount of time. **Trigger On** options include: * Trigger On Load - The popup displays when the page initially loads completely. * Trigger On Scroll - The popup displays when the user starts to scroll down on the page. * Trigger On Exit - The popup displays when the user's mouse cursor leaves the window. \*\*See below for triggering a popup upon the click of a button or link **Popup Width**: Choose between Small, Medium, and Large sized popup. **Corner Radius**: Choose how rounded the corners of the popup should be. **Edges**: Choose if All, None, the Top Only, or the Bottom Only edges should use the corner radius selection. **Animate**: Add an animation to your popup. **Animation Duration (Sec)**: Set how long, in seconds, that the animation for your popup should last. When you have finished designing your popup, click the Popup button again within the Page Builder Toolbar to close the popup. {% hint style="info" %} If you ever want to disable a popup, you can either set the Trigger On setting to None, or you can delete the popup from the Popup Manager. {% endhint %} *** ### \*\*Trigger Popup when a button or link is clicked <a href="#popups-triggerpopupwhenabuttonorlinkisclicked" id="popups-triggerpopupwhenabuttonorlinkisclicked"></a> There may be cases where you would prefer the popup to display when the customer clicks a button or link on the page. To do this, make sure the Trigger On setting within your popup is set to None. Next, close the popup designer and click on the button or link that you would like to trigger the popup. With the button or link highlighted, click the Style Manager button and open the Settings for the element. Finally, set the button/links **Action** selection to Open Popup and set the **Popup** selection to the popup you would like to display when the button/link is clicked. **\*Required fields will need to be filled before the Popup will load** <figure><img src="/files/j1qTWat3HJRKqASp6ki5" alt="" width="563"><figcaption></figcaption></figure> {% hint style="warning" %} If you ever decide to remove the popup, make sure you edit your button/link to adjust the action accordingly. {% endhint %} # Settings & Style Manager ## Select Settings to reveal the settings management panel. <figure><img src="/files/gwH2GjVycEvZdqAMZ81e" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/o8ghcesnC2NV8dfokgh2" alt="" width="360"><figcaption></figcaption></figure> **Settings** **-** each element has different settings ## Select Styles to reveal the style management panel. <figure><img src="/files/ugnDY5HR47Vk5UVnjspz" alt="" width="563"><figcaption></figcaption></figure> ### Basic: <figure><img src="/files/OSTiMJnCtb9AkLXArYeY" alt="" width="358"><figcaption></figcaption></figure> **State** - Choose state to determine when an element is styled, or which child elements are styled. * State - The default state will style the element chosen with no action * Hover - When the mouse is hovering over the element * Active - When an element has been selected * Even - Even numbered child elements * Odd - Odd numbered child elements **Dimension** - Adjust the margins and padding of the element **Font** - Easy to adjust the font type, color, size, etc **Border** - Easy to adjust the border for the element **Background** - Control the background style of the element ### Advanced: <figure><img src="/files/uHTt4CvC9pzO5GI0LtNT" alt="" width="357"><figcaption></figcaption></figure> **State** - Choose state to determine when an element is styled, or which child elements are styled. * State - The default state will style the element chosen with no action * Hover - When the mouse is hovering over the element * Active - When an element has been selected * Even - Even numbered child elements * Odd - Odd numbered child elements **Size** - Adjust the width and height **Spacing** - Adjust the margin and padding **Font** - Precise adjustments of the font including the type, color, etc **Border** - Precise adjustments to the border for the element **Effects** - Adjust the color, background, shadow, text shadow **Extra** - Adjust the opacity of an element **Flex** - Control flex properties of the element ## Select the arrow button to dock to the other side of the page. <figure><img src="/files/S4pVIXvIrhL98cBmhMis" alt="" width="563"><figcaption></figcaption></figure> # Layer Manager The Checkout Champ Layer Manager allows you to manage your page structure to nest components and manage page elements quickly and easily. To find a specific element in the layer manager, open the layer manager with the hamburger icon on the far right of the tool bar. Once the layers are displayed, go ahead and click on the element you would like to find. Once you do so the element will be displayed inside the layer manager. <figure><img src="/files/oszfFuuCKh4VKeDet7lA" alt="" width="562"><figcaption></figcaption></figure> As your page grows, you can reposition elements by clicking and dragging rows to different positions, view and hide elements (eye icon), and reveal (arrow icon) and manage nested elements. <figure><img src="/files/mxV6yQ7HgrZOY3DodZkm" alt="" width="563"><figcaption></figcaption></figure> {% hint style="info" %} Hiding an element from the desktop view will hide the element across all device views. However, you can hide an element on the tablet and/or mobile view and it will remain on the desktop view. {% endhint %} # Hiding and Revealing Elements The layer manager can be used in powerful ways to optimize a page layout for different devices. For example, you could have a large, wide image displayed on desktop, but hide it on mobile devices and instead reveal a smaller, narrower design for mobile. This feature allows you to create a different visual experience based on screen size using the built-in viewports (Desktop, Large Tablet, Tablet, Large Mobile and Mobile). <figure><img src="/files/bIPzeQvLzlA5GqiEDeLy" alt="" width="375"><figcaption></figcaption></figure> #### Here’s how you can do it. <a href="#hidingandrevealingelements-hereshowyoucandoit" id="hidingandrevealingelements-hereshowyoucandoit"></a> The initial screen in the builder is the Desktop layout. Start by adding all the different viewport layouts onto the builder. In this screenshot you can see, we have a different layout for each viewport available. <figure><img src="/files/gQcu3CoyMI9IxouEnxNH" alt=""><figcaption></figcaption></figure> After initially adding each element, navigate to the layer manager in the top left hamburger menu. <figure><img src="/files/MXc5oPLRK81dzenrDrEK" alt=""><figcaption></figcaption></figure> Then you select each layout for the smaller devices. After selecting each element, it will be highlighted in the layer manager as seen below. <figure><img src="/files/m9HogrED2TDxQ7Xr9M6D" alt=""><figcaption></figcaption></figure> From there, click the “eye” icon to hide these elements intended for smaller devices. You should notice they will disappear while on the desktop view now. (Note: they will remain hidden until un-hidden) <figure><img src="/files/PAGtNcvetL29DiUTm0Xo" alt=""><figcaption></figcaption></figure> When hiding elements, keep in mind the builder cascades downward. So if you hide an element on desktop, it is hidden on all the remaining viewports below desktop (unless you make that element visible on one of the smaller viewports). Using a combination of the viewports and layers, you can show and hide elements across all 5 screen sizes. # Building Blocks Blocks are elements you can add to your page using a quick and easy drag and drop action. Blocks have unique styling and configuration options and are described below. When editing a page you will find the Blocks Menu on the top left of the screen. <figure><img src="/files/ORJPQPwuUKVLBERD1ijX" alt="" width="277"><figcaption></figcaption></figure> You find links for each Building Block section below: * [Basic Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/basic-blocks) * [Form Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/form-blocks) * [Button Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks) * [Product Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/product-blocks) * [Extra Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks) * [My Element Blocks](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/my-element-blocks) # Basic Blocks Basic blocks are webpage elements which are common to most pages. <figure><img src="/files/QSK60wxAZcTOhK8ysAz4" alt="" width="265"><figcaption></figcaption></figure> *** ## **Columns** <a href="#basicblocks-columns" id="basicblocks-columns"></a> Columns allow you to divide your page into sections and edit unique sections of your page. An inner column can divide column elements into smaller sections of your page. {% hint style="info" %} *You need at least a single column added to the page builder to begin placing other elements.* {% endhint %} <figure><img src="/files/Poj8swwg2s0x9VfXambA" alt=""><figcaption></figcaption></figure> ## **Box** <a href="#basicblocks-box" id="basicblocks-box"></a> Box is an additional div element to use as a container of other elements <figure><img src="/files/Z765WctqCRCwja9hnV95" alt="" width="121"><figcaption></figcaption></figure> * Elements not supported inside a Box: Header, Footer, Inner Row. * Box cannot be dropped inside the following elements: Body, Row, Product Row, Text, Headline, Link, Image, Video, Map, Horizontal Line, Select, Input, Checkbox, Radio, Buttons, Label, Survey Options, Carousel. ## **Header** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Header to your page which can be styled to your liking. This element is used to apply a [Common Header](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements#commonpageelements-commonheader) to your funnel pages. <figure><img src="/files/JbcHyoJGCev6hDCBcISR" alt="" width="117"><figcaption></figcaption></figure> ## **Footer** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drag a pre-formatted Footer to your page which can be styled to your liking. This element is used to apply a [Common Footer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/common-page-elements#commonpageelements-commonfooter) to your funnel pages. <figure><img src="/files/ZfYo7YhA5J9Xbx8FtfM4" alt="" width="117"><figcaption></figcaption></figure> ## **Headline and Text** <a href="#basicblocks-headlineandtext" id="basicblocks-headlineandtext"></a> Drage a Headline or Text element to your page. <figure><img src="/files/WYmxRKMckl0BqORTJ6M8" alt="" width="240"><figcaption></figcaption></figure> Text inside Headline and Text elements can be modified from the inline Text Editor menu. You can change the font, size, and style, etc. A text element can also be converted to a link. <figure><img src="/files/j2AbYLE2QIIJPLgZ3AYU" alt="" width="375"><figcaption></figcaption></figure> Text can also be styled and managed in the Font styling menu. Basic: <figure><img src="/files/u5buqE0u93JWNvaInwYy" alt="" width="261"><figcaption></figcaption></figure> Advanced: <figure><img src="/files/L8x4koHlLl2zX2kAIcaU" alt="" width="220"><figcaption></figcaption></figure> ## **Link** <a href="#basicblocks-link" id="basicblocks-link"></a> Drag a link element to embed a link onto the page. <figure><img src="/files/WEbAzNTby0hHhZ1pBeRe" alt="" width="96"><figcaption></figcaption></figure> Within the Style menu for the link you can define the following attributes and behaviors: <figure><img src="/files/h8cGBg9GATIPFolKBCIW" alt="" width="239"><figcaption></figcaption></figure> * Title: (Required) The text displayed for your link. * Link: When a link is defined, the visitor will be taken to an external redirect. * Action: (Required) What to do when your visitor selects the link. * Full details are [here](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks/button-and-link-actions) * Target: Defines which window the visitor will navigate to the url in: * This Window * New Window * Product: Assign a product to the link * Variant: Assign a variant to the link (must select Product first) * Replacement: Assign the product that should be replaced when the customer buys an "upgrade" * Animate: Apply an animation to your link * Delay (Seconds): Add a delay (in seconds) before your link animation starts * Speed: Select the speed at which the animation plays * Loop: Choose if the animation should loop or not * Align: Define the alignment of your link respective to its parent element (column, inner column, etc.) ## **Image** <a href="#basicblocks-image" id="basicblocks-image"></a> You can add images to your Checkout Champ Page and asset folder by dragging the Image Block to your page. <figure><img src="/files/UtZjiRfq2SrPiGKeJ2IH" alt="" width="103"><figcaption></figcaption></figure> When you drag an image to your page, the image folder will display which will allow you to perform the following actions: #### Select an image from your Checkout Champ Assets Folder: <figure><img src="/files/O5ralcSaBoE4xUdmogG9" alt=""><figcaption></figcaption></figure> #### Upload an image to your Checkout Champ Assets Folder: <figure><img src="/files/Ink7In4hpMsCOaib43V2" alt=""><figcaption></figcaption></figure> #### Select an icon from the Checkout Champ Icon Library: <figure><img src="/files/noxPbizgJwAXrK1nfnHJ" alt=""><figcaption></figcaption></figure> #### Select a Stock image from Unsplash: <figure><img src="/files/TpZkXS1QTL2vtfGKJyMc" alt=""><figcaption></figcaption></figure> #### Enter the image's source URL: <figure><img src="/files/mn3HLlZ4ywSvhE6Kfi8A" alt=""><figcaption></figcaption></figure> Once your image is added to your page, you will be able to format and style it in the following ways: <figure><img src="/files/YfoWIz7Od7o8cfFqDQVj" alt="" width="355"><figcaption></figcaption></figure> * Title: Define a Title for your image. * Alt: Define alternative text for your image. * Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. * Alt tags will be displayed in place of an image if an image file cannot be loaded. * Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly. * Link: You can configure a link to your image so that when a visitor selects the image, they can be taken to a different site. * Target: If you have configured a link on your image, you can define whether the user will be taken to a different site in the same browser window or if a new browser window will be opened. * Align: Define the alignment of your image respective to its parent element (column, inner column, etc.) ## **Video** <a href="#basicblocks-video" id="basicblocks-video"></a> You can easily add exciting video content to your Checkout Champ page. <figure><img src="/files/ViyTjfWQFZPq67GB0nuW" alt="" width="102"><figcaption></figcaption></figure> After dragging the Video element to the page, open the style manager to define the settings for your video. <figure><img src="/files/4KULeSAeyPwJDtjG5D3u" alt=""><figcaption></figcaption></figure> * Provider: Checkout Champ can support video content from the following providers: * HTML 5 Source * YouTube * YouTube (No cookie) * Vimeo * Wistia * JW Player * Rumble * Source: Once you select the video provider, you can define where your content is stored with that provider by setting the source. * Poster: If you want a specific image to display before your video plays, you can define a poster. * Autoplay: By enabling autoplay, your video content will begin as soon as the visitor arrives at your site. * Loop: By enabling loop, the video will restart once it has been completed. * Controls: By enabling controls, your visitor will be able to control your page’s video to pause, play, enable full-screen mode, and more. * Aspect Ratio: Choose from a set of predeteremined aspect ratios #### Videos: Call to action <a href="#basicblocks-videos-calltoaction" id="basicblocks-videos-calltoaction"></a> {% hint style="info" %} **This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers** {% endhint %} Call-to-action displays an element at a set time in a video **Step 1**: Select the video element. Open the video manager by clicking the clock icon. <figure><img src="/files/hTwpj0tMYdZeovH54Bfa" alt="" width="563"><figcaption></figcaption></figure> **Step 2**: Enter the time and the Id of the element to open at that time. <figure><img src="/files/GuUs7xWK16AddehGSeCT" alt="" width="563"><figcaption></figcaption></figure> Press “Add new time log” to enter as many open times as needed **Step 3**: Save and Publish # Rows & Columns Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows. <figure><img src="/files/TAk4aCkXoeQxBaK7qNHP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6SOPrYCooBDyb6Lieohz" alt=""><figcaption></figcaption></figure> #### CSS styling in Checkout Champ <a href="#rows-and-columns-cssstylingincheckoutchamp" id="rows-and-columns-cssstylingincheckoutchamp"></a> Our rows and columns rely on the Bootstrap CSS framework which adds style to the page. A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry! Here are some tips to master designing a page in FK: #### Column Sizing <a href="#rows-and-columns-columnsizing" id="rows-and-columns-columnsizing"></a> <figure><img src="/files/lDXNTCt1y907YWVsayq1" alt=""><figcaption></figcaption></figure> To size columns the easiest way is to drag the icon on the side of the column and slide it to the width you desire. However, if you want uniform columns and rows across all devices, you’ll need to hop into the code editor. <figure><img src="/files/rFmCXJFHu62QJCBZ20Fa" alt="" width="563"><figcaption></figcaption></figure> Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem! When you open up the code editor, perform a browser search (CTRL + F on Windows, or Command+F on Mac) and type in “fk-col.” What you now see should be the same as the image below. Each “fk-col” on the left-hand HTML column of the code editor represents each column on your page. “fk-row” represents each row on your page - they are found directly above each “fk-col.” “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes gives each column and row the style you see on it automatically. <figure><img src="/files/HICp9hDYmlOe4kJtz6YC" alt=""><figcaption></figcaption></figure> But let’s say on mobile you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into bootstrap. (See this page for reference - <https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp>) First, lets design for mobile views. (See our article on device view here) Let’s set the default size of the columns by adding “col-12” to the class tag by spacing over after “fk-col” and typing “col-12”. Do this for both columns. Flex styling operates on fractions of Twelve, so “col-12” assigns the column to span all 12 horizontal fractions of the viewable screen. This setting ensures that both columns stretch across the whole width of the page which is perfect for mobile. For desktop lets add “col-lg-8” to the class tag after our new “col-12” class. This tells our Column 1 to fit to Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. Now add “col-lg-4” to Column 2 classes and click save. # Form Blocks Checkout Champ allows you to build custom forms or use premade form templates. The form templates available are dependent on the page type you are creating.<br> * [Form](#formblocks-form) * [Input](#formblocks-input) * [Label](#formblocks-label) * [Radio Button](#formblocks-radiobutton) * [Checkbox](#formblocks-checkbox) * [Select](#formblocks-select) * [Select Month & Select Year](#formblocks-selectmonth-and-selectyear) * [Shopping Cart](#formblocks-shoppingcart) <figure><img src="/files/3l8FzxHPswklmRL5fT66" alt="" width="347"><figcaption></figcaption></figure> *** ### Form <a href="#formblocks-form" id="formblocks-form"></a> <figure><img src="/files/pqx2F5ckTn6giPr5J2B2" alt="" width="95"><figcaption></figcaption></figure> The form element will add a basic form to your page which you can add more inputs to and style to your needs and preferences. This form includes the following fields: * Name - Input Field for First Name * Email - Input Field for Email address * Gender - Radio Buttons with Male/Female options * Save/Submit Button - Button element which can be configured to perform specific actions based on your preference. <figure><img src="/files/GFcyLicegy7IlaJFNcmL" alt=""><figcaption></figcaption></figure> *** ### Input <a href="#formblocks-input" id="formblocks-input"></a> <figure><img src="/files/EML2CfrK5HuVG5tM9jOb" alt="" width="96"><figcaption></figcaption></figure> A form input field which can be used to collect custom data. After selecting an Input element, use the Settings inside the Style Manager to determine which field that the input represents. {% hint style="success" %} Additional instructions for Custom Fields:[ Applying custom fields to inputs](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/applying-custom-fields-to-inputs) Additional instructions for Placeholder formats: [Placeholders and Input Formats](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/placeholders-and-input-formats) {% endhint %} <figure><img src="/files/17UEVm1FRcI0DHsYcM1b" alt=""><figcaption></figcaption></figure> *** ### Label <a href="#formblocks-label" id="formblocks-label"></a> <figure><img src="/files/A52xWD4dRsirl7KwqEHD" alt=""><figcaption></figcaption></figure> Use labels to define form elements.<br> *** ### Radio Button <a href="#formblocks-radiobutton" id="formblocks-radiobutton"></a> <figure><img src="/files/n66N0UlxFK0L2BfbA8OL" alt=""><figcaption></figcaption></figure> Add a radio button element to your page when you want your visitors to make a selection. A radio button can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your radio button. <figure><img src="/files/8wYCxOpUx7366KenkeG7" alt="" width="563"><figcaption></figcaption></figure> *** ### Checkbox <a href="#formblocks-checkbox" id="formblocks-checkbox"></a> <figure><img src="/files/63bCkVkqvcllFAyIvAwg" alt=""><figcaption></figcaption></figure> Add a checkbox element to your page when you want your visitors to select or acknowledge something on your page. A checkbox can also perform an action which will expand a page section when selected. This can be configured by specifying an Open Id for your checkbox. <figure><img src="/files/v0if3xtSsu0en9zfu3xs" alt="" width="563"><figcaption></figcaption></figure> *** ### Select <a href="#formblocks-select" id="formblocks-select"></a> <figure><img src="/files/ybs59rpiXM83Yhz63Qxe" alt=""><figcaption></figcaption></figure> This element can be used to provide a drop down menu of different options.\ \ After dropping the Select element to your page, click on the element and view it’s settings under the Style Manager. <figure><img src="/files/8ahx2E9wITWSIOO9LPVO" alt="" width="526"><figcaption></figcaption></figure> Set the Name of the element from the dropdown options. If you choose Card Month, Card Year, Ship Profile, State, Ship State, Country or Ship Country, the options for the customer will automatically appear on the live page. *** ### Select Month & Select Year <a href="#formblocks-selectmonth-and-selectyear" id="formblocks-selectmonth-and-selectyear"></a> <figure><img src="/files/MlZCBTe282CVEc7LvGgX" alt=""><figcaption></figcaption></figure> These are premade versions of the Select element which are preset to be a month/year selector. *** ### Shopping Cart <a href="#formblocks-shoppingcart" id="formblocks-shoppingcart"></a> <figure><img src="/files/IjIY114XcSnAMbUcP7L3" alt=""><figcaption></figcaption></figure> Please view [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/form-blocks/shopping-cart-element) for more information about the Shopping Cart element. # Shopping Cart Element The shopping cart elements are used to dynamically display the customer’s chosen product details and the corresponding prices and amounts. The shopping cart element blocks are also sometimes known as an “order summary”, but the elements in the builder are labeled as a “Shopping Cart”. ### Legacy Cart <a href="#shoppingcartelement-legacycart" id="shoppingcartelement-legacycart"></a> The Legacy Shopping Cart element displays the chosen product details, including a **per unit price\*** for each product in the table and can be found under the Forms section of the Building Block elements. <figure><img src="/files/LE61NmHPlRYfZUGrpJaR" alt=""><figcaption></figcaption></figure> **\*See instructions below to make the price in the table reflect the quantity chosen.** <figure><img src="/files/7ZUomHxsvGftwwg5XxyP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/2DTe6xxk2Yo6hkPguWhL" alt=""><figcaption></figcaption></figure> This element comes with two options for displaying the quantity. You can remove either the quantity bubble or the entire quantity column (both parts). <figure><img src="/files/JK2OqDzrBiQ9GhJWVrbt" alt=""><figcaption></figcaption></figure> If you decide to use the quantity column, this provides the customer with the ability to adjust the quantity of the products the chose by default, but these buttons can be removed if you don’t want the customer to adjust the quantity. <figure><img src="/files/Bc6UOoVPjAxkq9UjWMsf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/46CvDFso2OFky0tLrIyH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Q7qc5kIjKksuSzGywpOs" alt=""><figcaption></figcaption></figure> <figure><img src="/files/gNY9ydovTXGOk5uWyrMS" alt=""><figcaption></figcaption></figure> **\*The table can be adjusted so the price on the table reflects the quantity chosen.** To do so, open the code editor inside the page and perform a CTRL+F for “Price”. Find the section that looks like the screenshot below where you can see the table headers for Item, Quantity (if not removed), and Price. <figure><img src="/files/Qcx2VcTq0bOycBFAxcpX" alt=""><figcaption></figcaption></figure> Go to the title within this table which is defined as “Price” and change “Price” to “Total” Once that is changed, be sure to save the editor, then save the page and publish the funnel. ### Product Images <a href="#shoppingcartelement-productimages" id="shoppingcartelement-productimages"></a> If product photos are stored in Checkout Champ CRM, when a shopping cart element with an image is added to a page, the CRM image will display on the page when the product is selected. Make sure your base product has an image under CRM→Products . <figure><img src="/files/7NLNQmUDmXNLNFUZEs2V" alt=""><figcaption></figcaption></figure> Once your page is previewed or published and the product is selected, the image will be presented from CRM: <figure><img src="/files/DPHhnrCDGz5qVQ7tQXmz" alt=""><figcaption></figcaption></figure> ### Shopping Cart <a href="#shoppingcartelement-shoppingcart" id="shoppingcartelement-shoppingcart"></a> Our Shopping Cart element comes with all of the features and data of the Legacy cart. However, the Shopping Cart element has more flexibility when it comes to styling. The cart is built on Bootstrap rows and columns which allows users to utilize flex settings to change the layout across all screen sizes. It also allows users to change how the order information is displayed given users more options when designing pages. <figure><img src="/files/a1DqipQxemOakUsJuBSY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/mQgUVAO9Y9YWh8gVvjt5" alt=""><figcaption><p>Default mobile view</p></figcaption></figure> ### Additional Features/Settings <a href="#shoppingcartelement-additionalfeatures-settings" id="shoppingcartelement-additionalfeatures-settings"></a> The Shopping Cart also allows features not available in the Legacy Cart. By duplicating the default product price box and changing the associated CSS classes, you can also show customers the product compare at price, product savings and/or product savings percentage. Then you can style each new figure as needed, even adding additional text boxes to show any additional text you may want to show (as shown below). <figure><img src="/files/ZfaoURHRXQefwlTWq6Oi" alt=""><figcaption><p>Additional Features</p></figcaption></figure> To add these features to your cart, you would need to duplicate the default product price box and edit the CSS classes to display the desired data. <figure><img src="/files/9KjBTlQtCenPh1qpHINb" alt=""><figcaption></figcaption></figure> The additional CSS classes are below: To display the product compare at price, use "cc-cart-row-prod-compare" <figure><img src="/files/metugjTOjLF7QcJZWCSm" alt=""><figcaption></figcaption></figure> To display the product savings, use "cc-cart-row-prod-saving" <figure><img src="/files/nYzKN25KmfejvwN3APwJ" alt=""><figcaption></figcaption></figure> To display the product saving percentage, use "cc-cart-row-prod-saving-perc" <figure><img src="/files/HIpmgnSdMUFKsm6FKiEv" alt=""><figcaption></figcaption></figure> To display product savings with a minus sign before the currency sign, use “cc-negative-savings”. Once added, you can style as needed using the font settings for each element. To display the total compare prices of all items in the cart, use "compareAtTotal". To add "compareAtTotal", duplicate one of the existing "totals", like Sub Total or Grand Total. Then change the class to "compareAtTotal". <figure><img src="/files/UfCpsKD44hgtAdn3eOcn" alt=""><figcaption></figcaption></figure> **Items of note:** These additional elements are displayed “per product” in the cart. The “Compare At Price” is set on the Campaign Offer. <figure><img src="/files/s27on4Bt5yR1TFCru1GU" alt=""><figcaption></figcaption></figure> The calculations are done as follows: “Product Savings” = Compare At Price - Offer Price “Product Savings Percentage” = (Compare At Price - Offer Price) / Compare At Price X 100 <details> <summary>How to adjust the cart to horizontal on mobile view</summary> * Search for the column with class col-sm-9 and replace it with col-9 <img src="/files/YWbVd9GnuoIfw9FdYcr1" alt="" data-size="original"> * Search for the column with class col-sm-3 and replace it with col-3 ![](/files/zis73i7JOfGbwTxBL78W) * In the CSS set padding and margin to 1px on cc-cart-container * In the CSS set cc-cart-row to font-size:13px on @media (max-width:480px) * Set the text to align left it already isn't <img src="/files/QKWnwHV5vtNpVeCMGEOJ" alt="" data-size="original"> ![](/files/if4dHNYwv4Jj9g6SeG9t) </details> ### Side Cart / Drawer Cart <a href="#shoppingcartelement-sidecart-drawercart" id="shoppingcartelement-sidecart-drawercart"></a> Several of our pages will have a side cart (also called a drawer cart) available in the header element. Clicking the cart icon will open a side cart containing an order summary similar to our other order summaries with button to move to a cart page or go straight to your checkout page. In order to style the details of this element, you will first need to add a Header element, then open the side cart. <figure><img src="/files/XS0STKlTtWJOa43mH84T" alt=""><figcaption></figcaption></figure> Once the Header element has been added to the page, you may open the side cart by clicking on the shopping cart icon in the top menu of the builder. Clicking the shopping cart icon visible on the page itself will not open the side cart in the builder. Once the side cart is open you are free to style as needed. <figure><img src="/files/qSkEUQaXGdwDIR1EFG3I" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Clicking the shopping cart icon visible on the page’s Header element will open the Font Awesome icon selector allowing you to choose a different icon. Clicking that icon will not open the side cart. {% endhint %} *** Cart Notes <figure><img src="/files/VZVNXrt72HkpcoKvG5OB" alt=""><figcaption></figcaption></figure> * cc-cart-row-prod-price - single item price, does not change with multiple quantities * cc-cart-row-prod-total - price multiplied by quantity * cc-cart-row-free-label - says FREE instead of 0.00 # Button Blocks Inside the Buttons menu within the Building Blocks you have several buttons to choose from to add to your pages.\ \ You will find that some buttons have different styling variations, however, the functionality will remain the same across the different variants. <figure><img src="/files/gVPGbbgMtQyL0WC9JO3S" alt=""><figcaption></figcaption></figure> With the button element selected from the page, you can open the settings for the element to adjust several settings <figure><img src="/files/gU3NTiorH8v8fLPCLAGc" alt=""><figcaption></figcaption></figure> **Title** - Gives a name to the button so you can easily identify it when applying to the page arrows on the funnel visualizer. **Text** - This is the text that displays onto the button. If no Title, the Text will show when configuring page arrows. **Action** - See [Button Actions](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks/button-and-link-actions) **Product** - Allows you to tie a product to a button so it is submitted with the customer's information. If your product was passed in from the previous page, or the checkout page has radio buttons or checkboxes with products applied, then you may not need to apply a product to the Checkout/Submit button. **Variant** - Same as product value but for that product’s specific variant. **Replacement** - This is useful for upgrading a one-time to a subscription on an upsell page. Will replace the product chosen in this value with the product selected in the product/variant value. **Animation** - Allows you to set an animation to your buttons. Can also be used to [hide a button](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/make-a-button-appear-after-a-set-amount-of-time) during a video. **Delay (Min)** - Sets a delay on when the button will begin animating. **Delay (Sec)** - Sets a delay on when the button will begin animating. **Speed** - Sets the speed of the animation. **Loop** - Choose if the animation should loop or not. **Align** - This will align the button to the left, center, or right side of the element it resides in. # Button & Link Actions There are various actions available on buttons. Most of these actions are also available on links. *** ## **Add & Open Cart** Adds the selected product to the customer’s cart and opens the drawer cart. Intended for storefronts with a product catalog and a configured drawer cart. ## **Add To Cart** This action will add a product to the customer’s shopping cart, without navigating the customer to another page of the funnel. This is mainly used for storefront websites that contain a catalog of products and a dedicated cart page. ## **Submit + Route** Submit page data to the CRM and route the customer to the next page of the funnel. This action can be used to submit lead information, billing/shipping information, product information, and card information. Submit + Route should be used on Lead Pages where a form exists, and any Checkout Page or Upsell Page buttons that should allow the customer to buy the product(s). ## **Route to Next Page** Route the customer to another page in the funnel. Any inputs on the page will be saved to the user session. Any products chosen on the page will be saved in the shopping cart. This action is most commonly used on a landing page that contains a product selection without a form for the customer to enter their information. ## Route + Clear Cart Same as **Route To Next Page** but clear the cart before routing. ## **Open Section** Open another element on the page. Specify the ID of that element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, any other buttons on the page that open a section will have their sections closed. The sections to open are available in the page builder for you to design, but those sections will be hidden when the published page loads. ## **Open Section + Hide** Open another element on the page AND hide this button. Specify the ID of the element in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Submit Lead + Open Section** This action facilitates lead submission on a checkout page. Submit entered inputs for processing, remain on the page, open another element on the page, and hide this button. Specify the element to open in the Open Id entry. Rows, columns, and boxes can be opened using this action. When the button is pressed and the section opened, the button is hidden. The button will not be shown again on the page, unless the page is refreshed. No other sections are affected by this action. The sections to open are available in the page builder for your design, but will be hidden when the published page loads. ## **Open Popup** Open the page popup. This is another type of trigger for the popup (on the popup itself you can choose to trigger on load or on scroll, with a time delay). See [this article](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/use-link-or-button-to-initiate-a-pop-up) for more information. ## **Close Popup (Popup Only)** Closes the popup without navigating away from the current page. ## **Submit Lead & Close Popup (Popup Only)** Submits the lead form data and closes the popup without redirecting the user, keeping them on the same page. ## **Apply Coupon** If there is a coupon field on the page, this action will apply the entered coupon code to the order. ## Login Allow the customer to log into their account so they can purchase with their card on file. ## Default This option applies no action to the button. This is useful if you are using the button or link to trigger some sort of custom script. {% hint style="info" %} PayPal, Affirm, AfterPay, Klarna, Sezzle, iDEAL, Bancontact, GiroPay, Apple Pay, Amazon Pay and Google Pay buttons should always be set to **Submit + Route** {% endhint %} # Product Blocks Inside the Products menu within the Building Blocks you have several options to choose from to add to your pages.\ \ The Checkbox and Radio Button options are also available under the [Forms](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/building-blocks/form-blocks#formblocks-form) menu, but only the Product variation of these elements will allow you to tie a product to the checkbox or radio button.<br> * [Product Checkbox](#productblocks-productcheckbox) * [Product Radio Buttons](#productblocks-productradiobuttons) * [Variant Selection](#productblocks-variantselection) * [Product Selection](#productblocks-productselection) * [Product Tile](#productblocks-producttile) * [Order Bump](#productblocks-orderbump) <figure><img src="/files/AwgojGDBThLEQ251oXvV" alt=""><figcaption></figcaption></figure> *** ### Product Checkbox <a href="#productblocks-productcheckbox" id="productblocks-productcheckbox"></a> Dragging this Block onto the page will add three checkboxes to the page. You can remove any extras if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/0qYxdZ8gIFpVMbG568vx" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/HukLi4betFqV0M8anUfq" alt=""><figcaption></figcaption></figure> *** ### Product Radio Buttons <a href="#productblocks-productradiobuttons" id="productblocks-productradiobuttons"></a> Dragging this Block onto the page will add three radio buttons to the page. You can remove the extra radio buttons if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/wNvuBONWpB3Aln1kEICB" alt=""><figcaption></figcaption></figure> To set a product or product variant to the checkbox, click on the radio button and open the element’s settings within the Style Manager. You can also set a radio button to be preselected when the page loads by enabling the Checked option. <figure><img src="/files/MIDbmTtnsJ2gQh6lvGoH" alt=""><figcaption></figcaption></figure> ### Product Radio Type You may choose between two types of Product Radio elements in the element settings: Basic or Advanced Basic product radios contain no style and require clicking directly on the radio to select it. <figure><img src="/files/aB1RYFyhGtddcRmZRuxc" alt=""><figcaption></figcaption></figure> Advanced product radios are surrounded by their own labels. This allows the user to click anywhere in the label to select that radio. You may style the label as needed to give it more of a product section look. You may also hide the product radio as clicking anywhere in the label will select the radio. <figure><img src="/files/YanomuP5e2VPy7UoWb1n" alt=""><figcaption></figcaption></figure> *** ### Variant Selection <a href="#productblocks-variantselection" id="productblocks-variantselection"></a> There are two premade variant selection blocks that you can drag onto your page where you can allow the customer to choose from multiple variants of a single product. <figure><img src="/files/gUDdjtVQpySEDDky832L" alt=""><figcaption></figcaption></figure> To apply a product to the element, you will click on the empty space within the element and then open the element’s settings After you apply the product, the variant options will be available within the dropdown menu. If you don’t have three variants, you can remove any extras by clicking the element and then the Trash Can on the element tool bar. *** ### Product Selection <a href="#productblocks-productselection" id="productblocks-productselection"></a> This is a premade element that allows you to quickly drag a button and image onto the page. <figure><img src="/files/0m1J0upQHc2ZBsHbjc8V" alt=""><figcaption></figcaption></figure> To apply a product to the element, click on the button and then open the element’s settings to choose the product and button action. *** ### Product Tile <a href="#productblocks-producttile" id="productblocks-producttile"></a> Dragging this Block onto the page will add three product tiles with radio buttons to the page. You can remove the extra tiles if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below. <figure><img src="/files/jyJNrgeS7KdegZ1C2RVq" alt=""><figcaption></figcaption></figure> You can adjust the formatting within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager) and swap out the images for your own product images. To apply products to each option, click on either the radio button or the normal button within each tile and then open the element’s settings to choose the product. You can also set a radio button to be preselected when the page loads by enabling the Checked option. *** ### Order Bump <a href="#productblocks-orderbump" id="productblocks-orderbump"></a> This is a premade element that you can drag to your page to offer extra products for the customer to purchase before submitting their payment on the checkout page. <figure><img src="/files/sERw92nPN1cLTcUqns89" alt=""><figcaption></figcaption></figure> You can adjust the formatting and the text within the element within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager). To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option. *** ### Two Way Sub Subscription This is a premade element that you can drag to your page to offer two way subscribe and save options. These elements use the subscribe & save profiles set up in the campaign in the CRM. <figure><img src="/files/NnEPs5UIT7vUjWer9WvX" alt=""><figcaption></figcaption></figure> This element just needs to be applied to the page and styled as needed. This element can be used to convert a one-time offer to a subscription and vice versa. Subscripton offers used on this element are taken from [Subscribe & Save Profiles](/crm/crm-setup/campaign-setup/subscribe-and-save-profiles) set in campaigns. When the button to upgrade to a subscription is pressed the element will be hidden on the page. Any items that are shown in the order summary will show a revert back so the client can easily switch the product back to one-time. <figure><img src="/files/If6pmTvl6Lsaiz1JzepO" alt=""><figcaption></figcaption></figure> # Extra Blocks * [Bullet List](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/bullet-list) * [Progress Bar](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/progress-bar) * [Collapsible List / FAQ Section](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/collapsible-list-faq-section) * [Testimonial](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/testimonial-blocks) * [Carousel / Slider](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/carousel-slider-blocks) * [Survey](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/survey) * [Timer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/timer) * [Ticker](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/extra-blocks/ticker) The “Extra” blocks are a collection of elements that can be used to add additional functionality to your pages. <figure><img src="/files/Fvk2QKOFmJ7rMM14Cia9" alt=""><figcaption></figcaption></figure> --- [Next Page](/llms-full.txt/1)