Stripe CheckoutPRO

The Stripe Checkout 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.

The Stripe Checkout button uses the latest, client-side payment process offered by Stripe.

Installation

The WS Form Stripe Checkout 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 Checkout 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 Checkout’ 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 Checkout

In order to use the Stripe Checkout 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.’

To enter your publishable keys (you do not need to enter your secret keys):

  1. Click ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Settings’.
  3. Click the ‘Stripe Checkout’ tab at the top of the page.
  4. Enter your test and live publishable key.
  5. Click the ‘Save’ button.

Once configured the Stripe Checkout button will appear under the ‘E-Commerce’ section of the toolbox when editing a form.

Adding The Stripe Checkout Button

To learn how to add, edit, clone, move, resize, offset, or delete a Stripe Checkout button field, please click here.

When editing a custom button field, the field settings sidebar will appear. This contains the following tabs:

You can edit any of the settings in each of these tabs and then click the ‘Save’ button to save your changes. If you do not want to save your changes, you can click the ‘Cancel’ button or click any other form element to close the field settings sidebar.

For a full explanation of the configuration options for the Stripe Checkout button, click here.

The Anatomy of a Stripe Checkout Pop-Up

The Anatomy of a Stripe Checkout Pop-Up

The Stripe Checkout pop-up is configured using the following settings:

Basic

The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:

Label

This is the label shown in the button. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, ‘Stripe Checkout’ or ‘Make Payment’.

Transaction

Amount To Charge

By default this field is blank, and the Stripe Checkout button will charge the amount calculated by the e-commerce fields on your form (the same as entering #ecommerce_cart_total). For example, you might have a single price field for making a donation, or a more elaborate form with prices, quantities, and subtotals.

You can also enter a fixed amount into this field.

WS Form variables can be entered into this field.

Description

Enter the description of the transaction in this field. For example: Payment To My Blog.

WS Form variables can be entered into this field.

Allow Remember Me

If checked, the option to “Remember Me” for future purchases will be enabled in the Stripe pop-up. This feature is dependent on the browser and may not be available if your customer has certain privacy settings enabled.

Appearance

Name

Enter the name to show at the top of the pop-up. This is typically your website or company name.

Image

A relative or absolute URL pointing to a square image of your brand or product. The recommended minimum size is 128x128px. The supported image types are: .gif, .jpeg, and .png. Click the ‘Select Image’ button to select an image from your WordPress media library. Alternatively you can enter any other URL into this setting.

Payment Button Label

Enter the label of the payment button in the Stripe Checkout form (e.g., Subscribe, Pay {{amount}}, etc.). If you include {{amount}} in the label value, it will be replaced by a localized version of data-amount. Otherwise a localized data-amount will be appended to the end of your label. Stripe Checkout does not translate custom labels to the user’s preferred language.

Advanced

The advanced tab contains additional form attribute settings that provide further control over how the Stripe Checkout button is rendered.

Billing Address

Collect Billing Address

If checked, Stripe will request the web user’s billing address.

Billing Address Mapping

When ‘Collect Billing Address’ is enabled and the payment is successful, you can pass the billing address collected by Stripe to your form fields using this setting. For example, you could create hidden fields on your form to store the billing address retrieved from Stripe so that they appear in your Submissions.

To map a Stripe field to your form field:

  1. Click the ‘Add’  icon at the bottom right of the billing address mapping section.
  2. In the left-hand column, select the Stripe field.
  3. In the right-hand column, select the corresponding field in your form.
  4. Repeat this process for each field on your form.
  5. Click the ‘Save’ button at the bottom of the sidebar to save your changes.
Validate Billing Zip Code

If checked, Stripe Checkout will validate the billing ZIP code. Stripe highly recommends enabling this setting and enabling declines on verification failures in your account settings.

Collect Shipping Address

If checked, Stripe will request the web user’s shipping address.

Shipping Address Mapping

When ‘Collect Shipping Address’ is enabled and the payment is successful, you can pass the billing address collected by Stripe to your form fields using this setting. For example, you could create hidden fields on your form to store the billing address retrieved from Stripe so that they appear in your Submissions.

To map a Stripe field to your form field:

  1. Click the ‘Add’  icon at the bottom right of the shipping address mapping section.
  2. In the left-hand column, select the Stripe field.
  3. In the right-hand column, select the corresponding field in your form.
  4. Repeat this process for each field on your form.
  5. Click the ‘Save’ button at the bottom of the sidebar to save your changes.

Transaction

Zero Amount

You can configure how WS Form should handle zero amounts for Stripe Checkout buttons. In some cases you may wish to show an error message (e.g., a donation amount is set to zero). In other cases you may wish to still submit the form (e.g., if something is determined to be free). Select the appropriate action from the pull-down list.

Zero Amount Message

If you opt to show an error message, enter the error message you would like be shown here.

Error Messages

WS Form PRO processes any error messages as standard WS Form messages. The error message settings match those of the ‘Show Message‘ action. You can configure these options to change how the error messages are displayed to users.

Classes

For developers WS Form allows you to add your own classes to fields.

Wrapper CSS Classes

The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.

Field CSS Classes

To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Breakpoints

The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.