Shopify (with App Blocks Instructions)

Suggest Edits

Shopify

❗️

Shopify has disabled its Hosted Payment SDK and the legacy Sezzle payment gateway integration.

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

  1. Offer Sezzle as a payment option on the checkout page.
  2. Refund Sezzle payments from your Shopify order management system.
  3. Display Sezzle promotional messaging.
  4. Authorize and capture payments.

Integration Steps Overview

  1. Install and configure the Sezzle Payments app
  2. Test your integration
  3. (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.

Install the Sezzle Payments app

  1. Click on Add app by navigating to the Sezzle Payments app.
  2. Once the app is installed, you will be prompted to enter your production Sezzle public and private API keys.
    For most merchants, we are able to pre-fill the public and private API keys based on the Shopify store. If we cannot uniquely identify the merchant based on the Shopify store, you will be required to fill in the keys.
  3. Click update settings to verify your Sezzle account.
  4. You will be redirected to the payment settings page, where you will need to activate Sezzle Payments for your store.
  5. Click Activate.
  6. Once that is complete you should see Sezzle available as a payment method for your store.
585

To validate that you’ve successfully installed the new Payments App:
You should see Sezzle Payments installed in your Settings > Payments.

🚧

Be sure to activate Sezzle Payments

Without activating Sezzle Payments, Sezzle will not appear in the checkout and the installation process is not complete. Verify this step has been completed.

671

Shopify Live Checkout

  1. In the Sezzle configuration page of your Shopify admin, enter the API Keys from your Sezzle Merchant Dashboard and uncheck the Enable Test Mode checkbox, then save the configuration.
  2. On your website, add an item to your cart, then proceed to Checkout and select Sezzle as the payment method.
  3. Click Place Order.
778
  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.

FAQS

  1. I have my Shopify Payment Capture set to Manual. What do I need to do?

Sezzle Payments will honor your Shopify Payment Capture setting. If you are set to Manual, then you will need to manually capture payment on orders paid for by Sezzle. The authorization period can vary by Sezzle merchant, so we highly recommend you check the Sezzle authorization expiration at Settings > ecommerce in the Sezzle merchant dashboard. You can adjust this expiration period according to your needs.

  1. I have multiple stores on Shopify. What do I do?

There are several ways to install the payments app on your store. We recommend you use an incognito browser for this process. Navigate to https://{your-store.myshopify.com}/admin/settings/payments/alternative-providers/1057901 where the your-store.myshopify.com is to be replaced with the URL of your store. Once you log into the store, the rest of the process is the same. To install the payments app for another store, make sure to close the incognito browser and open a new session on the incognito browser.

  1. The order number in Shopify appeared in the merchant dashboard on Sezzle. I don't see it anymore?

Sezzle no longer has access to the Shopify order number. To track orders from Sezzle on Shopify, click the relevant order and then Click on Information from the gateway. The payment ID should match the ID in the Sezzle Merchant Dashboard under the Reference-ID column.

694

Shopify order details

871

Reference ID inside Sezzle Merchant Dashboard

You can also search in Shopify Admin for Orders for the payment id using the format receipt.payment_id: <payment_id>.

1665

Searching for an order in Shopify

  1. I have the Sezzle inventory locking feature enabled today. Will this be enabled with the new app?

Unfortunately, no. Sezzle will no longer have access to view and adjust the inventory of a Shopify store. Without these permissions, we are unable to offer this feature alongside the new payment app.

  1. Will I be able to refund orders placed through the legacy gateway after moving to the new app?

Yes, refunds will work as usual from the Shopify Orders page for orders placed through the legacy gateway.

Shopify Sandbox Testing

With the new Sezzle Payments app, sandbox testing can be enabled in your Shopify admin by navigating to Settings > Payments > Sezzle Payments, click Manage, check Enable test mode and click Save. Also, be sure to click the Manage button in Sezzle Payments, enter your sandbox API keys, check Testing with Sandbox API Keys and click update settings.

Install the Sezzle Widget app

  1. Log in to your website's Shopify admin.
  2. In your Sezzle Merchant Dashboard Setup Checklist, click Install Sezzle Widget app.
  3. Click Get the App.
  4. Click Install App.
3523
  1. Within the Sezzle Widget app, enter your Public API Key and click link sezzle account.
3550

Integrating Widgets and Checkout Button (with Embed Blocks)

  1. Once your account is linked, select the theme you wish to edit.
3550

If you are using Shopify 2.0, it is recommended that you use our guide to integrate widgets with Shopify blocks here or our guide to integrate the Sezzle Checkout Button using Shopify blocks here

  1. Under Embed Blocks, click preview product page widgets or preview cart page widgets to preview widgets on your shop.
3552
  1. In the Embed Block Editor panel, change the font size and font family as desired, then click Save.
3550
  1. Activate the Sezzle Checkout Button embed block, then click to expand and change the button theme and content as desired.
  2. Click Save.
3548

Request Help

If the Sezzle Widget app is not able to automatically install the Sezzle widget or checkout button on your storefront, please use the Request Help form within the app to contact the Sezzle Merchant Integrations team.

Note: The Request Help form in the Sezzle Widget app is for widget and checkout button help only. For questions regarding your account or issues with the Sezzle payment option at checkout, please reach out to [email protected]

The Sezzle Merchant Integrations team does not respond to inquiries. If you request a response or if we need to contact you regarding your request, we will forward the response through our Merchant Support team.

3550

Integrating Widgets with App Blocks

App Blocks are compatible with Shopify 2.0 themes only. If you wish to install widgets and checkout button on a vintage theme, please refer to the instructions for Embed Blocks above.

  1. In your Shopify Admin, go to Online Store > Themes.
  2. Click the green "Customize" button on the desired theme.
3550
  1. Click on the dropdown menu at the top middle of the screen and select "Products" and complete the remaining steps below for each of the product templates you want the widget to appear on, as well as the Cart page.
  2. Under "Product Information" click "+ Add block" and select "Sezzle Widget".
  3. In the left sidebar drag the "Sezzle Widget" block under the "Price" block (or wherever you'd like the widget positioned on the page).
  4. In the App Block editor panel, adjust font family and font size as desired, then click Save.
3552

If instead of a widget you see red text that says "Please complete the account verification step in ‵Sezzle Widget′ app to render widgets", return to the Sezzle Widget app and enter your public API key.

1345

Integrating Sezzle Checkout Button with App Blocks

  1. In your Shopify Admin, go to Online Store > Themes.
  2. Click the green "Customize" button on the desired theme.
3550
  1. Click on the dropdown menu at the top middle of the screen and select "Cart".
  2. Under "Subtotal" click "+ Add block" and select "Sezzle Checkout Button".
  3. In the left sidebar drag the "Sezzle Checkout Button" block under the "Checkout button" block (or wherever you'd like the button positioned on the page).
  4. In the App Block editor panel, adjust button template and theme as desired, then click Save.
  • Template can be set to Checkout with Sezzle or Pay with Sezzle.
  • Theme can be set to light or dark.
  • The default placement will place the Sezzle Checkout Button after default checkout button and inherit page styles.
    • If unchecked, the button will be placed as indicated by the drag-and-drop placement. Styles may also be affected, based on the placement selected.
3552

If instead of a checkout button you see red text that says "Please complete the account verification step in ‵Sezzle Widget′ app to render widgets", return to the Sezzle Widget app and enter your public API key.

1159

Uninstalling Embed Blocks

  1. In your Shopify Admin, go to Online Store > Themes.
  2. Click the green "Customize" button on the desired theme.
  3. Click the Extensions icon in the left toolbar.
  4. Toggle the desired embed block(s) to the OFF position, then click Save.
708

Uninstalling App Blocks

  1. In your Shopify Admin, go to Online Store > Themes.
  2. Click the green "Customize" button on the desired theme.
  3. Click on the dropdown menu at the top middle of the screen and select "Products" and complete the remaining steps below for each of the product templates you want the widget to be removed from, as well as the Cart page.
  4. In the left sidebar, select the Sezzle Widget section.
  5. At the bottom of the Editor panel, click Remove Block then click Save.
  6. Click on the dropdown menu at the top middle of the screen and select "Cart".
  7. In the left sidebar, select the Sezzle Checkout Button section.
  8. At the bottom of the Editor panel, click Remove Block then click Save.
598

Uninstalling the Sezzle Widget App

  1. Go to Apps > Sezzle Widget.
  2. In the top-right corner, click the Menu icon, then select App Settings.
  3. Click Delete App.

    Deleting the app will automatically remove all app blocks and embed blocks from all themes. Any code change installations will not be removed automatically.

1246

Manual Theme Integration

If the Shopify 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 Sales Channels > Online Store > Themes.
  2. Click Actions, then select Edit Code.
  3. In the Code Explorer, go to the Layout folder and select the theme.liquid file.
  4. Copy+paste the script to the very bottom of the file, 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>

For assistance with widget configuration, click Request Addition of Widgets in the widget step of your Sezzle Merchant Dashboard Setup Checklist.

Widget Troubleshooting

If testing was unsuccessful, review the following:

  • Sezzle Shopify extension is the most updated version.
    • Go to Apps > Sezzle Widget, then click About. If there is an option to upgrade, do so now.
  • Sezzle gateway is activated.
    • Go to Settings > Payment Providers and ensure "Sezzle is active" is listed under the Alternative Payment Methods section.
  • API Keys were entered correctly.
    • If you have multiple accounts with Sezzle, the API Keys are tied to only one URL.
    • It is recommended to use the Copy icon in the Sezzle Merchant Dashboard to avoid typos or extra spaces.
  • Widget script is present on your website and reflects the Merchant ID from your Sezzle Merchant Dashboard.
    • If you have multiple accounts with Sezzle, the Merchant ID are tied to only one URL.
    • Go to a product page on your website.
    • Right-click then select Inspect.
    • In the Elements tab, search for widget.sezzle.
    • If the widget script is not present at all, your theme may not be supported. Contact the Sezzle team for a custom setup.
    • If the widget script URL does not reflect the Merchant ID for this store's Sezzle account, it will need to be updated. Contact the Sezzle team to research and remedy the cause.
  • Widget configuration is present.
    • Go to product page on your website.
    • Right-click then select Inspect.
    • In the Console tab, type document.sezzleConfig.
      • If the value is not undefined and configGroups Array is more than 0, a config is present.
    • Blocks and Embed Blocks support a long list of themes. If your theme is not supported, the config will not be present. Please use the Request Help form to request custom integration.
  • Widget configuration is not being overridden.
    • Go to a product page on your website.
    • Right-click then select Inspect.
    • In the Source tab, open widget.sezzle.com > v1/javascript > price-widget?uuid={merchant_id}
    • If you see document.sezzleConfig in this file, a config override is present and may be out of date. This must be removed or updated from Sezzle's side.
      • Config overrides are necessary for implementing widgets on custom themes or templates, or adding advanced customization options to the widget.
    • If you see a note in this file stating that widgets for this account have been deactivated, please contact Sezzle team to reactivate them.
  • Widget appearance is not to merchant's standards.
  • If you have noticed a bug in the widget, modal, or checkout button please use the Request Help form to notify us of the issue. We can then determine whether this is an issue for all merchants or your specific theme and work to resolve accordingly.
  • We offer a few select customization options. Please use the Request Help form to request any of the following:
    - Grayscale logo
    - Reflect checkout minimum in widget
    - Reflect Sezzle/Afterpay dual widget
    - Style & position changes
    - Conditional rendering for subscription, gift cards, etc.
    - Conditional rendering above a certain price threshold

    Note: Implementing customizations may prevent widgets from showing on unpublished themes and will require help from the Sezzle team to update widgets when a new theme is published.

Updated 4 months ago