💡 ClickFix | Advanced Invoicing

LOGIN

Case Study : INVOICING & E-COMMERCE

Part 3 : Advanced Invoicing

Summary : Building upon Part 1 : Pay What You Want and Part 2 : Generating payable invoices of our Case Study, in this part we are going to add the ability to have any number of "line items" on our invoices, with products created on the fly.

Why Use This : This part of the case study illuminates the process of generating detailed invoices with multiple line items, offering a dynamic and flexible solution for businesses requiring detailed billing and accounting capabilities. By introducing a structured approach to invoice creation, including new objects, fields, and dynamic template pages, ClickFix simplifies the management of complex invoices, enabling seamless integration with payment processing.

Example Uses for Complex Invoicing:

B2B Services: Tailor invoices with detailed breakdowns of services rendered, including varying quantities, costs, and total calculations for projects involving multiple deliverables.
E-commerce Platforms: Generate itemized invoices for online purchases, especially for orders containing multiple products, each with specific quantities and pricing.
Consulting Services: Provide clients with clear, itemized invoices for consulting projects that may include various tasks, hourly rates, and expenses incurred.
Event Planning: For event planning services, generate complex invoices that detail various aspects such as venue rental, catering services, and entertainment costs, each with specific pricing.
Custom Product Orders: Use for businesses offering customizable products, detailing the cost of each customization option selected by the customer.
Contractor Services: Itemize labor, materials, and other costs for construction or contractor services, providing a transparent breakdown of all charges.

By leveraging the comprehensive capabilities of ClickFix's complex invoicing, businesses can offer greater transparency, improve customer satisfaction, and streamline their financial processes, ensuring accuracy and efficiency in every transaction.

New Object “Line Items”
1. Fields
  1. Product Name : text
  2. Quantity : numeric
  3. Cost : Price
  4. Total : Price
2. Relationships
  1. 1 Invoice Many Line Items
New Invoice Fields
1. “Complex Invoice Total” Rollout field, to get the Total from all line items
2. New Invoice Status : Charge Complex Invoice
3. “Charge Hook Payload” : long text (to build the hook for our complex invoice)
New Invoice Dynamic Template Page “Create Complex Invoice”
1. Title : Creating Invoice for
2. A dynamic block to display current line items and total (if any)
  1. Note : import the design from Invoice page in Part 2
3. A Block with a form on one line
  1. Title : Add Item to Invoice
  2. Form :
    1. Product Name
    2. Quantity
    3. Cost
    4. Last element of the line, total, using Calc
    5. Fill up Calc
    6. Invoice Unique ID
    7. On form submit, just reload the page
4. Another block at the bottom with just
  1. Title : Send Invoice
  2. Dropdown : Invoice Status, preselected as “Awaiting Payment”
  3. Submit : “Send Invoice”
Clone page “Invoice Management” for “Invoice Management Part 3”
1. Add a block
  1. “Create Complex Invoice”
  2. Invoice Form with just a contact email field to set parent
  3. Also a hidden field to set the Invoice Status as Draft (to avoid the invoice going into #InvoiceManagement automation)
  4. Leads to dynamic page “Create Complex Invoice”
Clone #Invoicing #Payment #ThankYou to make #Invoicing #Payment #ThankYouPart3
1. Use “Charge Complex Invoice” status to display Block 1
2. Set the hidden drodpown in the credit card block to “Charge Complex Invoice” (in case of failure)
Clone Dynamic Page “Invoice” and name it “Complex Invoice”
1. Same template/url. Default Template is “Invoice” not “complex invoice”
2. Design wise for the invoice itself everything stays the same except for
  1. the line items, which are now pulled as dynamic blocks
  2. the total being pulled from Complex Invoice Total field
  3. Clicking Pay Now would lead to the same payment form / thank you page except
    1. Set Invoice Status to Charge Complex Invoice
Clone Dynamic Page “Invoice PDF” and name it “Complex Invoice PDF”
1. Everything stays the same except for the line items and total
New Line Item Automation #ManageLineItems
1. Trigger : Line Item is Created and Invoice//Invoice template is “Invoice”
  1. Shift invoice template to complex invoice
  2. Shift PDF template to complex PDF
2. Trigger (add here again) : Line item is created
  1. Update “Charge Hook Payload” with new payload for this linke item + current Charge Hook Payload
  2. Exit
New Contact Automation #ComplexInvoiceManagement
1. Trigger now is : “Paying Invoice” is updated and Paying Invoice//Status is Charge Complex Invoice
2. The Charge webhook will now use our Charge Hook Payload to fire the transaction
3. Then it’s the same as before except
  1. If success, generate pdf from Complex Invoice PDF and shift Transaction Status to Paid
  2. We only use the Charge Complex Invoice Status

Download Assets

Note that you must be logged into the Ontraport account to import this

Divider Text

What's Inside

One Automation
1. #ComplexInvoiceManagement Template
Three Pages
1. #PayWhatYouWant #ThankYou (to be edited to target your Invoice custom object)
2. Template Complex Invoice (import the block into an Invoice Dynamic Template)
3. Template Complex Invoice PDF (import the block into an Invoice Dynamic Template)

ClickFix Features

Conditional Display Overview (🆓 Free Plan)
Calc Shortcode Overview (🆓 Free Plan)
Log Transaction Overview Documentation (➰Essential Plan)
1. Alternative : Ontraport API
Page to PDF Overview Documentation (➰Essential Plan)
1. Alternative : Zapier + DocRaptor
URL Shortener Overview Documentation (➰Essential Plan)
1. Alternative : Zapier

What You Must Do

Since we cannot share Custom Object Automations with you, you'll have to follow the steps above to recreate this system, including
1. Create from scratch the "Invoice Management Part 3" page to generate a new invoice
2. Create #Invoicing #Payment #ThankYouPart3, which you can clone/edit from imported page "#PayWhatYouWant #ThankYou"
3. Create from scratch the "Create Complex Invoice" Invoice Dynamic Template to add Line Items to your invoice or send the invoice.
4. Import blocks from Template Complex Invoice, and Template Complex Invoice PDF into Dynamic Templates
You will need to recreate the Line Items Object Automation "#ManageLineItems" from scratch
In the imported contact automation, edit all triggers and updates to the Paying Invoice//status to match your fields, and the webhook within the automation to enter YOUR ClickFix Token (or use Ontraport API)
(Note that post data is corrupted by Ontraport during import, see note within the automation)
Add products to the different payment forms

CLICKFIX

PRODUCT

Template Library

Shortcodes

DISCOVER

Case Studies

Live Documentation

Support

Change Log