1. Home
  2. Stripe & Commissions Gateway
  3. Getting Started
  4. Stripe Commissions & Gateway Setup Guide Version 2.0
  1. Home
  2. Stripe & Commissions Gateway
  3. Stripe Commissions & Gateway Setup Guide Version 2.0

Stripe Commissions & Gateway Setup Guide Version 2.0

Last Updated: 9th July 2019 

This is the documentation for Stripe Commissions & Gateway plugin. To purchase it, click here.

With this extension you can setup a stripe connected marketplace payment system to pay your vendors their commissions at the point of sale.

  • Vendors can connect their standard stripe accounts to the platform
  • Charges are direct charges at this time
  • Admins can configure the payment gateway for test and live transactions
  • Admins can require vendors to connect their accounts before the vendors are allowed to add or edit products
  • Payments are processed instantly and cannot be scheduled at this stage.
  • WooCommerce Subscriptions support has been added.

Installation

  1. In WordPress, go to Plugins > Add New > Upload
  2. Click Choose File and find your downloaded ZIP file
  3. Activate the extension through the ‘Plugins’ menu in WordPress
  4. Go to WooCommerce > Settings > Payment Gateways > Stripe Connect to configure the plugin

What Customers Will See when choosing payment methods

Once you have configured the payment gateway, at checkout, buyers will see:

The TEST MODE text will only show if you have test mode enabled. Once you are in live mode, that text will disappear.

What Vendors Will See

Vendors must connect their accounts with Stripe before being able to receive payments via Stripe. They may do so on their Vendor Dashboard > Shop Settings page. For Pro it will be on Dashboard > Settings > Payment tab. 

Stripe Connect
This is the stripe connect screen shown on the settings page for WC Vendors Marketplace

 

This is what vendors will see on the Pro dashboard page under Settings > Payments

 

When the vendor clicks on the Connect with Stripe button, stripe will ask them for their login information, and if they don’t already have an account, it will ask them to create one. Once they do, they will be redirected back to your site and successfully connected to Stripe. Once connected, the Connect with Stripe button changes to a “Disconnect from Stripe” link if the vendor decides to deactivate Stripe Payments for their vendor account.

After a vendor has received an order that was paid with Stripe, their sales will show up under their Stripe dashboard on stripe.com. Sales will still show up on your sites Vendor Dashboard, too. They will see the total purchase price, and the amount received after commission.

Require connected account

A new feature of Version 2.0.X and above will allow admins to require that vendors connect their stripe accounts before they can add or edit products. When a vendor logs in they will see a notice on their screen that they will need to connect their account before they can add products.

WC Vendors Marketplace
WC Vendors Marketplace

 

WC Vendors Pro Notice

 

This will force the vendors to connect their accounts before they can add products and process sales.

Testing the Gateway

To test the Stripe Gateway at checkout, use credit card number “4242424242424242” with any valid expiration date, and any CVC code you like. The gateway must be in test mode for this to work.

WordPress Admin Configuration

The plugin has requires setting API keys and Client IDs to be able to communicate with the Stripe Connect platform. You will need to configure your Stripe account to make sure that you can process payments and commissions to your vendors.

Please Note:

If this information is incomplete or incorrect than your gateway will not function and you will not be able to have vendors connect their accounts to your marketplace.

You need to complete the following to ensure your Stripe account is configured correctly.

  • API Keys
  • Client IDs
  • Return URI
  • Branding

Your Stripe account can be in one of two modes

  • Live Mode – Processing payments from customers and sending commission payouts to vendors. This is the mode you use when you launch your marketplace.
  • Test Mode – Testing that the integration and marketplace is functioning correctly. This is done before you launch your marketplace.
Test Mode enabled for when you are testing the gateway before launching

 

Live mode for when you are ready to start accepting payments from customers

Live & Test Mode

There are two modes that your Stripe Account can be in Live and Test Mode.  This is configured using the toggle in the side menu.

 

This will change your views between your live configuration and your test configuration. This setting is for your entire Stripe account including your API keys and your Stripe Connect configuration.

API Keys

You will need to get your API keys for both your live and test. Login to stripe.com (or create an account, if you haven’t created one) to gather your different keys.

Live API Keys

You will need to get your Live API keys from your Stripe account.

  1. Login to Stripe
  2. Click on Developers menu on the left
  3. Click API Keys
  4. Click ‘Reveal Live key token’
  5. Copy live key token
  6. Paste Secret key in the plugin settings WordPress
  7. Copy Publishable key
  8. Paste Publishable key into the plugin settings in WordPress

Live credentials plugin configuration

On your website, go to: wp-admin > WooCommerce > Settings > Payment Gateways > Stripe Connect

Paste the Secret and Publishable keys here

Test API Keys

You will need to get your Test API keys from your Stripe account.

  1. Login to Stripe
  2. Click on Developers menu on the left
  3. Click API Keys
  4. Click the slide bar ‘view test data’
  5. Click ‘Reveal Live key token’
  6. Copy live key token
  7. Paste Secret key in the plugin settings WordPress
  8. Copy Publishable key
  9. Paste Publishable key into the plugin settings in WordPress

Test credentials plugin configuration

On your website, go to: wp-admin > WooCommerce > Settings > Payment Gateways > Stripe Connect

Paste the Secret and Publishable keys here

Please Note

This will give you the information for the secret and publishable keys but not your client id.

Client ID

Once you have configured the live and test keys you will need to configure the connect client id. Click Settings underneath ‘viewing test data/view test data‘ and then click Connect Settings on the right hand side of the stripe apps section. . The first time you click Connect add a new application. Once you have created the application, you will need to get your Live and Test Client Ids.

Live Client ID

You will need to get your Live Client ID from your Stripe account.

  1. Click Settings on the sub menu for connect
  2. Then click Connect Settings
  3. Ensure that you have clicked the live/test toggle so that it says ‘view test data’
  4. Under Integration the Live mode Client ID
  5. Paste the client ID into the plugin settings in WordPress

Stripe Connect Settings

 

Live Return URI

The Return URI instructs Stripe where on your website to return the connected account to. You set your redirect page on the Stripe Connect settings page in your WordPress Admin. By default this is set to the vendor dashboard page.

Please Note

Please ensure that your redirect URI is set correctly based on the url of the page you select. If this isn’t set correctly stripe connect will not function

  1. On the same Stripe Connect Settings screen you have redirect URI’s
  2. Click on Add Redirect URI
  3. Enter the url of your WooCommerce My-Account page (example: https://yourdomainname.com/my-account)
  4. Click Add URI 

Please Note

Please ensure this URL matches your website and domain name. Replace the example with your actual domain name. 

Live credentials plugin configuration

On your website, go to: wp-admin > WooCommerce > Settings > Payment Gateways > Stripe Connect

Test Client ID

You will need to get your Test Client ID from your Stripe account.

  1. Click Settings on the sub menu for connect
  2. Then click Connect Settings
  3. Ensure that you have clicked the live/test toggle so that it says ‘view test data’
  4. Under Integration the Test mode Client ID
  5. Paste the client ID into the plugin settings in WordPress

Test Return URI

The Return URI instructs Stripe where on your website to return the connected account to. You set your redirect page on the Stripe Connect settings page in your WordPress Admin. By default this is set to the vendor dashboard page. This must be set for your test mode also.

Please Note

Please ensure that your redirect URI is set correctly based on the url of the page you select. If this isn’t set correctly stripe connect will not function

  1. On the same Stripe Connect setup screen under Integration
  2. Click on Add URI
  3. Enter the url of your WooCommerce My-Account page (https://yourdomainname.com/my-account)
  4. Click Add URI

 

Please Note

Please ensure this URL matches your website and domain name. Replace the example with your actual domain name. 

Test credentials plugin configuration

On your website, go to: wp-admin > WooCommerce > Settings > Payment Gateways > Stripe Connect

 

Summary

Once you have configured your API keys and client IDs, both your return URIs are configured you will be ready for testing or processing payments.

Test mode credentials

 

Live credentials

Stripe Connect Button Theme

There is a new option in version 2.x and above that allows you to change the colour of the stripe connect button the vendors see. So instead of only the dark blue option you are use to seeing, you have a total of 4 different options.

 

Branding

Stripe provides some settings so that you can configure the landing page when the vendors click connect. This allows you to change basic colours, add your marketplace name and logo. This is optional and up to you.

Conclusion

That’s it! You’re done configuring your stores Stripe.com account for use. If you change from Test to Live, be sure you do it on Stripe.com and in the WooCommerce Stripe Gateway Settings, as the settings must match on both sites.

Please Note

If you have any issues with your Stripe account please contact Stripe. We cannot assist you with configuring your Stripe Account. 

Updated on July 10, 2019

Was this article helpful?