How Do I Configure the Stripe Giving Form Embed?

In order to set up the Stripe giving form on your website and connect it to your Virtuous account, you will need:

  1. Admin access to your Virtuous account
  2. Admin access to your Stripe account
  3. Admin access to your website, specifically the page where the giving form will live

If you have the above access and permissions, you are ready to get started with configuring Stripe!

Part 1 - Generate Keys

In Virtuous, navigate to the Settings menu and go to the Connectivity page. Click " Manage Application Keys."

Screen_Shot_2017-06-05_at_9.58.27_AM.png

On the Application Keys page, click on the blue "Create an Application Key" button.

 Create_App_Key.png

Select "Stripe" from the drop-down menu, and then click "SAVE" to generate a new app key.

Select_Stripe.png

This app key will be used later when embedding the Stripe form code on your web page.

Once you have generated your app key, you will need to go to your Stripe account and generate API keys.

Screen_Shot_2017-06-05_at_10.49.07_AM.png

Stripe provides multiple keys. The two keys labelled "Test" can be used for testing the Virtuous integration, if desired. Once the integration is tested and functioning properly, these keys would need to be replaced with the "Live" keys. For each, you will need both the "Secret" key and the "Publishable" key.

Part 2 - Configure Integration

Once you have your Stripe keys, go back to the Virtuous Settings menu, go to the Connectivity page, click the "Manage Integrations" button.

Screen_Shot_2017-06-05_at_9.58.40_AM.png

Click the button to Add an Integration and select Stripe from the drop-down menu.

Screen_Shot_2017-06-14_at_11.34.51_AM.png

On the next screen, paste the SECRET API key generated in your Stripe account.

Screen_Shot_2017-06-14_at_11.36.45_AM.png

 Next, you'll need to set up a webhook in your Stripe account. In Stripe, go to the API page and select Webhooks. You'll want to add a webhook that connects to your account. To set up the webhook, you'll need to direct it to the Virtuous API url:

https://api.virtuoussoftware.com/api/webhook/stripe/{Virtuous OrganizationID}

To find your specific Virtuous Organization ID, contact the Virtuous support team.

You may choose to have the webhook respond to test events for testing your configuration, but be sure to select live events in order to actively deploy the giving form embed on your website.

Finally, for the Filter option, choose "select types to send" and then select "charge.succeeded" from the menu.

Stripe_API.png

Part 3 - Put it on Your Page

Congratulations! You've successfully completed setting up your integrations and collecting the keys you will need to embed the Stripe giving form on your web page. Now, you'll need to install the code on your web site, on any page where you'd like to display the giving form.

To embed the form, you'll need to place three things in the HTML code for your giving page:

  1. Stripe js code. You can reference Stripe's documentation to find the most current version of their js code. Reference the code anywhere on your giving page: <script src="https://js.stripe.com/v2/"></script>
  2. Virtuous Stripe js code. You can find the latest version here or just reference the url on your page: https://cdn.virtuoussoftware.com/virtuous.stripe-1.0.1.min.js
  3. HTML snippet. To embed the control to your page you need to put this in the html:
  <div id="VirtuousDonation">
    <script type="text/javascript">
        virtuous.stripe.createPledgeForm({
          anchorId: 'VirtuousDonation',
          legendName: 'Donate',
          stripeKey: 'STRIPE_PUBLIC_KEY',
          virtuousKey: 'VIRTUOUS_STRIPE_APP_KEY',
          segment: 'Website Donation',
          projects: ['United States', 'Africa', 'Uganda'],
          thankYouText: 'Thank you for your generous gift.'
        });
    </script>
  </div>

 Be sure to replace the bold text with the keys generated in Part 1.

Segment and Project values are purely optional. Listing Projects will allow givers to select a Project for their gift and pass that value to the Virtuous transaction tool. Coding a Segment into your form will pass that value along with the gift information and provide tracking on the source of the gift. For more information on these features, check out our Getting Started Guides on Campaigns and Projects.

Once the giving form has been embedded on your web page, you'll want to style the form to match the CSS of your existing page.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.