Install The ChargeAfter Plugin

1. Go to BigCommerce Applications Marketplace > click the Get This App button:

2. Enter your store:

3. Click the Install button on the application widget:

4. After installation, click Confirm:

5. 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

6. 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.

7. 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:

8. Set up the Check payment method by filling in the following data:
   • Display Name: Progressive Leasing
   • Available Countries: United States

9. Save

Checkout & Account Signup Configuration Changes

10. In your store portal, go to Advanced Settings > Account Signup Form > Address Fields:

11. Edit field settings:
    • State/ Province: set checkbox to "Yes this field is required":

12. Go to Advanced Settings > Checkout > under Checkout Type, select "Optimized One-Page Checkout" option:

12. 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:

<script>
    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="https://www.progressivelp.com/myaccount/login" target="_blank">Progressive Leasing website</a>.';
        	
            try{
                document.querySelector("div[data-test='payment-instructions']").innerHTML = message;
            }
            catch(error){
                let newSection = document.createElement("section");
                newSection.classname = orderConfirmationClass;
                
                let instructions = document.createElement("div")
                instructions.setAttribute('data-test','payment-instructions');
                instructions.innerHTML = message;
                
                newSection.appendChild(instructions);
                
                let nodeParent = document.getElementsByClassName("orderConfirmation-section")[0].parentNode.appendChild(newSection);
            }
        }
    }
</script>

4. Click on Save in the bottom right corner.