Salmon Out of the box, checkout setup

Checkout is a little bit different than other pages, though you may find some similarities.

There are several ways to implement a checkout page, the default one we provide for out of the box integration is a one page checkout. It starts with a login/register section, then allows to enter/select an address for the order, then offers type of shipping method, then type of payment method. Finally. it recaps the details and the cart before to move on with payment.

This one page checkout use multiple sections, each containing one step, showing only the active one. A menu with labels may allow to follow up steps.

Your main DIV must be <div id="e2ccheckoutmain">. This is the DIV that will contain all sections. Each section will be a DIV with id="e2ccheckout_1" to id="e2ccheckout_5" as bellow.


Make sure each section is hidden, Salmon will manage visibility for you:

<div id="e2ccheckout_1" style="display:none;">...</div> //Display none is necessary.

After you have set your main DIV and sections IDs, you may handle each step as further bellow.

Step 1, Signin/Register

Into <div id="e2ccheckout_1" style="display:none;">.

The sign-in part should be a form with id=e2cuserlogin. The form should be similar as bellow:

<form id="e2cuserlogin">
  <input id="e2culogin" type="text" class="e2culogin form-control" placeholder="Username"/>
  <input id="e2cupwd" type="password" class="e2cupwd form-control" placeholder="Password"/>
  <button onclick="javascript: e2c_login();" type="button" class="btn btn-primary pull-right">Sign In</button>
  <span id="e2cuserloginvalidate" class="e2cuserloginvalidate"></span>
  <span id="e2cloginsuccess" class="e2cloginsuccess"></span>
</form>

Please pay attention to ids and classes in red.

The register part should be a form with id="e2creg". The form should be similar as bellow:

<form id="e2creg">
<input id="e2creglogin" type="text" class="form-control" placeholder="Username"/>
  <input id="e2cregpwd" type="password" class="form-control" placeholder="Password"/>
  <input id="e2cregemail" type="email" class="form-control" placeholder="Email"/>
  <input name="ty" type="hidden" value="fap"/>
  <input id="e2creguty" type="hidden" value="buyer"/>
  <button id="e2cregbutton" onclick="javascript: e2c_regfap();"  type="button" class="btn btn-primary pull-right">Create</button>
</form>

Step 2, Select/Register an address

Into <div id="e2ccheckout_2" style="display:none;">.

The DIV that will show the existing addresses, if any (ie: existing customer) is pretty simple, and will be populated by Salmon:

<div id="e2ccontactaddresses"></div>

You must set a button to handle the address choice. Once an address is selected it will be visible:

<button style="display:none;" id="e2caddbt" onclick="javascript: e2c_doCartAddresses();" type="button" class="btn btn-primary pull-right">Set as billing & shipping address</button>

Another DIV will contain a form allowing to create an address. Note identical name and id for each form element.

<form>
  <select name="e2ccontactgender" id="e2ccontactgender">
    <option>Gender</option>
    <option>Mr.</option>
    <option>Miss.</option>
  </select>
  <input name="e2ccontactname" id="e2ccontactname" type="text" placeholder="First Name"/>
  <input name="e2ccontactsurname" id="e2ccontactsurname" type="text" placeholder="Last Name"/>
  <input name="e2ccontactstreet" id="e2ccontactstreet" type="text" placeholder="Address"/>
  <input name="e2ccontactcity" id="e2ccontactcity" type="text" placeholder="City"/>
  <input name="e2ccontactpostcode" id="e2ccontactpostcode" type="text" placeholder="Zip/Postal code"/>
  <input name="e2ccontactstate" id="e2ccontactstate" type="text" placeholder="State"/>
  <input name="e2ccontactcountry" id="e2ccontactcountry" type="text" placeholder="Country"/>
  <input name="e2ccontacttel" id="e2ccontacttel" type="text" placeholder="Phone"/>
  <input name="e2ccontactmobile" id="e2ccontactmobile" type="text" placeholder="Mobile"/>
  <button onclick="javascript: e2c_saveContact();" type="button">Create</button>
</form>

Nota, you may want to provide a list of countries as a select rather than an input for e2ccontactcountry.

Step 3, Shipping methods

Into <div id="e2ccheckout_3" style="display:none;">.

The shipping methods will be called up by Ajax. This way of setting a container for dynamic content is different from the one you got used yet. However just set a DIV with id=e2cshipm, as per bellow example:

<div id="e2cshipm">
  <div class="e2cshipm">
    <input type="radio" id="e2cshipmreference" name="e2csm" value="sm" onclick="javascript: $('#e2cshipmbt').show();"> <span id="e2cshipmtitle"></span> <span id="e2cshipmdescription"></span><br>
    <span style="display:none;"><span id="e2cshipmsreference"></span><span id="e2cshipmrateID"></span><span id="e2cshipmtitle"></span><span id="e2cshipmamount"></span><span id="e2cshipmispercent"></span><span id="e2cshipmstatus"></span><span id="e2cshipmcalcul"></span><span id="e2cshipmcondition"></span></span>
  </div>

</div>
<div id="e2cshipmbt" style="display:none;" >
  <button onclick="javascript: e2c_checkoutSetShippingMethods();" type="button">Set as shipping method</button>
</div>

Dont forget to add the div id=e2cshpmbt, as above, that button will show once a shipping method is selected.

Step 4, Payment methods

Into <div id="e2ccheckout_4" style="display:none;">.

The DIV that will list available payment methods, with id="e2cpaym", is straight forward:

<div id="e2cpaym"></div>

<div id="e2cpaymbt" style="display:none;">
   <button onclick="javascript: e2c_checkoutSetPaymentMethods();" type="button">Set as payment method</button>
</div>

Dont forget to add the div id=e2cpaymbt, as above, that button will show once a payment method is selected.

Step 5, Order recap

Into <div id="e2ccheckout_5" style="display:none;">.

Place this:

<span id="e2ccartaddress"></span> //will show the address for this order
<span id="e2ccartPM"></span> will show the selected payment method

Then, place this:

<div id="e2cshiprate">
       <p><b>Subtotals:</b> $<span id="e2ccartsubtotal"></span></p>
       <p><b>Shipping & handling:</b> $<span id="e2ccartshipping">0.00</span></p>
       <p><b>Taxes:</b> $<span id="e2ccarttaxes">0.00</span></p>
       <div id="e2cdgt">
             <p><b>Discount:</b> $<span id="e2ccartdiscount">0.00</span></p>
             <p><b>Total:</b> $<span class="e2ccartgrandtotal" id="e2ccartgrandtotal">0.00</span></p>
        </div>
  </div>

If you want to allow entering a discount code, place this:

<input id="e2ccartdrate" type="text"  placeholder="Discount code (if any)"/>
<a href="javascript: e2c_apply_discount();"><span>apply discount</span></a>

Then, to show the cart items, place this DIV, it will be populated by Salmon:

<div class="cartinfo" id="e2ccart"></div>

Finally, place a pay button:

<button onclick="javascript: e2c_checkoutDoPayment();" type="button">Confirm order</button>

and a div for payment information once payment is made:

<div id="e2ccheckoutPMresult" style="display:none;"></div>

If you want to use Stripe as a payment method, you may place the DIV bellow into e2ccheckoutPMresult. If Stripe is selected as payment method, then it will trigger the Stripe API.

<div style="display:none;"> <button id="customButton">Pay with Stripe</button> </div>