What is a Widget?
A widget is a small web application that you embed in your storefront to let customers select and purchase PayWhirl payment plans without ever leaving your site. Every widget is fully responsive—shrinking or expanding to fit desktops, tablets, and phones automatically.
Display Options
Option | When to Use | How it Works |
Embedded Widget | You want the plan selector visible in‐line on the page. | Paste the embed code directly into your page template or description block. |
Buy Button / Popup | You prefer to keep your existing layout uncluttered. | Place a call‑to‑action button that opens the widget in a modal overlay. |
When you are finished creating your widget, simply click the corresponding copy code button and paste it into your website builder's HTML section. Ask our support for help if you are having any issues!
**Tip** Only one PayWhirl widget (embedded )should be placed on any single page to avoid layout or script conflicts.
Chaining Widgets for Custom Checkouts
Widgets can forward shoppers to another widget after a selection—perfect for Build‑a‑Box or multi‑step upsell flows:
Step 1 – Base Plan: Pricing Table widget (e.g., “Choose your box size”).
Step 2 – Upsells: Upsell widget (e.g., “Add extra snacks”).
Checkout: Shopper reviews cart and completes payment.
All recurring upsell items inherit the billing schedule of the base plan, so customers receive one consolidated invoice per cycle.
Widget Types & When to Use Them
Column layout displaying multiple plans side‑by‑side.
Customer selects exactly one plan.
Optional quantity selector (e.g., 2 × “Gold” plan).
2. Payment Form
Single‑column form for one plan or one‑time charge.
Supports flexible amount fields—great for donations or pay‑what‑you‑want.
Can be chained to a pricing table to make the flexible payment a subscription.
3. Multi‑Select
Looks like the Pricing Table but allows multiple plans or quantities in one cart.
Ideal for meal kits or product bundles.
4. Upsell
Adds one‑time or recurring add‑ons after the main plan for a Build-a Box experience.
Use in chained flows to let shoppers customise their subscription.
5. Gift Code
Sells prepaid digital gift cards delivered automatically by email on the purchaser's chosen date.
Recipients click the link in the email to redeem the code and create their own PayWhirl account.
Lightweight login form that embeds your PayWhirl customer portal directly on your site.
Shoppers can update payment methods, addresses, pause/cancel plans, etc.
Embedding a Widget – Quick Steps
In PayWhirl ▸ Widgets, click Create or open an existing widget by clicking on the name.
Adjust settings, then click Copy Code.
Paste it in your site builder where you’d like the widget to appear.
Save/publish the page and test in an incognito window.
That’s it—no redirects or additional scripts required!
Best‑Practice Checklist
Connect your live payment gateway (Stripe, Square, etc.) before embedding any widget on a production page.
Limit to one widget per page—embedded —to prevent layout or JavaScript conflicts.
Preview on mobile and tablet to confirm the widget resizes and inputs remain usable.
When chaining widgets, set Clear cart on reload → No on every secondary widget so the cart isn’t accidentally emptied.
Walk through a full checkout in an incognito window, verifying prices, tax, shipping and billing schedule on the confirmation screen.
Run at least one real‑money test charge (e.g., a $1 plan) to ensure the gateway and notifications fire correctly.
Examples of how widgets look on a typical BigCommerce site
Examples of how widgets look on a typical BigCommerce site
Here is an example of a widget that is embedded on an existing product page.
Note: Only one widget can be embedded on a single page.
Example: Buy Button - Popup Widget
Example of a "Buy Button" popup (Pricing Table Widget):
Example of the customer portal widget
Example of the customer portal widget
Please let us know if you have any questions.
Sincerely,
The PayWhirl Team