Stripe Payment Element
What is Stripe Payment Element?
From GiveWP 3.0 on, a new payment method will show up when you navigate to the payment gateway settings called Stripe – Payment Element. This payment method will only be visible in forms created using the Try the new form builder link. This new payment method accepts 40+ payment methods, validates input, and handles errors directly on your website.
As payment options we can list some of them:
- Apple Pay
- Google Pay
- ACH
- Cash App
And many more!
To use the Stripe Payment Element, ensure you are using GiveWP 3.0 (or newer), have a valid Stripe account and use a donation form that was created using the visual form builder.
Note: the Stripe Payment Element will only appear on forms created with the visual donation form builder. Forms created with the option-based form editor will require the site administrator to enable one of the other gateways to use on those forms. Learn more about the other free Stripe gateways.
It’s important to note that the Stripe Payment Element credit card checkout process happens directly on the form. Donors will not be redirected to Stripe to complete credit card payments. Some payment methods will redirect the donor to complete the donation.
Activating the Stripe Gateway
Navigate to “Donations > Settings > Payment Gateways > Stripe.”
From there click on the “Connect” button to connect to your Stripe account.
From there, you can follow the prompts to either connect your existing Stripe account, or sign-up for a new account.
With GiveWP, you’re not limited to just one Stripe account!
The “Manage Accounts” tab allows for connecting to multiple Stripe accounts from a single GiveWP-powered website. Once you’ve added all the accounts you need, you can configure individual forms to use specific Stripe accounts using the “Stripe Accounts” tab of the form edit screen.
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:
On that page, click the “Add endpoint” button and paste in your webhook URL.
The webhook is a one-way message from Stripe to your GiveWP site to alert the site of events on the Stripe side. Select the following Events:
- checkout.session.completed
- payment_intent.succeeded
- payment_intent.payment_failed
- charge.refunded
- customer.subscription.created
- customer.subscription.deleted
- invoice.payment_failed
- invoice.payment_succeeded
Stripe has a method for sending ALL events, which you can also use, as long as you understand the tradeoff you are making there. Every event that is sent over the webhook, regardless of whether GiveWP does anything with it, creates a log in the GiveWP logs at Donations > Tools > Logs. For the events above, in addition to logging the event, GiveWP also does something else (marks the donation as complete, adds a renewal for recurring subscriptions, marks a transaction as refunded, etc).
If you select all events, you’ll end up with lots of events GiveWP doesn’t really do anything with, which can clutter up your logs, or in the case of Stripe accounts with a ton of volume, potentially slow down your server.
But by selecting all events you’ll be ready if GiveWP ever changes/adds a feature that uses a new event.
The most common problem that points toward webhooks not being configured correctly is donations not being marked as complete on the GiveWP side, even though they are complete at Stripe.
A side effect of donations in “pending” status is that email notifications (Donation Confirmation, Donor Receipt, etc) are not sent.
Note: In order to process test mode donations, you’ll need to repeat the same steps with Stripe’s dashboard toggled into test mode. Then enable GiveWP’s Test Mode and follow these instructions to start testing Stripe.
Stripe Settings Explained – General Settings Tab:
Stripe Webhooks
Settings Type: Text Input
Options: Your Site URL followed by /?give-listener=stripe
The webhook should be copied and pasted to your Stripe account dashboard. Learn how to set it up in the above section.
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.
The GiveWP “Statement Descriptor” setting affects how your donors see their donations to you in their bank statements.
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.
Activating Payment Methods
In your Stripe dashboard navigate to the Payment Methods page from the Settings page:
In the Payment Methods page choose GiveWP from the Select Your Platform dropdown. Payment methods will be presented below for you to configure. To preview what Stripe methods will be activated use the Preview link just below where you Select Your Platform.
Not all payment methods will be available to every Stripe account. Currency, location, and other factors determined by Stripe will determine what is available for your account. If you have any issues connecting to a method please contact Stripe support.
