Stripe Gateway

Getting Started with Stripe

In order to accept payments with Stripe using Give you will need to have an active Stripe account, the Stripe Give Add-on, and the Give Core plugin installed and activated. If you plan on accepting Credit Cards on site we also highly recommend you have an SSL certificate.

Click here for instructions on installing and activating Give Add-ons.

Note: You can always access your add-on purchase receipts, downloads, and licenses from your Give Account dashboard.

After your Stripe Add-on is activated, go to “Donations > Settings” and click on the Payment Gateways tab. There you will see the default Payment Gateways (PayPal Standard, Test Payment, and Offline Donations). With the Stripe addon active, there’s a Stripe option/section as well. Check the checkbox to enable Stripe as your credit card Gateway for your website, and change the front-end label that donors see, if you’d like.

Connecting to Stripe

Once you have activated the Add-on it’s time to get connected to Stripe. There are two methods for connecting to Stripe, the Stripe Connect Method and the API Key method.

Stripe Connect

Before connecting to stripe, every backend page in the WordPress Admin area displays a banner prompting your connect to Stripe:

Click the “Connect with Stripe” button. This will redirect you to Stripe and prompt you to either login to your Stripe account, or if you’re already logged in you’ll be able to connect immediately or choose from multiple accounts that you have access to.

You can also find this method of connection at “Donations > Settings > Payment Gateways (tab) > Stripe Settings (section)”.

Click the “Connect my Stripe account” button to connect with Stripe. Once clicked, you will be redirected back to your admin dashboard and you should see you now have been connected:

Give is now connected to your Stripe account and ready to accept both live and test donations.

Disconnecting Stripe Connect

If for some reason you need to disconnect Give from Stripe you can do so by clicking the “Disconnect” button found under the gateway’s settings. Disconnecting from Stripe will remove the ability to accept online donations until reconnected.

Disconnecting from Stripe will remove the connection between the website you are disconnecting as well as any other sites that you have connected Give using the same Stripe account. Proceed with caution when disconnecting if you have multiple sites connected.

Connecting Stripe and Your Webhook (required)

In order for donations to be marked as complete on your GiveWP site, you must configure the webhook at Stripe. On the settings page at “Donations > Settings > Payment Gateways > Stripe.” the webhook URL is pre-populated on the page. Copy that to your clipboard for later use.

Click the link in the paragraph just above the webhook URL or navigate to
https://dashboard.stripe.com/account/webhooks

On that page, click the “Add endpoint” button and paste in your webhook URL.

A modal will appear. In that modal you can choose which endpoints are triggered. We recommending simply selecting “All events.”

 

If your webhooks are not fully configured, you may see donations pending on your admin Donations screen and you may not see certain donations reflected in GiveWP, such as renewals for subscriptions.

Donor and confirmation emails will not be sent if donations are marked with the Pending status. Emails are only sent when a donation is marked Complete.

Note: It is recommended to send all events over the webhook so that if Give is updated in the future to use any events that it currently does not, those will send as well. Unless your site is processing thousands of donations per day or more, you should have no issue with sending all events, and you can ignore the warnings from Stripe.

In order to process test mode donations, you’ll need to repeat the same steps with Stripe’s dashboard toggled into test mode.

API-key based Stripe Integration

If you want to use your own Stripe account’s API keys to connect to Stripe you can do so. Note: you do not need to use your own API keys if you are already connected to Stripe.

To use your API keys first navigate to WP-Admin > Donations > Settings > Advanced. On that page enable the “Stripe API Keys” option:

Once enabled you can now obtain your API Keys and configure your Give Settings to integrate with Stripe.

Obtaining Your Stripe API Keys

Login to your Stripe account and you’ll be presented with the Stripe Dashboard like the image below.

 

Click on Developers in the left navigation, then select the API Keys link. You will be presented with a screen like the one below (you may have to re-authenticate to see this screen):

 

There you’ll find all the API Keys you need to integrate Give with your Stripe account.

Test Keys are great for testing your donation forms before pushing your site live. When you are ready to go live, make sure to update your Stripe Add-on settings with the Live Secret and Publishable Keys.

Important: for live keys, follow the same steps above AFTER toggling the stripe dashboard into live mode. Test keys generally start with “sk_test” for the secret key and “pk_test” for the publishable key. Enter those keys in the appropriate spot in the Stripe settings for test donation. When your site is in Give test mode (more on that below) it uses these keys.

Integrating Your API Keys in Give

Copy each key and go to your WordPress site. Go to “Donations > Settings” and click on the Payment Gateways tab. There you’ll see a section called Stripe Settings. Paste each key into its respective field, then save settings.

That’s all there is to it. Now when your donors come to your site, they’ll be able to use credit cards to donate to you directly in the currency of your country and not have to be redirected to another site.

Stripe Settings Explained

Stripe Statement Descriptor

Settings Type: Text input
Options: any 22 alphanumeric characters.
Default: Site Title

This is the text that appears on your donor’s bank statements. Statement descriptors are limited to 22 characters, cannot use the special characters <, >, ', or ", and must not consist solely of numbers. This is typically the name of your website or organization.

This allows you to customize the info that displays on bank statements.

Note: There must be a value in this field for Stripe to function properly. A default value of your site name is typically set, but in rare circumstances, this field appears blank by default. In that case, save a value here to restore functionality.

---

3D Secure Payments

Settings Type: checkbox
Options: checked | unchecked
Default: unchecked

This option, when checked, enables 3D secure card payments, an additional layer of authentication that protects you from liability for fraudulent card payments. If enabled, donors may be redirected to the card issuer’s site to verify their identity. For more information about 3D secure payments, See Stripe’s documentation on 3D Secure Cards

Collect Billing Details

Settings Type: checkbox
Options: checked | unchecked
Default: unchecked

This setting allows you to collect Address data along with donations, so that donation records include addresses at Give. The address is not necessary to process the donation at Stripe, but you may have a need to collect it.

---

Pre-approve Only

Settings Type: checkbox
Options: checked | unchecked
Default: unchecked

This allows you to pre-approve payments but not charge until up to seven days after the donation has been made. If selected, you need to manually go in and mark donations as approved before the money will come into your Stripe account. After 7 days, the money is not recoverable.

Note: Pre-approval does not work for Recurring donations or ACH (bank account) payments. If enabled, those payments will process immediately.

Enable Apple Pay and Google Pay

Settings Type: checkbox
Options: checked | unchecked
Default: unchecked

This checkbox enables Apple Pay and Google Pay.

Read more about Apple Pay and Google Pay

---

Enable Stripe Checkout

Settings Type: checkbox
Options: checked | unchecked
Default: unchecked

Note: Stripe has deprecated this form of checkout and may no longer support it. As well, 3D secure card payments, Google and Apple Pay, are not available when using the Stripe Modal Window. If accepting 3D secure card payments is necessary, using the standard Stripe credit card fields is required.

If you want to use the Stripe Modal Checkout, essentially a Stripe-styled modal popup that offers a different interface to pay than the default Give credit card fields, check the Enable Stripe Checkout option. Once you do that you will see the following options appear:

• Checkout Heading: This is the main heading within the modal checkout.
• Stripe Checkout Image: This image appears in when the Stripe checkout modal window.
• Processing Text: This text appears briefly after the donor has made a successful donation while Give is confirming the payment with the Stripe API
• Verify Zip Code: If enabled, Checkout should validate the billing ZIP code of the donor for added fraud protection.
• Remember Me:  If enabled, Checkout would remember the card details for future donations.

Once you have configured and saved the above settings, you would now see a Stripe Modal checkout like below while donation using Stripe.

 

---

Credit Card Fields Format

Settings Type: radio buttons
Options: Single Field | Multi Field
Default: Multi Field

This setting allows you to choose how the credit card fields are displayed on the form. The default is Multi Field which displays separate inputs for Card Number, CVC, Cardholder Name, and Expiration date.

The other option is Single Field which houses all of those various pieces of data in a much smaller single input.

Some settings for Stripe are located in the Advanced tab at Donations > Settings > Advanced > Stripe. This section covers those settings and options.

Advanced Settings Options overview

Stripe API Keys

Settings Type: Radio buttons
Options: Enabled | Disabled
Default: Disabled

This setting is intended for when you’d like to use your own API keys taken directly from Stripe, instead of the blue Stripe Connect button from the Payment Gateways tab.

Stripe SDK Compatibility

Settings Type: Radio Buttons
Options: Composer Autoloading | Manual Initialization
Default: Composer Autoloading

This setting is recommended for when you’re experiencing conflicts or fatal errors on your website, due to other plugins on your site that are using the the Stripe Software Development Kit. WordPress does not have a dependency management system to prevent these kinds of conflicts. As a result, you can switch to Manual Initialization if experiencing these conflicts.

Stripe Receipt Emails

Settings Type: Checkbox
Options: Checked | Unchecked
Default: Unchecked

In addition or instead of sending GiveWP’s generated receipt emails each time someone donates through your website, you have the option to send emails to your donors directly from Stripe instead.

You can enable this and disable GiveWP generated receipt emails in the Emails > Donor Emails tab.

Stripe Styles

Settings Type: Text Areas

Options: Base Styles, Empty Styles, Invalid Styles, Complete Styles

Default for Base Styles:

{
    'color': '#32325D',
    'fontWeight': 500,
    'fontSize': '16px',
    'fontSmoothing': 'antialiased',

    '::placeholder': {
        'color': '#222222'
    },

    ':-webkit-autofill': {
        'color': '#e39f48'
    }
}

Default for Other Styles: {}

Use these areas to add custom JSON for various Stripe elements on your websites, such as color, font and more, in order to match the look and feel of your WordPress theme.

Read this doc more details on styling these Stripe fields.

Stripe Fonts

Settings Type: Radio buttons
Options: Google Fonts | Custom Fonts
Default: Google Fonts

These selections will apply to the Stripe Credit Card fields – including card number, CVC and expiration date.

Refer this doc more details on styling these Stripe elements.

With Google Fonts selected, there will be a text field where you can enter the Google Fonts URL that you want to apply to your Stripe Credit Card fields.

If you select Custom Fonts instead, a text area will open to allow you to add the custom CSS and declare the fonts you’d like to use.