CONTACT USBack to MinistryPlatform Site
Your Knowledge Base has moved to the new Help Center.  Check out the release notes for details. And don't forget to update your bookmarks and in-house documentation before May 28.

Configuring My Invoices

 

Quick Start

The My Invoices Widget allows authenticated Users to see all of their invoices from the past 360 days and pay remaining balances. See the Quick Start Guide to empower your people to connect with you when they need to most.

If the shared script hasn't been added to your website, add it to your desired webpage. Be sure to replace "{your church domain}" in the following code with your church's base MP URL.

<script id="MPWidgets" src="https://{your church domain}/widgets/dist/MPWidgets.js"></script>

Create a webpage on your website that will display your My Invoices Widget or identify the page on your website where it will be displayed.

Add the My Invoices Widget to your church website by placing this snippet of code in the body of your chosen webpage. Be sure to replace "{your church domain}" in the following code with your church's base MP URL.

<mpp-my-invoices
     targeturl="https://{your church domain}/invoicedetails">
     keyword="study"
     monthid="3"
     invoicestatusid="2"
     hidefreeeventscheckbox="true"
</mpp-my-invoices>

Widget Configuration

Required attributes are necessary for Widgets to function.
  • Target URL: The URL that takes the authenticated User to the Invoice Details & Payment Widget so they can pay an outstanding balance. This should be the URL of the webpage containing your Invoice Details & Payment Widget.
    • Attribute: targeturl
    • Valid Values: a fully qualified URL
targeturl="https://{your church domain}/invoicedetails"

Attributes must be included before the opening Widget tag is closed. An attribute's value should be wrapped in quote marks.

<mpp-my-invoices targeturl="https://{your church domain}/invoicedetails"></mpp-my-invoices>
Optional attributes may be included to expand the My Invoices Widget.
These optional attributes are part of a soon-to-be-headed-your-way Widgets release, so start brainstorming your keywords now!
  • Keyword: Filters the result using keywords. Key Word search looks for a match in the Invoice Title, Status, or Product Name, so choose your keyword attribute strategically ;)
    • Attribute: keyword
    • Valid Values: any keyword
  • Month: Filters by a Month ID
    • Attribute: monthid
    • Valid Values: 1 to 12 (1 = January)
  • Invoice Status: Filters by Invoice Status ID. The default is empty.
    • Attribute: invoicestatusid
    • Valid Values: invoice status ID (or empty)
  • Hide Free Events: Determines whether the option to include $0 invoices is available to the end user. The default is "False."
    • Attribute: hidefreeeventscheckbox
    • Valid Values: True or False (or empty)
Configure Your Widget

Simply fill out the Widget Configurator below, copy your generated Widget, and paste it into your website. 

 

Update Configuration Parameters

Setting Name
My Value
Description

Preview & Copy

Platform Configuration

Event: Add an image to your Event record to help your Users select their invoices at-a-glance.

Product: The Product name will appear on the invoice card, so make sure your Product names are clear. And if your Event doesn't have an image, add to one to the Product record.

Customization

Want to customize the My Invoices Widget even more? We love that!

CSS: Every Widget accepts the Custom CSS attribute. Include it before the opening Widget tag is closed and customize backgrounds, button colors, and more!

Application Labels: Want the "Pay Balance" button to say "Make a Payment"? No problem! You can change the text that appears by navigating to System Setup > Application Labels (note that churches are responsible for all translations if the default is not used). Here are a few ideas to get started: 

  • mpp-checkout.invoicePayNowButtonLabel - The label on the button the user clicks to pay an outstanding balance. Default is "Pay Balance."
  • mpp-my-invoices.pageTitle - Title at the top of the page. Default is "My Invoices."
  • mpp-my-invoices.pleaseLoginMessage - The message a User sees inviting them to login to see their invoices. Default is "Please login to view your invoices."
  • mpp-my-invoices.noInvoicesFoundMessage - The message an authenticated User sees if they do not have any invoices in the past 360 days. Default is "You currently do not have any invoices."