How to get started with Tip Jar WP

Let's get a functioning payment form on your website, and depositing cash in your bank account, in less than 10 minutes!

1. Getting the plugin installed

To install Tip Jar WP into your WordPress website, log into your WordPress dashboard and go to “Plugins” > “Add New”:

To install Tip Jar WP into your WordPress website, log into your WordPress dashboard and go to

In the search bar (top right) search for “tipjarwp”. When the plugin shows up, click “Install Now”.

In the search bar (top right) search for

Once your installation completes, the “Install Now” button will turn into an “Activate” button. Click on it.

Once the installation completes, the

After the plugin is activated, you will be redirected to a list of all the plugins you have installed. Find “Tip Jar WP” in the list, and then click the “Get Started!” link:

After the plugin is activated, you will be redirected to a list of all the plugins you have installed. Find
You will now be redirected to the onboarding wizard for Tip Jar WP, which walks through all of the steps to get everything important set up properly.

You will now be redirected to the onboarding wizard for Tip Jar WP, which walks through all of the steps to get everything important set up properly.

2. Making sure your site is secure to process payments

The first check the wizard will do is to confirm that your site is using an SSL certificate. Running over “https” using an SSL certificate encrypts your site’s data, and protects both you and your site’s customers. It is a requirement for using Tip Jar WP and Stripe. Most good webhosts will provide an SSL certificate to you at no extra cost. When you contact them, be sure to mention “Let’s Encrypt”, which is a free SSL service available to everyone.

The first check the wizard will do is to confirm that your site is using an SSL certificate. Running over

If/when you have an SSL certificate installed and working, you will be able to move to the next step!

If/when you have an SSL certificate installed and working, you will be able to move to the next step!

3. Connecting Stripe

Now you will be prompted to connect (or create) your Stripe Account. Click the blue button, and Stripe’s website will load.

Now you will be prompted to connect (or create) your Stripe Account. Click the blue button, and Stripe's website will load.

Once your account details have been entered (or you’ve logged in), at the bottom you’ll see a button to “Authorize”. Click on it, and you’ll be directed back to your WordPress admin dashboard.

Once your account details have been entered (or you've logged in), at the bottom you'll see a button to

4. Setting up Stripe Webhooks

Now you need to set up Stripe Webhooks. Follow the wizard on the screen to complete these steps:
A) Copy the webhook URL.
B) Click the button.

Now you need to set up Stripe Webhooks. Follow the wizard on the screen to complete these steps: A) Copy the webhook URL. B) Click the blue button. C) This will open Stripe in a new tab. Click on that tab.

C) This will open Stripe in a new tab. Click on that tab.

Once you’ve switched tabs, click on “Add endpoint”.

In the pop-up, paste the URL you copied, set the API to “Latest Version”, then click “Receive all events”. That link is below the dropdown menu for events, which can be a bit confusing. So just take note of that.

Now that you have created the endpoint, click on “Click to reveal” in the “Signing Secret” section of the page.

Now that you have created the endpoint, click on

Now, copy the secret key by selecting it, right clicking, and selecting “copy”.

Copy the secret key by selecting it, right clicking, and selecting

Switch browser tabs, back to your website.

Switch browser tabs, back to your website.

Paste your secret signing key at the very bottom.

Paste your secret signing key at the very bottom.

Once you have pasted the key, you will see a success message, and then you can click “Next step”.

Once you have pasted the key, you will see a success message, and then you can click

5. Making sure your WordPress emails are working

Now the wizard is going to help you make sure your WordPress is sending emails, and that those emails actually arrive in people’s inboxes (as opposed to their spam). Emails are important for things like transaction receipt emails.

Click the “Send test email” button, and a test email will be sent to you.

Click the

Head over to your email inbox in a new tab and click the link in the email. That will confirm the emails are working for your website.

Head over to your email inbox and click the link in the email. That will confirm the emails are working for your website.

If you got the email and clicked the link, you can skip the next section because your emails are working!

If you got the email and clicked the link, you can skip the next section because your emails are working!

Now, if you didn’t get the email within 3-5 minutes, that’s a sign of a problem. It means your WordPress emails are not getting through! If that happens to you, click the “Didn’t get the email” button, and you’ll be prompted to install an email sending plugin.

At this point, you will be given 2 options:
1: Automatically install the “SendGrid” plugin for WordPress.
2: Install your own email sending plugin. A few of the popular options for this are Mandrill, SendGrid, AmazonSES, and others. Each of these plugins will have their own configuration settings, so its likely best/easiest to stick with SendGrid unless you know what you are doing.

If you choose option 1 (Install the SendGrid WordPress Plugin for me), the SendGrid WordPress plugin will automatically be installed in the background.

You can then click the button to create your SendGrid account, where you’ll generate an API key. Once you have the API key generated, you can then copy/paste that API key into the 3rd box at the bottom:

From here, you’ll be sent another test email. This time it should arrive. When you get it, click on the link in your email to confirm, and you’ll be brought back to the wizard to complete the next step!

6. Setting the default settings for your Tip/Payment Form

Congrats! You’ve made it through the hardest steps. From here on out it’s the fun stuff, customizing the default settings for your tip/payment form!

Each Tip Form has a little image at the top. You can set what you would like that to be on this step, by uploading your own image. You’ll want to make the image at least 200px wide by 200px high. But play around with using your own image here, as it will help your users to know their money is going directly to you!

Upload the image to use for your payment form

Now you can set the default currency, which will be shown to your users wherever you put your payment forms. Type in the 3 letter currency code, or choose from the list available:

Along with the default currency, on this next step you can set the default amount. You will enter it in the lowest unit for your currency. For USD, that currency is cents. If you’re familiar with the Japanese YEN, you know that no decimal point is used at all, and there is only a single unit.

Either way, enter this amount without a decimal point and in the lowest unit for your currency. Typically this is cents. On the frontend, the user will see a properly formatted version of this amount for the currency they choose.

Enter the default amount, which will be shown to the user on your payment form.

This next step allows you to set the “thank you” message you want users to see after they have successfully made a payment. Type whatever you’d like, then click “Next step”.

This next step allows you to set the

A terms and conditions and/or privacy policy checkbox may (or may not) be needed for your site, depending on what you do. Many people will choose to leave this blank, as it’s one-less-thing to get in the way of completing a payment. But if your website needs people to agree to a specific set of terms, type those terms here, and a super simple “Agree to terms” checkbox will appear, and be required, before any payment is accepted.

And that's the last step in the set-up wizard!

And that’s the last step in the set-up wizard!

7. Showing the payment form on your website

All that’s left to do now is add the Tip Form to your website. The easiest way is to use this shortcode on any page, post, sidebar widget:

[tipjarwp]

You can also make it open in a pop-up box using this shortcode:

[tipjarwp mode="button" link_text="Leave a tip" open_style="in_modal"]

Of course, it doesn’t have to say “Leave a tip” on the button. You can change that to anything you want like this:

[tipjarwp mode="button" link_text="ANYTHING YOU WANT HERE" open_style="in_modal"]

If you’re writing a blog post and you want to use a text link inside one of your paragraphs, use this shortcode:

[tipjarwp mode="text_link" link_text="Leave a tip" open_style="in_modal"]

If you want to get fancy, and you have some experience editing your child theme’s files, you can even hard-cod the shortcode into one of your child theme’s files (like footer.php) using this code:

<?php echo do_shortcode( '[tipjarwp mode="text_link" link_text="Leave a tip" open_style="in_modal"]' ); ?>

There’s also the WordPress Block Editor, where you can add a Tip Form Block by typing this into a new block, where you can control a ton of things for that specific payment form!

/tip
Gutenberg Block controls for Tip Jar WP

Use the Classic Editor? No problem at all! You can use the button above the Classic Editor, and you get all of the EXACT same controls as the Gutenberg Block!

Classic Editor Controls for Tip Jar WP

Demo: Podcast Player with Donation Form

Displaying the latest episode of your podcast via Tip Jar WP is incredibly simple, and it’s an amazing way to “tie” a payment form to your podcast, right where people are listening!

To do so follow these easy steps:

1. Create a new post

In your WordPress dashboard, go to “Posts” > “Add New”.

2. Add the Tip block to the post

Click on the “plus” button to add a new block to the post.

3. Type the word “tip” to search for the block, then click it

4. Click on “Edit”

Now that the Tip Jar Payment Form is on your page, find and click on the “edit” button labelled with “Optional place to display audio or video.”

5. Upload your MP3 file for your podcast episode

6. Click “Use Item” and publish!

Once you have uploaded your MP3 file, click “Use Item” at the bottom right to insert it. Once you have, the MP3 player will automatically show up in the Tip Form.

7. Publish the post!

That’s all you need to do! Simply click “Publish” at the top right, and your podcast is ready for the world to hear, with a beautiful donation form directly attached!


A working demo

Once you have completed the steps above, you’ll have something that looks and works exactly like the demo below: