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, select Developers > API Keys from the left sidebar menu.
      • 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 Token.
      • 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.
      • Click on the toggle next to View Test Data in the left-sidebar menu.
        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 Secret
      • Copy the Live Secret Key that appears.
        Go back to your site and paste it in Live Secret Key field.

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 > Webhook
      • Go to the tab “Endpoints” or “Endpoints receiving events from your account”.
        Click on the + Add Endpoint button.
      • In the next page, paste the Stripe IPN URL in the field “Endpoint URL”.
        Under Select events, you may select any event by clicking the + Select events and then click on Add events button.
        The list should be populated with the events. Click on the Add endpoint.
      • After saving the endpoint, you’ll be back to the webhooks dashboard, kindly click on the Update Details button.
      • In the Edit webhook endpoint pop up window, click on the Clear button.
      • Then all the events will be cleared and you’ll see the No events selected. Simply click on the receive all events button.
        Then, click on the Update endpoint.
      • 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 > Webhooks.
      • Go to the tab “Endpoints” or “Endpoints receiving events from your account”.
        Click on the + Add Endpoint button.
      • In the next page, paste the Stripe IPN URL in the field “Endpoint URL”.
        Under Select events, you may select any event by clicking the + Select events and then click on Add events button.
        The list should be populated with the events. Click on the Add endpoint.
      • After saving the endpoint, you’ll be back to the webhooks dashboard, kindly click on the Update Details button.
      • In the Edit webhook endpoint pop up window, click on the Clear button.
      • Then all the events will be cleared and you’ll see the No events selected. Simply click on the receive all events button.
        Then, click on the Update endpoint.
      • That’s it! Your new Endpoint Webhook will appear in the Webhook dashboard.

Your Stripe account is now integrated with your site!

 

Related Posts

How to test purchases (Stripe)