Configuring Invoice Details & Payment
Set up the Invoice Details & Payment widget.
The Invoice Details & Payment widget works with the Event Details widget so people can select, register, and pay in a seamless experience! See Quick Start to get them up and running.
If the shared script hasn't been added to your website, add it to the appropriate webpage, replacing "YOUR-BASE-MP-URL" with the base URL with your base MinistryPlatform URL.
<script id="MPWidgets" src="https://YOUR-BASE-MP-URL.com/widgets/dist/MPWidgets.js"></script>Create or identify a page on your website where you want to display the widget. To add this widget to your church website, add the code you generate in the Widget Configurator widget (with the required attributes) in the body of your chosen website page.
Widget Configuration
Required Attributes
- Payment Processor (Vendor) URL
- This attribute defines the path for the payment vendor handoff. This is required for your widget to work 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 has your Event Details widget.
- Attribute: backtoeventtargeturl
- Valid Value: relative or fully qualified URL
- Example:
backtoeventtargeturl="/event-details"
Optional Attributes
- Payment Processor Format
- This is an optional attribute dictated by vendors. It indicates how the payload will be sent.
- Attribute: paymentprocessorformat
Note: Each payment vendor has its own requirements for this attribute. See Platform Configuration for more information.
Configure Your Widget
- Go to your Widgets Library by appending "/widgets" to your system domain. For example,
https://example-church.ministryplatform.net/widgets. - Click the Navigate to... drop-down menu, and select Widget Configurator.
- Select the widget you want to configure, then customize your widget.
- Click Try it Out to see what your widget will look like!
- Copy the generated code from the Embed Code box.
- Add the code to the designated page on your website.
Platform Configuration
How does this happen? An encrypted code, called a JWT (JSON Web Token) is handed off to each payment vendor from the Invoice Details & Payment widget. This code has information about the transaction, including the total due and payer. The vendor processes the transaction and then hands an updated JWT back, which redirects the person back to the Invoice Detail widget. The JWT is created when the person clicks Pay Now.
It's important to note that the portal handles payments differently than widgets. In the portal, the payment information was collected, processed by your payment processor, and returned. This means the transaction happened on your server and required PCI compliance. Any added features are separate from 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 person has the same experience as they do when they give online (for example, saved credit cards).
Verified Vendors
Product Options
The online registration product controls the registration details. A few things to note:
- Product Option Group Note Label: This displays before each option price.
- Product Option Prices Max Quantity: The maximum quantities for your product option prices depend 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 count toward the maximum 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. You must configure this with the Event Details & Registration widget for all paid events.
- Select your payment vendor from the Verified Vendor list. Click the vendor name for additional information.
- Contact your selected vendor, and request the Payment Processor (Vendor) URL for the required attribute.
- Share the JWT key with your payment vendor as instructed by their system. To find this in MinistryPlatform, go to , open the COMMON, JWTSigningKey record, and copy the value.
- Configure the Payment Processor (Vendor) URL attribute using the fully qualified URL you received from the payment vendor.
Enjoy seamless event registration payment!
Customization
Customize the Invoice Details & Payment widget to change button colors, update labels, and more to match your church brand.
CSS: Every widget accepts the Custom CSS attribute. Include it before the closing of the opening widget tag to customize backgrounds, button colors, and more!
Application Labels: Want to change the language on your registration checkouts to be more casual or formal? To make changes, go to and update the appropriate label(s). Note that you are responsible for all translations if the default is not used.
- mpp-checkout.paymentComplete: The text that displays after someone completes registration for their paid events. The default is "Your payment is complete. Thank you!"
- mpp-checkout.registrationReview: The text that displays asking the person to review their registration details. The default is "Review your Registration."