home

MinistryPlatform

RealmRealm AccountingMinistryPlatformGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite
RealmRealm AccountingMinistryPlatformGivingPDSACSConnectShepherdGrowth MethodHeadMasterRefresh WebsitesTrust CenterGo MethodMissionInsite

MinistryPlatform and PocketPlatform guides, answers, and development resources.

What would you like to know more about?

Show Contents

Show Page Sections

thumbnailMinistryPlatform

Invoice Details and Payment

Configuring Invoice Details and Payment

Quick Start

The Invoice Details & Payment Widget is used in tandem with the Event Details Widget, allowing users to select, register, and pay in a seamless experience! See Quick Start to get them up and running.

Note: Because the Event Details & Registration and Invoice & Payments Widgets work together, they must be set up at the same time to function correctly. See Finder Widgets + Details Widgets to learn more about how they interact.

If the shared script hasn't been added to your website, add it to the appropriate webpage, replacing "example-church.com" with the base URL of your church's website.

<script id="MPWidgets" src="https://example-church.com/widgets/dist/MPWidgets.js"></script>

Add the Invoice Details & Payment Widget to your church website by placing this snippet of code in the body of your chosen webpage, modifying the required attributes.

<mpp-checkout paymentprocessortargeturl="https://example-church.com/paymentform" backtoeventtargeturl="/event-details"></mpp-checkout>
Tip: While not mandatory, this snippet would typically be placed inside a <div> element with the class "container".

Widget Configuration

Required Attributes

  • Payment Processor (Vendor) URL: Defines the path for the payment vendor handoff. This is required for your widget to function correctly. This value is provided by your payment vendor.
    • Attribute: paymentprocessortargeturl
    • Valid Value: fully qualified URL
    • Example:
      paymentprocessortargeturl="https://sample.com/paymentform"
  • Back to Event Target URL: This is the URL of the webpage that contains your Event Details widget.
    • Attribute: backtoeventtargeturl
    • Valid Value: relative or fully qualified URL
    • Example:
      backtoeventtargeturl="/event-details"

Optional Attributes

  • Payment Processor Format: Optional attribute dictated by vendors. Indicates how the payload will be sent.
    • Attribute: paymentprocessorformat
    Note: Each payment vendor will have its own requirements for this attribute. See Platform Configuration for more information.

Configure Your Widget

Fill out the Widget Configurator below, copy your generated widget code, and paste it into your website.

Update Invoice Details & Payment Widget Parameters

Setting Name
My Value
Description
Payment Processor (Vendor) URL *
URL that defines the path for the Payment Vendor handoff. It can be a relative or fully qualified URL and is provided by the Payment Vendor.
Back to Event Target URL *
URL that defines the navigation path back to the Event Details Widget. It can be a relative or fully qualified URL.
Payment Processor Format
Optional attribute dictated by vendors. Indicates how payload will be sent.
CustomCSS
Optional Path to a CustomCSS Style Sheet to be applied to this widget.

Preview & Copy

content_copy
<mpp-checkout></mpp-checkout>

Platform Configuration

How exactly does this happen? We're glad you asked, because it's pretty cool! An encrypted code, called a JWT (Json Web Token) is handed off to each payment vendor from the Invoice Details & Payment widget. This code contains information about the transaction, including the total due, and payer. The vendor processes the user's transaction and then hands an updated JWT back, where the user is redirected to the Invoice Detail widget. The JWT is created at the moment a User clicks Pay Now.

It's important to note that the Portal and Widgets handle payments differently. In the Portal, the payment information was collected, processed by your payment processor, and returned. This meant that the transaction happened on your server and PCI compliance was required. Any features added would be independent of your giving vendor.

In Widgets, the invoice is handed to your payment processor, processed by your payment processor, and returned. This means the transaction happens on your vendor's end (No PCI compliance required!) and the end user has the same experience as they do when they give online (for example, saved credit cards).

Verified Vendors

MP eGiving
GiveCentral
OnlineGiving
Pushpay
Vanco

Product Options

Registration details are controlled by the Online Registration Product. A few things to note:

  • Product Option Group Note Label: Displays before each option price.
  • Product Option Prices Max Quantity: Max quantities for your Product Option Prices are dependent on two criteria:
    • The Product Option Price is part of a non-canceled Invoice, AND
    • The Product Option Price is associated with a "registered" Event Participant. If the invoice is not paid within an hour of creation, a process will cancel the invoice and Event Participant record. The canceled Event Participant record will not be counted toward the max quantity of the Product Option Price.

Configure the Payment Vendor

The Invoice Details & Payment widget summarizes the transaction and sends it to your payment vendor. This must be configured in conjunction with the Event Details & Registration widget for all paid events.
  1. Select your payment vendor from the Verified Vendor list. Click the vendor name for additional information.
  2. Contact your selected vendor:
    1. Request the Payment Processor (Vendor) URL for the required attribute.
    2. Request the key for signing the JWT.
  3. Configure the Payment Processor (Vendor) URL attribute using the fully qualified URL received from the payment vendor.
  4. Go to Administration > Configuration Settings, and add the key under COMMON, JWTSigningKey.

Enjoy seamless event registration payment!

Customization

All Widgets are customizable, so change the button color and update the labels to match YOUR church!

CSS: Every Widget accepts the Custom CSS attribute. Include it before the opening Widget tag is closed to customize your Widgets.

Application Labels: Want to change the language on your registration checkouts to be more casual or formal? To make changes, go to System Setup > Application Labels and update the appropriate label(s). Note that you are responsible for all translations if the default is not used.

  • mpp-checkout.paymentComplete: Text displayed after the user completes registration for their paid events. Default is "Your payment is complete. Thank you!"
  • mpp-checkout.registrationReview: Text displayed asking the user to review their registration details. Default is "Review your Registration."
thumb_upYes thumb_downNo

portal
MinistryPlatform

Last updated: March 13, 2025

Related Articles: