Secure Socket Layer (SSL) and eCart sites

Making sure that your online store provides a secure checkout process is an extremely important process. Implementing this important security, known as SSL or Secure Socket Layer, may require a little extra work.

 
NOTE:If you are using Remote Checkout to process transactions, you will not need SSL for your eCart site as credit card details will not be entered on your site.

What you need to start:

  • Dreamweaver CS3 or CS4
  • eCart 5
  • eCart site using Local Checkout
    • Obtain an SSL Certificate

    Most hosting providers give you the option to purchase an SSL Certificate. Once you purchase your SSL certificate from your hosting provider, you will have a new domain to use for the secure pages in your site.
    Your hosting provider will provide you with a secure domain that appears similar to one of the two following options.

    1. https://www.mydomain.com

      If your secure domain appears like this and contains the same domain name as your original site, you will not need to proceed with this tutorial.
    2. https://www.secure.mydomain.com

      If your secure site uses a different domain name from your original, proceed with this tutorial to create the necessary functionality for SSL to work on your eCart site.
    Implementing SSL

    If your secure domain name is different to your regular domain name, you will need to follow these steps to make sure that when a customer makes a purchase through your site, they are transferred to the secure site automatically.

    This is accomplished by creating a new Checkout button on your checkout page that takes the customer to the secure site.

    Creating the Insert Checkout Form

    First, you need to delete your current Checkout button and create a new button on your cart page.

    1. From the Files panel, open your cart page which contains your eCart shopping cart display.
    2. Click once to select the Checkout button on your page.
    3. Press Delete on your keyboard to remove this button.
    4. Select the Code button to enter Dreamweaver's Code view.
    5. Locate the closing </form> tag that contains the cart buttons.
    6. Place your cursor after this closing tag.
      This step is required to ensure that your new Checkout button is inserted outside of the current form.
    7. From the eCart toolbar, select Insert Checkout Form.
      Insert Checkout Form
    8. Select the SSL Transfer radio button.
    9. Enter the URL to the checkout page on the secure server.
      For example: https://www.mydomain.com.

      SSL Transfer
    10. Click Next.
    11. Choose the desired design options for your new Checkout form.
    12. Click Finish.
    13. Press Ctrl (Cmd) + S to save your page.
      When you click Finish, your new Checkout form will be created along with numerous icons representing hidden fields. These hidden fields will contain the cart details that are to be passed to the secure checkout page.
       
      NOTE:Since the Checkout button needs to be in a separate form, it cannot be inserted beside the other cart buttons. However, if you are comfortable with CSS, you can try to create a custom class that would display this button in any desired location.
    Modify the checkout page to receive your cart values

    With your cart page properly configured, you simply need to make simple adjustment to your checkout page.

    From the Files panel double-click to open your checkout page.
    1. From the Server Behaviors panel, choose Add > eCart > Add to Cart > Get Content From Form.
    2. Choose any form post from the Trigger menu.
    3. Select your cart from the Cart menu.
    4. Choose SSL Transfer from the Payment Gateway menu.

      Get Content From Form
    5. Click OK.
    6. Press Ctrl (Cmd) + S to save your page.
    Uploading your files

    With those changes made to your cart and checkout pages you can now upload your files to both your insecure and secure servers. It is important to make sure that you upload all your files to both locations every time you make a change to any of the pages within your site.

    Last Updated: January 3, 2011
    Feedback on this tutorial?

    If you did not find this helpful or you are stuck on a particular step, click here to let us know what we can do to improve this tutorial.

      • Required *
      • Invalid format.Please enter a full email address
        Please provide a comment
      • Security Code
        Entered text does not match; please try again

    This form was built using CSS Form Builder.