Add a payment form to your website or app

Follow

At the top right of the payments page tap the Share payment form button.

 

The payment form can be added on your website or sent in an email so that people's payments are recorded directly in UCare. Giving statements or followup email can then be sent at the end of the finical year.

Note: As the payment form will be collecting credit card information it is recommended that the page that payment form is displayed on use HTTPS. While UCare always uses HTTPS people paying will not see this if the form is embeded on your website. Securing the page on your website that the payment form is displayed on will give the user more confidence to enter their credit card.

 payments.share.png

Options

If you have multiple payment services configured then the first option will be to select which payment service to use for processing credit card payments.

The payment options field allows you to specify the tags that people can choose to apply to their payments. Tag are most often used to specify a payment fund that the person is paying towards. In this example you can see that Tithe and Building Fund have been selected. If only one tag is specified then it will be applied to all payments received with this form link or embed code. For multiple campuses you could enter the campus name as the payment option.

The Default payment amount allows you to specify the amount pre-filled on the payment form. This can be handy if you are emailing a link to the form so that people can pay for a specific item that has a set price.

You can have a title displayed above the payment form by entering it in the Page title field.

 

Email and Facebook

The Email and Facebook link allows you to quickly share a link to the payment form, this can also be sent via SMS. When using the link option it is recommended to add a Page title so that people know what the payment form is for when they open the link.

 

Web

The web code can be added to your website to integrate the payment form with your website's design. This way the payment will be processed by UCare without taking people away from your website.

The JavaScript version is a little more sophisticated as it will automatically adjust the height of the form as needed. The Iframe version on the other hand may display scroll bars if the form is taller than the Iframe. We recommend the Javascript code but some website creation tools will not allow you to use JavaScript, if this is the case then use the Iframe version.

Note: Depending on the service you use to build your church app you are likely to need to use the Email link or Javascript code options to embed a payment form in your church app.

 

Advanced

While the design of the payment form is consistent with the rest of UCare; this may not fit with the colors and fonts used on your website. If so a custom CSS file can be specified to alter the design of the form, you will need the help of someone with CSS skills to create a customized design.

Tip: You can upload the CSS file to a service like Dropbox, we do not hotlink the CSS file but download a copy every five minutes. This makes it easy for you to edit the CSS design and the changes will be reflected on the payment form within five minutes.

 

Payment form example

Here is an example of the payment form that has been added to a church app. If this person's name and contact details match a profile that you have on UCare then when they tap Pay now the payment will be linked to their existing profile. If on the other hand those details don't match a profile then a new profile will be added along with a link to the payment. 

payments.share-form.png

Have more questions? Submit a request

Comments

Powered by Zendesk