Many nonprofits are quickly adjusting their focus and adapting their fundraising strategies as a result of COVID-19. Stripe makes it easy to accept one-time or recurring online donations to support nonprofit communities and causes.

This post provides an overview of how to set up a payment page with Stripe Checkout to accept donations. Checkout creates a secure, Stripe-hosted payment page that works across devices and lets you collect online payments with just a few lines of code.

1. Enable Checkout: Log into the Stripe Dashboard and navigate to the Checkout settings. From here, you can enable the client-only integration and customize the look and feel of your checkout page. Note: If you are a new Stripe user, additional reviews to ensure compliance may be required.

2. Add donation amounts to your Dashboard as products: If you want to give customers the option to select different donation amounts, add those as separate products in the Dashboard. Read our docs for more information on configuring products for Checkout.  

3. Create your donation and thank you pages: Within your website, create a donation page where you customers can select the amount they wish to give. In addition, create a thank you page that will appear once they have completed their donation.

4. Integrate Checkout into your donation page: On your donation page, add buttons for each donation amount and some JavaScript code to redirect customers to Checkout when they click the button. You can find the code in your Dashboard by clicking the “Use with Checkout” button:
   
   
   
   To configure the code snippet, add the link to your thank you page in the “Success URL” field and the link to your donation page in the “Cancel URL” field. Copy the code that is generated in the window below: 
   
   
   
   The code generated in the <script> tag is only for donation pages with a single donation amount. If you’ve configured multiple donation amounts as separate products in the Dashboard, you’ll need to modify this code slightly. See this sample app for an example.

5. Test your integration: Use your test mode keys found within your client-side code and our test cards.

6. Go live: When you’re ready to accept live card payments, add your live mode publishable key in the client-side code (you can find these keys in the Stripe Dashboard). You should also enable automatic receipts so customers get an email after they’ve donated.  

For more information on how to let customers choose a donation amount, see our sample application.

If you want more flexibility setting up different donation amounts, you can use Stripe’s server-based integration instead of setting up products in the Dashboard. Learn more about this type of integration.