Install The ChargeAfter Plugin

  1. Go to BigCommerce Applications Marketplace > click the Get This App button:
  1. Enter your store:
  1. Click the Install button on the application widget:
  1. After installation, click Confirm:
  1. Enter the Public and Private API keys in the Settings panel. Next, choose your Mode:
  • You will receive two different sets of keys from ChargeAfter from Sandbox and Production environments
  • Choose the appropriate integration environment. We strongly recommend to test your solution in the Sandbox environment before promoting it to Production environment.
  • Choose the transaction type to authorize only or authorize and settle payment
  1. Click the Submit button to apply the changes for your store

Configure The New Payment Method


Why Is This Needed?

BigCommerce requests that a new payment method replaces an existing unused payment method. The documentation shows how to override the option to pay with a Check. If this is an option you need, contact the ChargerAfter merchant onboarding team for guidance.

  1. In your store portal, go to Store Setup > Payments > open the drop-down with offline methods > next to Check payment method, click the Set up button:
  1. Set up the Check payment method by filling in the following data:
    • Display Name: Progressive Leasing
    • Available Countries: United States
  1. Save

Checkout & Account Signup Configuration Changes

  1. In your store portal, go to Advanced Settings > Account Signup Form > Address Fields:
  1. Edit field settings:
    • State/ Province: set checkbox to "Yes this field is required":
  1. Go to Advanced Settings > Checkout > under Checkout Type, select "Optimized One-Page Checkout" option:
  1. You're done!

Add Checkout Disclaimer

Progressive requires that an additional disclaimer be added to your order status page. To add this disclaimer follow the steps below:

  1. From your BigCommerce admin, go to Channel Manager > Scripts.
  2. Click on the "Add Script" button
  3. Set up the script by filling in the following data:
    1. Script name: Progressive Leasing Thank You Message
    2. Placement: Header
    3. Location: All Pages
    4. Script Category: Functional
    5. Script Type: Script
  4. Add the following code to Script Contents:
    window.onload = async function() {
        await new Promise(r => setTimeout(() => r(), 500));
        let orderConfirmationClass = 'orderConfirmation-section';
        let hasSections = document.getElementsByClassName(orderConfirmationClass).length > 0;
        if (hasSections){
            let message = 'If you paid with Progressive Leasing, this "Total" is the amount Progressive Leasing paid on your behalf. It is not your 12-month lease-to-own total cost, which was displayed in your lease pricing summary and lease agreement. To review your Lease-to Own total and any applicable taxes please refer to your email or visit the <a href="" target="_blank">Progressive Leasing website</a>.';
                document.querySelector("div[data-test='payment-instructions']").innerHTML = message;
                let newSection = document.createElement("section");
                newSection.classname = orderConfirmationClass;
                let instructions = document.createElement("div")
                instructions.innerHTML = message;
                let nodeParent = document.getElementsByClassName("orderConfirmation-section")[0].parentNode.appendChild(newSection);
  1. Click on Save in the bottom right corner.