Customizing Your Nanacast Secure Checkout Page
Login to Nanacast. Click Manage > Memberships, select the Edit Pricing & Delivery page of your offer. It must be an offer where Credit Card has been selected as the payment method in Payment Processor Settings. Expand the Secure Checkout Page Settings section. Within the section you'll see a “Customize Credit Card Order Page” check box. Check the box and scroll down. Next, within the Order Page HTML box, create your html hierarchy. Just the basics will do fine.
If you don't know how to structure html, click here: http://www.ironspider.ca/basic_html/structure.htm
With your structure in place, add in the {credit_card_order_form} snippet between the element you designated to contain your form.
It should look something like so:
<html>
<body>
<div>{credit_card_order_form} </div>
</body>
</html>
Wherever the {credit_card_order_form} snippet is, so will be the position of your form.
Now that we have the basic structure in place, if you click on the Create Button link from your offer's Overview menu, you'll see that one of the choices is the Get Plain Checkout URL button. (Assuming you have an offer that meets the criteria by having Credit Card selected as the payment method.)
Copy and paste the resulting Plain Checkout URL into a new browser or window tab. This will reveal your secure checkout form. In your other browser window/tab, you can return to the Edit Pricing & Delivery page of your offer and continue modifying the CSS within the Order Page HTML box, ABOVE our html structure. For example:
<style>
CSS code goes here
</style>
<html>
<body>
<div>{credit_card_order_form} </div>
</body>
</html>
Some examples of the tags and classes you can use: **HINT** The !important; CSS modifier is useful for overriding existing inline CSS.
#termsA{ //This id changes the blue “I agree to the terms and conditions” text }
#layoutDIV1table1TR1td1TABLE1tr1TD1table1{ //this selects the header image (if one Is present) }
#ccDIV1{//this selects the body of the form }
#cardCode{ //this selects the security code field by itself}
#fformHTMLdiv1Form1table1{ //another inner form element }
#formHTMLdiv1Form1table1TR6td1 input{ //this selects all of the text-boxes}
#formHTMLdiv1Form1table1TR1td1 select{ //this selects all of the drop down menus }
#formHTMLdiv1Form1table1TR1td1 select option{ //this selects of the drop down items in the drop down menu}
#formHTMLdiv1Form1table1TR6td1 input{//this selects the “order now” button element}
#primary__gray_2a9e6441473b{//this selects the item and total text element}
#credit_card_div{ //this selects the element that houses the credit card fields (including “security code”) }
#u_cc_number{ this selects the credit card form by itself }
There are many more CSS ID's at your disposal, use Firefox’s “firebug” app, or use Google Chrome's “inspect element” tools to find them.
Here is a cool template you can use on your own form using these same concepts, just copy and paste the code:
<html>
<style>
#termsA{
margin-top:5px;
}
#layoutDIV1table1TR1td1TABLE1tr1TD1table1{
visibility:hidden; height:0px;
background:none transparent !important;
}
#outwrap{
padding:20px;
-moz-border-radius: 5px;
border-radius: 5px;
width:550px;
background:#d3d3d3;
border:2px gray solid !important;
-moz-box-shadow: 0px 0px 12px 0.1px #333333; -webkit-box-shadow:0px 0px 12px 0.1px #333333; box-shadow: 0px 0px 12px 0.1px #333333;
margin:auto;
background:#e6e8e8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e8e8), to(#b5babb));
background-image: -webkit-linear-gradient(top, #e6e8e8, #b5babb);
background-image: -moz-linear-gradient(top, #e6e8e8, #b5babb);
background-image: -ms-linear-gradient(top, #e6e8e8, #b5babb);
background-image: -o-linear-gradient(top, #e6e8e8, #b5babb);
background-image: linear-gradient(top, #e6e8e8, #b5babb); /* standard, but currently unimplemented */
}
#cardCode{
margin:right:3px;
}
#ccDIV1{
margin:auto;
width:600px;
text-align:center;
}
#title{
font-size:3.5em;
text-align:center;
font-family:Impact, Tahoma, Arial;
color:#c72c05;
font-weight:lighter;
text-shadow: 0px 0px 2px white, 1px 1px 3px black;
}
#formHTMLdiv1Form1table1{
margin:auto;
}
#formHTMLdiv1Form1table1TR6td1 input{
margin-left:-40px;
}
#formHTMLdiv1Form1table1TR1td1 input:not(#terms){
height:30px;
width:200px !important;
position:relative;
top:-10px;
margin-top:20px;
background:#f2f2f2;
font-family:Arial,Tahoma;
padding:3px;
font-size:1.7em;
border:2px solid #c0c0c0;
border-top:2px solid #999999;
border-bottom:2px solid #dbdbdb;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
color:#4f4f4f;
}
#formHTMLdiv1Form1table1TR1td1 input:not(#terms):focus{
background:#fefae0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border:2px solid #ffe479;
border-top:2px solid #ffe479;
border-bottom:2px solid #ffe479;
}
#formHTMLdiv1Form1table1TR1td1 select{
height:25px;
width:200px;
border:2px solid #c0c0c0;
border-top:2px solid #999999;
border-bottom:2px solid #dbdbdb;
font-size:1.3em;
background:#f2f2f2;
margin-top:10px;
padding:0px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Arial,Tahoma;
margin-right:15px;
}
#formHTMLdiv1Form1table1TR1td1 select:hover{
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border:2px solid #ffe479;
}
#formHTMLdiv1Form1table1TR1td1 select option{
-moz-border-radius: 3px;
border-radius: 3px;
background:#f2f2f2;
font-family:Arial,Tahoma;
}
#credit_card_div{
font-size:0.8em;
font-weight:normal;
}
#u_cc_number{
margin-left:15px;
}
</style>
<body>
<div id="outwrap"><div id="title">Marvel at my Title</div>
{credit_card_order_form}
</div>
</body>
</html>
|
