Installation

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:
<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>
  1. Click on Save in the bottom right corner.