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. 

See the Quick Start Guide to get the Invoice Details & Payment Widget up and running ASAP.

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

<script id="MPWidgets" src="https://{your platform domain}/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 discussed below.

<mpp-checkout
     paymentprocessortargeturl="https://ministryplatform.com/paymentform"
     backtoeventtargeturl="/event-details">
</mpp-checkout>

Widget Configuration

Required Attributes must be included for the Widget to function.

If required attributes are not configured properly, an error will be displayed.

• Payment Processor (Vendor) URL: The URL defines the path for the Payment Vendor handoff and is required for the Invoice Details & Payment Widget to function correctly. This value will be a fully qualified URL and be provided by the Payment Vendor. Contact your chosen Payment Vendor for this URL.
  • Attribute: paymentprocessortargeturl

<mpp-checkout paymentprocessortargeturl="https://sample.com/paymentform"></mpp-checkout>

• Back to Event Target URL: The target URL determines the navigation path back to the Event Details. Can be relative or fully qualify url.
  • Attribute: backtoeventtargeturl
    

<mpp-checkout backtoeventtargeturl="/event-details"></mpp-checkout>

Optional attributes may be included to expand the Invoice Details & Payment Widget.

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

<mpp-checkout paymentprocessorformat="https://{your platform domain}/family"></mpp-checkout>

Platform Configuration

Payment Vendor Configuration

The Invoice Details & Payment widget summarizes the transaction and sends it to your desired 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 below. Click the vendor name for additional information.
2. Contact your selected vendor:
   • Request the Payment Processor (Vendor) URL for the required attribute.
   • 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. Add the key to Administration > Configuration Settings > COMMON,JWTSigningKey.
5. Enjoy seamless event registration payment!

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

	GiveCentral
	Online Giving
	Pushpay
	Vanco

Product Options

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

• Product Option Group Note Label: Appears 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.

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?)? You can do that! Navigate to System Setup > Application Labels and update the label to fit your context (note that churches 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."