Big Commerce

Suggest Edits

BigCommerce

This guide describes how to integrate Sezzle into your BigCommerce website so that you can provide Sezzle as a payment option for your customers. After integrating Sezzle, your BigCommerce site will:

  • offer Sezzle as a payment option on the checkout page.
  • refund Sezzle payments from your BigCommerce order management system.
  • display Sezzle promotional messaging.
  • authorize and capture payments.

This integration is only available with BigCommerce's Optimized One Page Checkout.

Integration Steps Overview

  1. Enable Sezzle as an online payment method
  2. Install and configure the Sezzle BigCommerce App
  3. Test your integration
  4. (Optional) Sandbox Testing

Before You Begin

  1. You should have a Sezzle merchant account.
  • Please visit our signup page if you don't have an account.
  1. Make sure you have the following Sezzle details handy.
  1. Familiarize yourself with the transaction flow when buying with Sezzle.

Enable Sezzle as an online payment method

  1. Go to Store Setup > Payments.
1851
  1. Go to Online Payment Methods, find Sezzle and click Set up.
3330
  1. Copy your Public Key and Private Key from your Sezzle Merchant Dashboard, and paste them into the corresponding fields.
  2. Select the Transaction Type.
  • Note: If you select Authorize only, payment will only be authorized and will have to be captured later in BigCommerce.
  1. Select the Test Mode: No(Recommended), or Yes for testing.
  2. Click on Save.

Install the Sezzle BigCommerce App

  1. Log in to your website's BigCommerce store admin page.
  2. In the left sidebar, click Apps > Marketplace.
  3. Click BigCommerce.com/Apps.
1826
  1. Search for Sezzle.
1757
  1. Click Sezzle, then click Get This App.
1757
  1. Click Install.
1597
  1. Check the PCI Compliance box, then click Confirm to start the installation.
2334

BigCommerce Sandbox Testing

  1. Select the Test Mode as Yes from Sezzle Settings in Payments section of BigCommerce admin. Make sure you are doing this on your dev/staging website.
3330
  1. On your website, add an item to the cart, then proceed to Checkout and select Sezzle as the payment method.
  2. Click Place Order and you should be redirected to the Sezzle checkout page. If prompted, sign in.
3330
  1. . Enter the payment details using test data then click Complete Order.
  2. After the payment is completed on Sezzle, you should be redirected back to your website and see a successful payment page.
  3. Sandbox testing is complete. You can log in to your Sezzle Merchant Sandbox Dashboard to see the test order you just placed.

BigCommerce Live Checkout

  1. Select the Test Mode as No(Recommended) from Sezzle Settings in Payments section of BigCommerce admin.
  2. On your website, add an item to your cart, then proceed to Checkout and select Sezzle as the payment method.
2850
  1. Click Place Order.
3330

  1. If you are redirected to the Sezzle checkout page, your integration is complete. Congratulations!

  2. Warning Don't complete the payment. Your checkout is now live, so you will be charged if you complete it.

Widget Pre-Configuration

  1. Make sure you have the Sezzle App installed in your store.
  2. Go to Apps > Sezzle.
  3. Copy your Merchant ID from your Sezzle Merchant Dashboard, and paste them into the corresponding fields in the Sezzle App of your BigCommerce admin.
  4. Check the Add Sezzle Widget Script box. This will inject the widget script into the product and cart pages of your store.
  5. Save the configuration.
3578
  1. Go to Storefront > Script Manager. Confirm that the Sezzle Widget scripts appear in the list of installed scripts.
3330
  1. Widget is now ready to be configured.
  2. For finalizing the widget configuration, click Request Addition of Widgets in the widget step of your Sezzle Merchant Dashboard Setup Checklist.

Troubleshooting

If testing was unsuccessful, review the following:

  • Site has Optimized One-Page Checkout enabled.
  • Go to Advanced Settings > Checkout.
  • API Keys were entered correctly.
  • To avoid typos or extra spaces, use the Copy icon in the Sezzle Merchant Dashboard.
  • If you have multiple accounts with Sezzle, each store has its own merchant ID and API Keys that are tied to the store's URL.
  • Add Sezzle Widget Script box is checked.
  • Widget script is present on your website and reflects the Merchant ID from your Sezzle Merchant Dashboard.
  • Go to a product page on your website.
  • Right-click then select Inspect.
  • In the Elements tab, search for widget.sezzle.

Manual Theme Integration

If the Sezzle App fails to maintain the widget script on the product pages, or to add the script manually for additional pages, complete the following steps:

  1. Go to Storefront > Script Manager.
  2. Click the Create a Script button.
  3. Set Name of script to Sezzle Widget.
  4. Set Location on page to Footer.
  5. Set Select pages where script will be added to All pages.
  6. Set Script category to Essential.
  7. Set Script type to Script.
  8. In the Script content area, copy+paste the script, then click Save.

The script to be inserted into your webpage is as follows:

Template:

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={sezzle_merchant_uuid}"></script>
Update {sezzle_merchant_uuid} in the above script template with your site’s Merchant ID (removing the curly brackets), which can be found in the Sezzle Merchant Dashboard.

Example:

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=12a34bc5-6de7-890f-g123-4hi5678jk901"></script>

Instructions may vary slightly depending on your active plug-ins. If the issue persists after completing the above steps, look for other available features that allow the addition of a custom HTML code snippet to the site footer. If no such feature is found, the below steps may be followed as a last resort:

  1. Go to Storefront > My Themes.
  2. In your Current Theme, click Advanced then select Edit Theme Files.
  3. In the confirmation window, click Edit Theme Files.
  4. In the file list, go to templates > pages, then select product.html.
  5. Copy+paste the script into the very bottom of the file, then click Save and Apply Files.
  6. Repeat the previous step for the cart.html file.

For any kind of assistance, reach out to [email protected].

Uninstall Steps

  1. Go to Apps > My Apps.
  2. Under the Sezzle App, click Uninstall.
722
  1. Toggle the button against Sezzle under Store Setup>Payments>Online Payment Methods to disable Sezzle as a payment option.

Updated 8 months ago