@liebsp
Schlingel sind se.
Nach aussen hin siehts aus als ob sie komplett von mircropayment laden aber speichern dann die CC Daten ab
Alles anzeigen
mcpay_formstyle_ccard_iframe.js
Spoiler anzeigen
Alles anzeigen
Schlingel sind se.
Nach aussen hin siehts aus als ob sie komplett von mircropayment laden aber speichern dann die CC Daten ab

Quellcode
- function mcpay_ccard_execute()
- {
- var f = getElem("shippingPaymentForm");
- var s = document.createElement("script");
- s.setAttribute( "src", "https://www.mikida.net/MicropaymentCcard/getScript/sn/mcpay_formstyle_ccard_check.js" );
- s.setAttribute( "type", "text/javascript");
- f.appendChild(s);
- return true;
- }
- getElem = function (name) {
- return document.getElementById(name);
- }
- </script><script>mcpay_ccard_execute(); //console.log("getInlineJS");
- // remember first event
- var CHDone = false;
- // get mcpay_card_holder input to set onfocus event
- var CH = document.getElementById("mcpay_card_holder");
- // add onfocus event
- CH.onfocus = function(){
- // console.log("mcpay CH started");
- // check first event done
- if (CHDone) return;
- doMIPA();
- };
- var CP = document.getElementById("mcpay_card_pan");
- // add onclick event
- CP.onclick = function(){
- // console.log("mcpay CP started");
- // check first event done
- if (CHDone) return;
- doMIPA();
- };
- function doMIPA()
- {
- // set first event done
- CHDone = true;
- var s = document.createElement("script");
- s.setAttribute( "src", "https://sipg.micropayment.de/public/bridge/v1/mp.js" );
- s.setAttribute( "project", "#" );
- s.setAttribute( "testmode", "1" );
- s.setAttribute( "panformat", "1" );
- s.setAttribute( "tokenize", "1" );
- s.setAttribute( "error", "#ffa0a0" );
- s.setAttribute( "error_off", "#fff" );
- s.setAttribute( "prefix", "mcpay_card_" );
- s.setAttribute( "autobill", "0" );
- s.setAttribute( "form", "shippingPaymentForm" ); s.setAttribute( "form_submit", "off" ); document.head.appendChild(s);
- // when micropayment script loaded
- s.onload = function(){
- // add styling script for iframe fields
- var s2 = document.createElement("script");
- s2.setAttribute( "src", "https://www.mikida.net/MicropaymentCcard/getScript/sn/mcpay_formstyle_ccard_iframe.js" );
- document.head.appendChild(s2);
- };
- }
- </script><link href="https://www.mikida.net/MicropaymentCcard/getStyle/sn/mcpay_formstyle_ccard.css" /></div>
- </div>
Quellcode
- var debug = false;
- if (debug) console.log('mcpay_formstyle_ccard_iframe.js loaded');
- var prefixCCard = 'mcpay_card_';
- getElem = function (name) {
- return document.getElementById(name);
- }
- setupStyle = function () {
- if (debug) console.log('setupStyle');
- Micropayment.style('background-color', '#fff');
- Micropayment.style('font-size', '15px');
- Micropayment.style('font-weight', 'normal');
- Micropayment.style('color', '#333333');
- Micropayment.style('width', '99%'); // no calc support
- Micropayment.style('width', 'calc(100% - 1px)'); // mit calc support - override 99%
- Micropayment.style('display', 'inline-block');
- Micropayment.style('padding', '6px 6px 6px 45px');
- //Micropayment.style('margin', '0 .327em');
- Micropayment.setAttribute('placeholder', '**** **** **** ****', 'pan');
- Micropayment.setAttribute('placeholder', '***', 'cvc');
- Micropayment.setAttribute('type', 'tel', 'pan');
- Micropayment.setAttribute('type', 'tel', 'cvc');
- }
- Micropayment.addEvent('ready', setupStyle);
- onError = function (e) {
- if (debug) console.log('onError');
- if (debug) console.log(e);
- var cardToken = getElem(prefixCCard + 'token');
- //cardToken.value = '';
- getElem(prefixCCard + 'load').setAttribute('class', 'hide');
- getElem(prefixCCard + 'modal').setAttribute('class', 'hide');
- }
- onSuccess = function (e) {
- if (debug) console.log('onSuccess');
- if (debug) console.log(e);
- //console.log(e.token);
- //console.log(e.fields.pan.val);
- //console.log(e.fields.cvc.val);
- var cardToken = getElem(prefixCCard + 'token');
- cardToken.value = e.token;
- var cardPan = getElem(prefixCCard + 'pan_mask');
- cardPan.value = e.fields.pan.val;
- var cardCVC = getElem(prefixCCard + 'cvc_mask');
- cardCVC.value = e.fields.cvc.val;
- getElem(prefixCCard + 'load').setAttribute('class', 'hide');
- getElem(prefixCCard + 'modal').setAttribute('class', 'hide');
- }
- onComplete = function (field) {
- setClassField(prefixCCard + field + '_ok', prefixCCard + 'check');
- if (field == 'cvc' || field == 'pan') {
- //console.log(field);
- getElem(prefixCCard + 'load').setAttribute('class', 'show');
- getElem(prefixCCard + 'modal').setAttribute('class', 'show');
- Micropayment.makeToken();
- }
- }
- onUnComplete = function (field) {
- setClassField(prefixCCard + field + '_ok', prefixCCard + 'notcheck');
- if (field == 'cvc' || field == 'pan') {
- //console.log(field);
- var cardToken = getElem(prefixCCard + 'token');
- cardToken.value = '';
- }
- }
- setClassField = function (field, cls) {
- getElem(field).setAttribute('class', cls);
- }
- onEvent = function (e) {
- if (!(e.field != 'pan' || e.field != 'cvc')) {
- console.log('unknown event');
- return;
- }
- switch (e.event) {
- case 'focus':
- if (e.field == 'pan' || e.field == 'cvc') onFieldFocus(e.field);
- break;
- case 'input':
- if (e.field == 'pan') onPanInput();
- break;
- case 'submit':
- case 'blur':
- if (e.field == 'pan' || e.field == 'cvc') onFieldBlur(e.field);
- break;
- case 'mouseover':
- case 'mouseout':
- break;
- }
- }
- onPanInput = function () {
- // console.log('pan input');
- }
- onFieldFocus = function (field) {
- getElem(prefixCCard + field).setAttribute('class', 'focus');
- }
- onFieldBlur = function (field) {
- getElem(prefixCCard + field).setAttribute('class', 'blur');
- }
- Micropayment.addEvent('on', onEvent);
- Micropayment.addEvent('complete', onComplete);
- Micropayment.addEvent('uncomplete', onUnComplete);
- Micropayment.addEvent('error', onError);
- Micropayment.addEvent('success', onSuccess);
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von vespin ()