Membership Plugin

WordPress Membership Plugin

Creating a Stripe Subscription Button (SCA Compliant API)

You can create Stripe Subscription buttons to charge recurring payments for selling memberships using the Simple Membership Plugin.

In this tutorial we will cover how you can create a Stripe Subscription Button to collect membership payments from your customers.

Table of Contents

What is SCA Compliance?

SCA for short also known as Strong Customer Authentication is a requirement of the EU Revised Directive on payment service providers (such as Stripe) within the European Economic Area. The requirement ensures that all electronically received payments are performed with multi-factor authentication, to increase the security of sensitive information.

How Can I Create a Stripe Subscription Button (SCA Compliant)?

If you wish for your members to subscribe and be charged weekly, monthly, yearly etc rather than just once off, you will need to create a subscription/recurring payment style button.

To set up a Stripe subscription payment button for memberships on your WordPress website, please follow the instructions outlined below. The steps have been divided into smaller sub-sections for your convenience and ease of following.

Step 1) Ensure you have the latest version of the Simple Membership Plugin installed and activated on your WordPress website. Also make sure that you have created a membership level to link your payments to.

Step 2) Click on ‘WP Membership‘ and then on the ‘Payments‘ menu from your WP Admin dashboard.

Step 3) From the ‘Payments‘ menu you will see a tab titled ‘Create New Button‘.

Step 4) Once you click on the ‘Create New Button‘ tab, you will need to select ‘Stripe SCA Subscription‘.

Step 5) Click the ‘Next‘ button.

You will need to give your Stripe Subscription button a title and choose the membership level that this button is for.

Step 6) You will now be required to log in to your Stripe account on a separate tab to proceed with the following steps. In these steps, you will create a subscription product within your Stripe account so you can obtain the API ID of that subscription product.

Create a Subscription Product within Your Stripe Account

Note: Stripe frequently updates their interface, so the screenshots provided may not exactly match what you see in your Stripe account. However, the screenshots should still offer a clear guide on the steps to follow.

Step 7) Within your Stripe account, click on the “Product catalog” menu.

Step 8) Click the “Create product” button to create a new product for this subscription style button.

Step 9) Choose a straightforward and meaningful name for the product (this name will appear in Stripe Checkout). Next, scroll down to the pricing section and set the recurring price based on your desired membership fee. Once done, click the “Add product” button to save.

Step 10) You have now created the subscription product in your Stripe account. Next, you will copy and paste the Price/API ID value of this product from your Stripe account into the “Stripe API ID” field in the “Create New Button” interface of the Simple Membership Plugin. Refer to the sixth step mentioned earlier.

To locate the “Price/API ID” of your subscription product, navigate to the “Product catalog” menu in your Stripe dashboard and select the desired product. The following screenshot highlights where to find the “Price/API ID” value.

NOTE: You need to use the “Price/API ID” from your Stripe account into the “Stripe Price/API ID” field of the payment button. Don’t use the “Product ID”. The Price/API ID value looks like the following:

price_1Qd2woHL0aRADsDSFXzZqG7i

Copy and Paste Your Stripe API Keys

Step 11) Within your Stripe account, click on the ‘Developers‘ menu and then on ‘API Keys‘. You will need to copy your Stripe API keys from your account into the appropriate fields of the ‘Create New Button‘ interface.

The screenshot below provides an example of where to locate your Stripe API keys within your Stripe account.

Please note: Stripe may update their interface without notice, so the actual screen might differ.

If you have already copied and pasted the API keys in the payment settings menu of the plugin, you may choose the Use Global API Keys Settings option and proceed to the next step. This can be beneficial if you intend to create several Stripe payment buttons for various membership levels on your website.

To use Restricted API keys, refer to the Using Stripe Restricted API Keys section on this page below.

Create a Webhook in Your Stripe Account

You only need to create the webhook once. Therefore, if you have previously followed these instructions to create a webhook, you may verify if it is still present in your Stripe account and proceed to the next step.

Step 12) Create your webhook in your Stripe account by clicking on the ‘Webhooks‘ menu found under ‘Developers‘ menu. Click the ‘Add endpoint‘ to create a new webhook.

Copy and paste the ‘Webhook Endpoint URL‘ from the ‘Create New Button‘ interface and paste it into the ‘Endpoint URL‘ field in your Stripe account.

Choose the following list of events from the ‘Events to Send‘ section. Click the ‘Add Endpoint Button‘.

  • charge.refunded
  • customer.subscription.updated
  • customer.subscription.deleted
  • invoice.paid
  • invoice.payment_succeeded

The screenshot below illustrates an example of how to add a webhook in your Stripe account.

This tells Stripe to send a notification to the plugin for the above-mentioned events.

Save the Payment Button

Step 13) After completing all the mandatory fields in the payment button interface, please save the information by clicking on the ‘Save Payment Data‘ button.

Step 14) You have now created a new SCA Compliant Stripe Subscription button.

Step 15) You can copy the shortcode of this payment button and add it to any post or page of your choosing.

You can customize the Subscription button text by using the “button_text” parameter in the shortcode. See a shortcode example below:

[swpm_payment_button id=4010 button_text="Subscribe Now"]

What Does My Stripe Subscription Checkout Look Like?

When you create a Stripe Subscription button, it will function like any other Simple Membership subscription button when added to a post or page on your WordPress site. Upon clicking to subscribe, the checkout process will be hosted on Stripe’s website seamlessly, without the customer noticing. This ensures full compliance with the latest online regulations.

Below is a screenshot of a Stripe subscription checkout example.

What Happens After the Payment?

Payment by New Member

If this is a payment made by a NEW member then the user will receive an email that contains a “special” link to complete the registration. Read the Registration Process Overview documentation to learn more.

If you are using the Thank You page shortcode, the user can access the special paid membership registration link directly from the Thank You page and complete the registration there.

Payment by Existing Member

If the payment is made by an EXISTING member then the membership level (associated with this payment button) is applied to the existing member’s profile.

Note: The member must be logged into their account when making the payment for the plugin to recognize them and treat them as an existing member.

Configuring a Thank You Page

This step is optional but I recommend that you configure a Thank You page as explained in this documentation. You can then use this page in the button’s configuration.

If you specify a Return URL (Thank You Page) in the button, when your customers complete the transaction, they will be redirected to that thank you page. The Thank You page will have a link for them to register for the membership they just purchased.

Auto Redirect to the Paid Registration Page After Payment

If you want to simplify the registration process even further, you can now automatically redirect users to the unique paid registration page immediately after payment.

To learn more about this feature and how to enable it, see this documentation.

Using Stripe Restricted API Keys

To enhance security, you can use Restricted API Keys from your Stripe account when configuring the Stripe button. Restricted keys limit the permissions available to the plugin, reducing the risk of unauthorized access to sensitive data or actions.

Steps to Create and Use Restricted API Keys:

  1. Log in to your Stripe Dashboard at https://dashboard.stripe.com.
  2. Go to Developers → API Keys.
  3. Click Create Restricted Key.
  4. Set the following permissions for the key:
    • Customers → Write – Required to create and manage customer details.
    • Payment Intents → Write – Required to process payments.
    • Setup Intents → Write – Required for setting up payment methods.
    • Products → Read – Required to read product details (if applicable).
    • Events → Read – Required to monitor and process webhook events.
    • Subscriptions → Write – Required for subscriptions/recurring payments.
  5. Once the key is created, copy the key.
  6. Paste the Restricted API Key into the appropriate Secret API Key field in the plugin settings.

Custom Style for the Stripe Subscription Button

You can specify a custom CSS class for the button using the “class” parameter in the shortcode. Then you can define your own custom CSS for that class.

For example, The following shortcode will use the standard theme’s button style: 

[swpm_payment_button id=75 button_text="Pay Now" class=""]

The following shortcode will add the “my-stripe-button” class to the button so you can target that class and customize the CSS.

[swpm_payment_button id=75 button_text="Pay Now" class="my-stripe-button"]

How Can I Test My Stripe Payment Button?

Prior to testing a transaction, it is recommended that you go through this payment testing checklist.

The following steps outline how you can test a Stripe transaction in sandbox/testing mode:

  1. Go to the WP Membership Settings -> Payment Settings menu. Check the Enable Sandbox Testing checkbox. Save Changes.
  2. Make sure to enter both your test and live API credentials for the payment buttons you intend to test.
  3. Navigate to the page or post where the button is located and then click on the Stripe payment button.
  4. You can use the following test Visa card number for testing: ‘4242 4242 4242 4242’. The expiration date should be set to any date in the future, and the CVC can be ‘123’.
  5. Please note that you will not be charged anything when using this test card, as it is only meant for testing purposes.
  6. If everything has worked successfully, you will receive an email to your address to complete the next stage of registration.

Troubleshooting Step 1: Verifying the Existence of Your Stripe Webhook

Please ensure that the webhook, as outlined in the Create a Webhook section above, has been correctly configured.

Please navigate to the ‘Webhooks’ section in your Stripe account to verify that a webhook is set up with the appropriate details. Refer to the following screenshot for guidance; this example demonstrates the configuration in test mode, but the same principles apply to both live and test modes. Ensure that this setup is correctly implemented for both modes, especially if you are conducting transactions in test mode.

Troubleshooting Step 2: Enable the Debug Logging Feature

The debug logging feature is beneficial for verifying that all setups are correctly completed and ensuring the plugin is receiving the proper payment notifications from Stripe.

If you are testing a scenario where a new member is paying via a Stripe subscription button, you should see entries similar to the following in the debug log file.

If these entries do not appear in the log file, the issue is likely due to one of the following reasons:

  • Incorrect Button Setup – The button may not be set up correctly according to the documentation.
  • Plugin or Theme Conflict – A conflict with a plugin or theme could be interfering. Perform a conflict test to confirm.
  • Server Environment Conflict – The server may be blocking POST data from Stripe. The security settings on some servers may be blocking the notification.

Troubleshooting Step 3: Test for Conflicts

The plugin and theme conflict test is useful for identifying a conflict with the Stripe subscription button.

SSL Certificate Requirement

Stripe payment gateway requires you to have SSL certification on your checkout page (the page where you put your payment button). So the URL of that page should have HTTPS (example: https://yourdomain.com/join-us-page).

If you are not already using an SSL certificate on your site then you should contact your hosting provider and request them to install it for you. This plugin is useful to force your payment page (where you have the Stripe payment button) to be loaded using HTTPS.

Stripe Coupon, Discount or Promotion Codes

For guidance on using discount codes with Stripe buttons, refer to this documentation.

How to Cancel a Stripe Subscription

Read the stripe subscription cancellation documentation.

What Happens When a Subscription is Cancelled?

Read the what happens when a subscription is cancelled documentation.

Downgrade Deactivated Member Accounts to a Free Tier

Optionally, you can add this option to your site so the users whose accounts are expired or inactive are downgraded to a “Free” membership level tier.

Displaying a Message to Members with an Active Subscription

To help prevent members from accidentally purchasing duplicate subscriptions, you can enable the “Show Warning for Existing Subscription” option when editing a subscription button.

When this option is enabled, logged-in members with an active subscription will see a warning message. You can customize this message to inform them that they already have a subscription and may wish to cancel it before purchasing a new one.