14001 – Integrating Stripe with your website

This article will cover the steps needed to be taken if you want to integrate your site with Stripe.

There are 2 steps to complete the Stripe integration:

  • Add the Publishable and Secret Keys (Test and Live)
  • Setting up Stripe IPN URL (REQUIRED)

NB! As of the 14th of September 2019, Stripe requires Strong Customer Authentication (SCA) for all payments made through their system. This has been implemented in the system and you do not need to do anything on the platform yourself. You can find out more about SCA here: Strong Customer Authentication on Stripe


 

To integrate your site with your Stripe account, simply follow these steps:

  • Go to Settings and then select Integrations.
  • In the Integrations dashboard, under Payment Systems, click on the Stripe toggle. Note the information required from your Stripe Account:
    + Test Secret Key
    + Test Publishable Key
    + Live Secret Key
    + Live Publishable Key
    + Stripe IPN URL

 

Step 1 – Add Publishable and Secret Keys

 

Test API Keys
  • In a new tab, log in to your Stripe Account.
    In the dashboard of your account, click on the Developers in the upper right hand corner.
  • Then click on the API Keys.
  • To ensure that you are getting the Test Keys only, both TEST DATA and Viewing Test API Keys should be visible in the page. Viewing test data should be enabled as well.
  • Copy Publishable API key.
  • Go back to your site and paste it in the Test Publishable Key field provided.
  • Go back to Stripe, just below the Publishable Key, click on Reveal Test Key.
  • Copy the Test Secret Key that appears.
    Go back to your site and paste it in Test Secret Key field.

 

Live API Keys
  • Go back to Stripe.
  • Turn the toggle OFF next to View Test Data in the right side.
    This will show your Live API Keys, which should appear in the page right away.
  • To ensure that you are seeing the Live API Keys only, the phrase Viewing Live API Keys should be visible in the page.
  • Copy Publishable key.
  • Go back to your site and paste it in the Live Publishable Key field provided.
  • Just below that, click on Reveal Live Key Token.
  • Copy the Live Secret Key that appears.
    Go back to your site and paste it in Live Secret Key field.
  • Once done, click on the SAVE CHANGES button.

 

Step 2 – Setting up Stripe IPN URL (REQUIRED)

This step is vital to ensure clear communication between Stripe and your website when purchases are made for both internal (your courses) and external products.

Next, copy the Stripe IPN URL from your site.

Setup IPN for Live Payments
  • Go back to your Stripe account. Ensure Viewing Test Data in the left-sidebar menu is disabled. Go to Developers and then Webhooks.
  • In the Webhooks dashboard, click on the + Add Endpoint button.
  • In the next page, paste the Stripe IPN URL in the field Endpoint URL.
    Under Select events to listen to, please click the + Select events.
  • In the next page, put a check mark on the Select all events and then click on the Add events button at the bottom.
  • Once clicked, you’ll go back to the Listen to Stripe events page.
    The list should be populated with the events. Just scroll down further and click on the Add endpoint button.
  • After saving the endpoint, you’ll be back to the webhooks dashboard.
    If you need to edit the details, simply click on the ellipsis on the upper right hand corner and select on the Update Details button.
  • That’s it! Your new Endpoint Webhook will appear in the Webhook dashboard.
Setup IPN for Test Payments
  • Switch your stripe account to Test mode and go to Developer and then Webhooks.
  • In the Webhooks dashboard, click on the + Add Endpoint button.
  • In the next page, paste the Stripe IPN URL in the field Endpoint URL.
    Under Select events to listen to, please click the + Select events.
  • In the next page, put a check mark on the Select all events and then click on the Add events button at the bottom.
  • Once clicked, you’ll go back to the Listen to Stripe events page.
    The list should be populated with the events. Just scroll down further and click on the Add endpoint button.
  • After saving the endpoint, you’ll be back to the webhooks dashboard.
    If you need to edit the details, simply click on the ellipsis on the upper right hand corner and select on the Update Details button.
  • That’s it! Your new Endpoint Webhook will appear in the Webhook dashboard.

 

Step 3 – Enable 3DS Secure

To enhance the security of your website and avoid fraud attacks it is highly recommended to enabled 3D Secure on supported cards. Here are the steps

  • On your Stripe dashboard click on the More drop-down and select Radar.
  • On the left sidebar click on Rules.
  • Under Authentication rules scroll down to Request 3DS if 3D Secure is supported for card. Click on the ellipsis or the 3 dots () icon.
  • Select Enable and in the pop up that appears click on the Enable button.
  • That’s it your site will now be protected by 3D Secure on supported cards.

Your Stripe account is now integrated with your site!

 


 

Related Article

How to test purchases (Stripe)