Online Hosted Payment Pages
Hosted Payment Pages are great for eCommerce businesses, fundraisers, service providers, dispensaries, healthcare organizations or any merchant that needs an easy way to allow customers to make an online payment without having to worry about PCI compliance.
Everyware will handle the PCI, HIPAA security, processing and transaction status tracking. Merchants can create as many secure hosted payment pages as needed. Each can be shared through a unique link, QR code or Pay Online Button Widget.
When a customer or donor reaches the page, they can enter the amount they wish to pay and either send themselves a pay by text link which will allow them to reply 'Yes' to complete their payment/donation with methods previously saved on file OR they may enter a new payment method to save for even faster experience next time.
You may customize the hosted payment page widgets to set amounts due and use the payment widgets on your website to collect payments for your products and services.
Or you can pass in unique customer information and amounts due to create standing payment form pages your customers can access through your online payment portals.
Steps to Create and Share a Hosted Payment Page
1) Open Settings > View Settings > Widgets > Add Page
2) Enter details into the Add Hosted Payment Page window
- Rename the page which defaults to, "Open Amount Payment"
- Rename the Service & Products which defaults to, "[BusinessName] Payment" or "[BusinessName] Donation"
- Optionally, enter a website URL if you would like to redirect customers to a specific page after successfully completing their payment.
- Toggle the page to Active and click Save Changes to return to the Widgets settings screen
3) Choose which of the three ways you'd like to share your pages:
1. URL
2. QR Code
3. Button Widget
Share Standard Hosted Payment Page with a URL
Click the copy icon in the Payment Page URL column to copy the URL to your clipboard.
Paste the URL to hyperlink from anywhere you like to the Hosted Payment Page, so customers can click and immediately open to a secure browser page where they may enter the amount they wish to pay and be on their way.
Share Standard Hosted Payment Page with a QR code
Click the copy icon in the QR Code column to copy the QR Code image to your clipboard.
Paste the QR Code image onto your flyers, business cards, website, signs etc. so customers can scan and immediately open to a secure browser page where they may enter the amount they wish to pay and be on their way.
Install Standard Hosted Payment Page with the Website Widget Code
Click the copy icon in the Widget column to copy the page's JavaScript code to your clipboard.
If you do not customize the widget code at all, the code you install to your webpage will allow customers to click a button labeled 'Pay Online,' which will open a payment form where they may input the amount they wish to pay or give.
Sample Open 'Enter Amount' Payment Page Widget Code |
|
<div id="EWWidget"> <script src="https://pay.everyware.com/.well-known/EWWidget.js"></script> <script> init(div="EWWidget", buttontext="Pay Online", buttonclass="", showbutton = true, G ="<UniqueID>");</script> </div> |
⚠️Note: Hide/Show Button Parameter
- If “show button” is “true” you will see a button like the one below; clicking this button brings up the payment form:
- If “show button” is “false” the user will be taken directly to the payment form
Install the widget code into your website so customers can tap the button enter the amount they wish to pay and be on their way.
Install Customized Hosted Pay Widget(s) to Charge Set Amount(s)
For example, say you want to accept $2.00 fees for customers in Texas and $3.00 fees for customers in Tennessee. You can create hosted pay widgets for each item, customize the amounts due and install them to the respective item's page on your website.
In this case, you're using the Everyware hosted payment forms to collect payments for each item, like a shopping card or payment gateway plugin for an eCommerce website.
--------------------
1) Create one Hosted Pay Page for each of the items in the Everyware portal and name them according to the product/service. In this case, you'd name one page Tennessee Payments $3.00 and one Texas Payments $20.00
2) Copy the widget code for each, notice the unique ID assigned for each of the hosted pay widgets you've created.
3) Customize the code for the set amount you want to charge for the item.
Sample $2.00 Amount Due Widget Code |
|
<div id="EWWidget"> <script> |
4) Install the website widget code to your website in the HTML section for the item's product/service details page.
5) The page will now have a payment collection form for the amount you set in the widget code.
👆 If you wish to send customers to your home page or an upsell marketing page after they successfully make a payment, make sure to include the redirect URL in the Everyware Portal widget settings. This way, after a customer pays for 'Tennessee Fee $3.00' they'll see their payment receipt and after a few seconds, will be redirected to the page where they can make another payment or buy another item.
❗Notice: Once you customize your widget code, the URL and QR code in the portal won't link to the page on which you installed the customized widget. So, if you send a customer the URL or QR code assigned to the widget inside the Everyware portal, the page will open to the default $0.00 amount due rather than your updated version.
Donor Online Payments
When a customer reaches your hosted payment page from the URL, QR Code or button you provided, they will:
1) Type a number in to the Enter Amount field. The number must be higher than $0.99 or an error message will appear letting them know to enter a higher amount.
2) Enter their phone number and request a Pay by Text message for faster checkout.
2.1) If the merchant's Everyware site cannot identify the customer or finds them, but they do not have a payment method saved on file, they'll see a message asking them to enter payment information on the hosted payment page below. Upon successful payment, the customer will receive a confirmation text message.
2.2) If the merchant's Everyware site does successfully locate the customer's account and saved payment method in the system, they'll be sent a Pay by Text message that will ask if the customer would like to reply YES to pay with the method saved on file.
If the customer wants to use the method mentioned in the text message to pay, they simply text back YES and will receive a confirmation text message response when the payment is complete.
If the customer would prefer to enter a different method, they may click the secure payment link to do so instead. Upon successful payment, the customer will receive a confirmation text message.
⚠️Please Note: A merchant must be approved for ACH and card payments for both methods to appear as Hosted Payment Page Payment Method options.
Customize the Hosted Pay Widget Code
Create a Hosted Payment Page in your Everyware portal Settings, copy the button widget code, and customize the amount, button name and other parameters.
Sample Open (Donation) Page Button Widget Code |
| <div id="EWWidget"><script src="https://portal.everyware.com/.well-known/EWWidget.js"></script><script> const payInfo = { FirstName: '', LastName: '', AddressLine1: '', AddressLine2: '', AddressCity: '', StateCode: '', CountryCode: '', AddressZip: '', EmailAddress: '', Phone: '', Amount: '', Description: '', G:'df2d288d-66e5-459f-bbbd-b7c54cd8d77f' };init(div ="EWWidget", buttontext="Donate Now", buttonclass="", showbutton = true, csshref= "", defaultPayInformation = payInfo);</script></div> |
Widget parameters:
The following data can be sent to pre-populate the hosted payment form.
| Parameter | Definition | Required or Optional |
| FirstName | First Name of customer being billed. | Optional |
| LastName | Last Name of customer being billed. | Optional |
| Address1 | First line of Billing Address for customer. | Optional |
| Address2 | Second line of Billing Address for customer. | Optional |
| City | City for customer Billing Address. | Optional |
| Statecode | State for customer Billing Address. | Optional |
| Postalcode | Zip code for customer Billing Address. | Optional |
| Countrycode | USA or CAN | Optional |
| Customer's email address. | Optional | |
| MobilePhone | Customer's mobile phone. | Optional |
| Amount | Amount due, appears at the top of the Hosted Payment Page. | Required |
| Description | Line item description for invoice. | Required |
Like the Open Amount Hosted Payment Pages, the customer will now select to pay with a method on file through a Pay by Text message (respond YES), or enter new payment information and pay on the Hosted Payment Page.
Hosted Payment Page Transaction Reports
If a customer enters a new payment method on a hosted payment pages, that transaction will appear in Everyware Payment Reports as "Hosted Pay" type.
If a customer sends themself a Pay by Text message after looking up their account on a Hosted Payment Page, the successfully paid transaction will appear as "Invoice" type.