[interchange-cvs] interchange - heins modified dist/foundation/include/checkout/new_browser_payment
interchange-core@icdevgroup.org
interchange-core@icdevgroup.org
Mon Apr 7 12:12:00 2003
User: heins
Date: 2003-04-07 16:10:07 GMT
Modified: dist/foundation/include/checkout new_browser_payment
Log:
* Add indication of which card we are reading when the user enters the card
type.
This responds to feedback that many customers are nonplussed when they
have no place to indicate which card type it is.
Only works on DOM-1 browsers.
Revision Changes Path
1.4 +124 -3 interchange/dist/foundation/include/checkout/new_browser_payment
rev 1.4, prev_rev 1.3
Index: new_browser_payment
===================================================================
RCS file: /var/cvs/interchange/dist/foundation/include/checkout/new_browser_payment,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -r1.3 -r1.4
--- new_browser_payment 19 Mar 2003 17:09:04 -0000 1.3
+++ new_browser_payment 7 Apr 2003 16:10:06 -0000 1.4
@@ -38,7 +38,7 @@
push @cc, 'disc' if $accepted =~ /discover/;
push @cc, 'amex' if $accepted =~ /amex/;
for (@cc) {
- push @out, qq{<IMG SRC="small$_.png">};
+ push @out, qq{<IMG id="img_$_" SRC="small$_.png">};
}
return join ' ', @out;
[/calc]
@@ -49,7 +49,128 @@
<b>[L]Card Number[/L]: </b>
</td>
<td colspan=2 class="contentbar1">
- <b><INPUT TYPE=text NAME=mv_credit_card_number SIZE=22></b>
+<script>
+ var cards = [ 'visa', 'mc', 'disc', 'amex' ];
+ var cardimg = new Array;
+ for( var i = 0; i < cards.length; i++) {
+ var el = document.getElementById('img_' + cards[i]);
+ if(el != undefined) {
+ cardimg[cards[i]] = el;
+ el.border = 0;
+ }
+ }
+
+ function highlight_card (num) {
+
+ var ti = document.getElementById('textindication');
+ ti.innerHTML = '';
+ var e;
+ for(e in cardimg) {
+ cardimg[e].border = 0;
+ }
+
+ var type;
+ var desc;
+
+ if(num == undefined)
+ return;
+
+ if(num.substr(0,1) == '4') {
+ type = 'visa';
+ desc = '(Visa)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,2) == '51' ||
+ num.substr(0,2) == '52' ||
+ num.substr(0,2) == '53' ||
+ num.substr(0,2) == '54' ||
+ num.substr(0,2) == '55'
+ )
+ {
+ type = 'mc';
+ desc = '(Mastercard)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,4) == '6011'
+ )
+ {
+ type = 'disc';
+ desc = '(Discover card)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,2) == '34' ||
+ num.substr(0,2) == '37'
+ )
+ {
+ type = 'amex';
+ desc = '(American Express card)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,2) == '36' ||
+ num.substr(0,2) == '30'
+ )
+ {
+ type = 'diners';
+ desc = '(Diners Club card)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,2) == '38'
+ )
+ {
+ type = 'carteblanche';
+ desc = '(Carte Blanche)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,1) == '2'
+ )
+ {
+ type = 'enroute';
+ desc = '(En Route)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,2) == '56'
+ )
+ {
+ type = 'bankcard';
+ desc = '(BankCard)';
+ }
+
+ if(
+ desc == undefined &&
+ num.substr(0,1) == '3' ||
+ num.substr(0,4) == '2131' ||
+ num.substr(0,4) == '1800'
+ )
+ {
+ type = 'jcb';
+ desc = '(JCB card)';
+ }
+
+ var el = cardimg[type];
+// alert("el is " + el);
+ if( el != undefined ) {
+ el.border = 2;
+ }
+ if( desc != undefined ) {
+ ti.innerHTML = desc;
+ }
+ }
+</script>
+ <b><INPUT TYPE=text NAME=mv_credit_card_number SIZE=22 onChange="highlight_card(this.value)"></b> <i id=textindication style="font-size: smaller"></i>
</td>
</tr>
[if variable MV_DEMO_MODE]
@@ -57,7 +178,7 @@
<td class=contentbar1>
</td>
<td colspan=2 class=contentbar1>
- ([L]test number[/L] <A HREF="javascript:void 0" onclick="checkout.mv_credit_card_number.value='4111 1111 1111 1111'; return false;">4111 1111 1111 1111</A>)
+ ([L]test number[/L] <A HREF="javascript:void 0" onclick="checkout.mv_credit_card_number.value='4111 1111 1111 1111'; highlight_card('4'); return false;">4111 1111 1111 1111</A>)
</td>
</tr>
[/if]