How to Configure the New Simple E-commerce Solution Service to Sell Open edX Courses with Stripe
#################################################################################################

This document guides you on how to configure the new simple e-commerce solution service to process payments remotely in Open edX courses with Stripe.

- `Configure Stripe to Activate Simple E-commerce Solution Service`_
- `Configure Payment button on the course`_
- `Configure the metadata`_
- `Setting up Webhook`_

**Prerequisite**

During the configuration of the Stripe process, you will be asked to enter a Webhook URL. You will need to request the **webhook URL** from the Edunext support team. We recommend that you gather this information before initiating the process to create the Product in your Stripe dashboard account, as this will accelerate the process.

Configure Stripe to Activate Simple E-commerce Solution Service
****************************************************************

.. note:: Please note that the instructions in this section should only be done for each course that you want to configure Stripe button payment.

**Step 1:**

To get started, go to https://dashboard.stripe.com/test/products and log in using your Stripe service credentials. Then click on the button **Add Product**.


.. image:: ../_assets/add_product_stripe.png
    :width: 500px
    :align: center
    :alt: Add product to Stripe account.

.. image:: ../_assets/activate_stripe.png
    :width: 500px
    :align: center
    :alt: Add product to Stripe account.

.. note:: To use applications and credentials in **Live** mode,  you must to activate your Stripe account.



**Step 2:**

You will need to choose a name for your product, some description **(It's not mandatory)**, pricing Model choose **Standard Pricing**,
then choose a value price for your course, in this case, we have selected 10 dollars. Finally select the option **One time** if your course should only be charged
one time, otherwise if it is a recurring charge choose the option **Recurring**. Once you finish the configurations, click on **Save product**

.. note:: This the basic configuration to create this product and you could explore the other options. Keep in mind that you can choose other types of currencies.

.. image:: ../_assets/product_information.png
    :width: 500px
    :align: center
    :alt: Product information.


**Step 3:** 

You will see the details of the product recently created.

.. image:: ../_assets/info_product.png
    :width: 500px
    :align: center
    :alt: Product info.


Scroll down to the **Pricing** options.

.. image:: ../_assets/pricing_options.png
    :width: 500px
    :align: center
    :alt: Pricing options.


Then click on **Create Payment link**.

.. image:: ../_assets/payment_link.png
    :width: 500px
    :align: center
    :alt: Access create new app and select merchant option.

**Step 4:** 

Once the **Create Payment link** was clicked, you will see the option to edit this button.

.. image:: ../_assets/payment_edit.png
    :width: 500px
    :align: center
    :alt: Payment edit.


If you want to use promotion codes for this course click on **Advanced Options**, then check **Allow promotion codes**

.. image:: ../_assets/promotion_code.png
    :width: 500px
    :align: center
    :alt: promotion codes


**Step 5:**

Click on **After payment**.

.. image:: ../_assets/after_payment.png
    :width: 500px
    :align: center
    :alt: After payment


**Step 6:**

Then click on **Don't show confirmation page** to redirect the client to the **About Page** course when the payment is confirmed.

**Step 7:** 

In the field paste the URL of the **About Page** of the course that will use Stripe button. Look at the image of example.

.. image:: ../_assets/redirect_payment.png
    :width: 500px
    :align: center
    :alt: redirect payment

And finally click on **Create link**

.. image:: ../_assets/create_link.png
    :width: 500px
    :align: center
    :alt: create link

**Step 8:** 

Once the payment was created, you will see this window with their options.

.. image:: ../_assets/payment_links_info.png
    :width: 500px
    :align: center
    :alt: payment link window

**Step 9:**

Click on **+Buy button**.

.. image:: ../_assets/buy_button.png
    :width: 500px
    :align: center
    :alt: buy button

**Step 10:**

You will see these options, go to **CONFIGURE** choose **Button**, choose your language. If you want to change the text
of the button, check **Change button text**, and if you want to change the styles of the button, check **Change styling options**.

.. image:: ../_assets/buy_button_options.png
    :width: 500px
    :align: center
    :alt: buy button options


**Step 11:** 

Click on **Save changes and copy code**, then you will get a code like this.

.. code-block:: html

    <stripe-buy-button
      buy-button-id="buy_btn_1NGmxxGgbtwEmKzqkcWIi0Kz"
      publishable-key="pk_test_51N1DBgGgbtwEmKzqjAf2snqreiQaej32SoviJUWG8cP5Qry1ztpy5wSXaFE41V0SqF7SSkdYvTGAfWgXG2LqTSo400M5gVLWOz"
    >
    </stripe-buy-button>

**Step 12:** 

Copy the **buy button id** in this case **buy_btn_1NGmxxGgbtwEmKzqkcWIi0Kz** and copy
the **publishable key** in this case ``pk_test_51N1DBgGgbtwEmKzqjAf2snqreiQaej32SoviJUWG8cP5Qry1ztpy5wSXaFE41V0SqF7SSkdYvTGAfWgXG2LqTSo400M5gVLWOz``
you will need this info in the next steps.


Configure Payment button on the course
***************************************
**Step 13:** 

Next, go to your `STUDIO account <https://studio.edunext.co/>`_ and select the course where you want to add the payment method. Within the course, go to the header menu, select the **Settings** dropdown, then choose **Schedule & Details**. Scroll down until you reach the **Course Overview** section.

.. only:: html

   .. figure:: ../_assets/step_7.gif

      course overview section

**Step 14:** 

In the **Course Overview** section, you will see several lines of code. In the last line of code, copy and paste the following code.

.. code-block:: html

  <script src="https://edunextpublic.s3.us-west-2.amazonaws.com/edxsites/clisite/e-commerce-stripe_v1.js" currency_code="your_currency_code" buy-button-id="your_buy_button_id" publishable-key="your_publishable_key"></script>

**Step 15:**

To proceed, you need to add the following details to your code:

- Your buy button ID, which can be found in the product you created on Stripe (Step #12). Add the buy button ID in quotes after the **buy-button-id** variable.
- Your **Publishable Key**, which can be found in the product you created on Stripe (Step #12). Add the buy **Publishable Key** in quotes after the **publishable-key** variable.

Once you add these details, your code will be ready to go.


.. note:: This button works together with the paypal button, note that you can leave out the information for the Stripe button and just leave the Paypal button,
 also note that the price of the variable **course_price** is only for the Paypal configurations.

.. code-block:: html

  <script src="https://edunextpublic.s3.us-west-2.amazonaws.com/edxsites/clisite/e-commerce_v1.js" client_id="your_client_id" currency_code="EUR" course_price="10" buy-button-id="your_buy_button_id" publishable-key="your_publishable_key"></script>


.. only:: html

   .. figure:: ../_assets/step_9.gif

      enter details to your code in this section

12. To complete the configuration, click on the **Settings** tab and select the **Advanced Settings** option.

.. image:: ../../_assets/H5P-xblock_Step3_2.png
    :width: 500px
    :align: center
    :alt: This image shows where the Setting tab and the Advances Setting option are. 

13. Go to the **Invitation Only** section and enable it by setting it to **true**.

.. image:: ../../_assets/stripe2.png
    :width: 500px
    :align: center
    :alt: This image shows where the Setting tab and the Advances Setting option are. 

14. Navigate to the **Course Visibility for Unenrolled Students** section and set it to **private**. Save the changes after making these adjustments.

.. image:: ../../_assets/stripe1.png
    :width: 500px
    :align: center
    :alt: This image shows where the Setting tab and the Advances Setting option are. 


Configure the metadata
**********************
.. note:: This steps of configurations is very important and necessary to the students enrollments works correctly.

**Step 16:** 

Once the button is configured, scroll down until **Metadata** option.

.. image:: ../_assets/metadata_inf.png
    :width: 500px
    :align: center
    :alt: metadata inf


**Step 17:** 

Click on **Edit metadata**.

.. image:: ../_assets/edit_metadata.png
    :width: 500px
    :align: center
    :alt: metadata


**Step 18:** 

There are two fields, in the first field called **key** you could copy and paste this **course_id** and the **value** you should paste the course key of the course you setting up.
Look at the example image below, the click on save.

.. image:: ../_assets/edit_data_metadata.png
    :width: 500px
    :align: center
    :alt: metadata edit


Setting up Webhook
******************

**Step 19:** 

To configure the Webhook go to https://dashboard.stripe.com/test/webhooks, then click on **Add an endpoint**.

.. image:: ../_assets/webhook_start.png
    :width: 500px
    :align: center
    :alt: webhook start

**Step 20:** 

At this point you will see the widow like the image below, edit this data in **Endpoint URL** paste the webhook URL sent by our support team, in **Description** edit this field
if you want is not mandatory, choose in **Listen to** the option **Events on your account** and finally in **Select events to listen to** choose the event called
**checkout.session.completed** then click on **Add endpoint**.

.. image:: ../_assets/edit_webhook_data.png
    :width: 500px
    :align: center
    :alt: webhook edited


Congratulations! You now have Simple E-commerce with Stripe set up in your course. If you encounter any problems, please do not hesitate to contact us.