Stripe Elements Add-OnPRO

This add-on is included with the Agency edition. Users of other WS Form PRO editions can also purchase this add-on separately.
Add-ons require WS Form PRO and are not compatible with the WS Form LITE edition.

Note: You must serve the page containing the payment form over HTTPS. In short, the address of the page containing Stripe Elements must start with https:// rather than just http://. For more information, click here.

Tip: Consider adding a Loader to your Stripe enabled form. This will give a visual indication to the user that the payment is processing.

Tip: The postal code field in Stripe Elements automatically formats based on the country of the credit card entered. Most test credit card numbers default to the U.S.

The Stripe Elements add-on allows you to accept credit card payments from your forms. You can either charge a fixed amount using the button in isolation, or you can use the WS Form E-Commerce fields to produce more advanced cart options.

How it Works

The Stripe Elements payment process works as follows:

  1. Customer enters their credit card details on the form.
  2. The credit card details are sent to Stripe client-side and securely tokenized.
  3. If tokenization is successful (e.g. the card number is correct), the form is saved and a payment intent is created in Stripe server-side.
  4. If card authorization is required, it is shown the user.
  5. The card payment is confirmed and completed and the form is submitted.
  6. If the card payment is successful, the rest of the action configured on the form are run.
  7. If the card payment is not successful, an error is shown on the form.

Installation

The WS Form Stripe Elements plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the Stripe Elements add-on, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the Stripe Elements tab at the top of the page.
  4. Enter your license key.
  5. Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

Configuring Stripe Elements

Obtaining Stripe API Keys

In order to use the Stripe Elements button, you first need to enter your Stripe publishable keys.

If you do not yet have a Stripe account, register for a new account.

To obtain your API keys:

  1. Log in to your Stripe account.
  2. From your Dashboard, click Developers.
  3. Click API Keys.

Creating Restricted Keys

We recommend creating restricted keys for your Stripe integration having the following permissions.

All Core Resources

  • Customers: Read / Write
  • PaymentIntents: Read / Write
  • SetupIntents: Read / Write
  • Sources: Read
  • Tokens: Read

All Billing Resources

  • Invoices: Read
  • Subscriptions: Write

Entering Your API Keys

To enter your publishable keys:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the Stripe Elements tab at the top of the page.
  4. Enter your test and live API keys.
  5. Click the Save button.

Adding The Stripe Elements Fields

Once configured the  Stripe Elements fields will appear under the E-Commerce section of the toolbox when editing a form. Two fields types are added:

  • Stripe Card – The user enters their credit card details here
  • Stripe Submit – The user clicks this to submit their credit card details

`You can place the Stripe Card and Stripe Submit fields anywhere you like on the form. An example layout is shown below: