Question

Здравствуйте, я пытаюсь интегрировать кнопку оплаты Stripe в мою таблицу Datatables.net.

Есть ли способ передать определенные переменные из ячейки в API кнопки Stripe?

Мой текущий JavaScript

  window.onmousedown = function(){

    for (var i=0; i<orderHistory.length; i++){

        for (var k=0; k<orderHistory[i].length; k++){
      var PN =  (orderHistory[i][k].overall_usd_price * 100)
  
  var priceN = parseFloat(PN)

  console.log(PN)
  
  document.getElementById('card_class').addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'omega',
      description: 'Credit / Debit Card Payment',
      zipCode: true,
      amount: priceN
    });
    e.preventDefault();
  });
  
}
}
  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
    handler.close();
    
  })
  }

А ниже показано, как я создаю таблицы

window.onload = function(){

var items = [] 

var tableDiv = document.getElementById("clientorders"); 

var table = document.createElement('table');
table.setAttribute('id', 'datatable-buttons');
table.setAttribute('class', 'table table-flush');

var thead = document.createElement('thead');
var tbody= document.createElement('tbody');  
var tr = document.createElement('tr');

table.appendChild(thead);


//create header
thead.appendChild(tr);

var heading = [
    "Order Date",
    "Order Time",
    "Username", 
    "Email", 
    "Phone No.", 
    "Payment Type",
    "Order Summary",
    "Order Gross",
    "Order Cost",
    "Order Net",
    "Order Status",
    "Confirmed Date", 
    "Confirmed Time", 
    "Order Length",  
    "Confirmed Exp Date" , 
    "Confirmed Exp Time" , 
    "Order Remainder",
    "Order ID",

];

for (var col = 0; col<heading.length; col++)
{
  
  var th = 
document.createElement('th');

thead.appendChild(th); 
  th.appendChild(document.createTextNode(heading[col]));
  tr.appendChild(th);
}


// table content

table.appendChild(tbody);

for (var i=0; i<orderHistory.length; i++){

for (var k=0; k<orderHistory[i].length; k++){

    var tr = document.createElement('TR');  
        var td1 = document.createElement('TD');
        var td2 = document.createElement('TD');
        var td3 = document.createElement('TD');
        var td4 = document.createElement('TD');
        var td5 = document.createElement('TD');
        var td6 = document.createElement('TD');
        var td7 = document.createElement('TD');
        var td8 = document.createElement('TD');
        var td9 = document.createElement('TD');
        var td10 = document.createElement('TD');
        var td11 = document.createElement('TD');
        var td12 = document.createElement('TD');
        var td13 = document.createElement('TD');
        td13.setAttribute('class', 'text-center')
        var td14 = document.createElement('TD');
        var td15 = document.createElement('TD');
        var td16 = document.createElement('TD');
        var td17 = document.createElement('TD');
        var td18 = document.createElement('TD');

// if statements

var btchr = orderHistory[i][k].btc_hr
var btcpwr = orderHistory[i][k].btc_pwr
var btcpkglength = orderHistory[i][k].btc_pkg_length

var xmrhr = orderHistory[i][k].xmr_hr
var xmrpwr = orderHistory[i][k].xmr_pwr
var xmrpkglength = orderHistory[i][k].xmr_pkg_length

var ethhr = orderHistory[i][k].eth_hr
var ethpwr = orderHistory[i][k].eth_pwr
var ethpkglength = orderHistory[i][k].eth_pkg_length

var ltchr = orderHistory[i][k].ltc_hr
var ltcpwr = orderHistory[i][k].ltc_pwr
var ltcpkglength = orderHistory[i][k].ltc_pkg_length

var zechr = orderHistory[i][k].zec_hr
var zecpwr = orderHistory[i][k].zec_pwr
var zecpkglength = orderHistory[i][k].zec_pkg_length


        if (btcpkglength != null){
            btcpkglength = btcpkglength + " days"
        }
        if (btcpkglength == null){
            btcpkglength = " "
        }

        if (xmrpkglength != null){
            xmrpkglength = xmrpkglength + " days"
        }
        if (xmrpkglength == null){
            xmrpkglength = " "
        }

        if (ethpkglength != null){
            ethpkglength = ethpkglength + " days"
        }
        if (ethpkglength == null){
            ethpkglength = " "
        }

        if (ltcpkglength != null){
            ltcpkglength = ltcpkglength + " days"
        }
        if (ltcpkglength == null){
            ltcpkglength = " "
        }

        if (zecpkglength != null){
            zecpkglength = zecpkglength + " days"
        }
        if (zecpkglength == null){
            zecpkglength = " "
        }


        if (btchr != null){
            btchr = btchr + " TH/s for BTC @ " + btcpwr + "w power consumption"
        }
        if (btchr == null){
            btchr = " "
        }

        if (xmrhr != null){
            xmrhr = xmrhr + " h/s for XMR @ " + xmrpwr + "w power consumption"
        }
        if (xmrhr == null){
            xmrhr = " "
        }

        if (ethhr != null){
            ethhr = ethhr + " MH/s for ETH @ " + ethpwr + "w power consumption"
        }
        if (ethhr == null){
            ethhr = " "
        }

        if (ltchr != null){
            ltchr = ltchr + " MH/s for LTC @ " + ltcpwr + "w power consumption"
        }
        if (ltchr == null){
            ltchr = " "
        }

        if (zechr != null){
            zechr = zechr + " Sol/s for ZEC @ " + zecpwr + "w power consumption"
        }
        if (zechr == null){
            zechr = " "
        }     



        var today = moment();
        var orderdateexp = moment('4/24/2019')

    // ecmascript 6 version of summary
    var hr = (btchr + xmrhr + ethhr + ltchr + zechr);
    var length = (btcpkglength + xmrpkglength + ethpkglength + ltcpkglength + zecpkglength);
    //    var remainder = orderHistory[i][k].order_confirm_exp_date_time.diff(today, 'days')
    var ordercost = '$300.00'

    var date = '04-28-2022'; // Month/day/year
    var time = '19:28';
    var order_confirm_exp_date_time=(moment(date, 'MM-DD-YYYY').format('MMMM D'))
    var remainder = (orderdateexp.diff(today, 'days') + ' days')


  

    // table variables


    var price = ('$' + orderHistory[i][k].overall_usd_price + '.00')


    var priceU = parseInt(price.replace(/\$|,/g, ''))
    var ordercostU = parseInt(ordercost.replace(/\$|,/g, ''))

    var ordernet = '$' + ((priceU - ordercostU)).toFixed(2)

    var priceNumber = (orderHistory[i][k].overall_usd_price + .00)

    var status = orderHistory[i][k].status


    var paymentID = orderHistory[i][k].payment_id;

    var paymentMethod = orderHistory[i][k].paymentMethod;

    var statusbtn = document.createElement('span');

    if (orderHistory[i][k].paymentMethod === 'card' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Credit / Debit Card'
        method = paymentMethod
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Cryptocurrency Transfer'
        method = paymentMethod
        }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';;
        statusbtn.setAttribute('class', 'confirmed');
        var method = 'Wire Transfer ID ' + paymentID
    }
    
    if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' & orderHistory[i][k].status === false) {
        var paymentMethod = 'Crypto'
        var method = paymentMethod
        var statusbtn =document.createElement("button");
    
        statusbtn.setAttribute("onclick", "location.href='/crypto'");
        statusbtn.setAttribute("id", "crypto_class");
        statusbtn.setAttribute("href", "/crypto");
        statusbtn.setAttribute('class', 'btn');
        statusbtn.appendChild(document.createTextNode("Pay with Crypto"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === false) {
        statusbtn.setAttribute('class', 'unconfirmed');
        var method = 'Wire Transfer ID ' + paymentID
        statusbtn.innerHTML = 'Unconfirmed';
    }



        
        td1.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[0]));
        td2.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[1].split('.')[0]));
        td3.appendChild(document.createTextNode(user[i].username));
        td4.appendChild(document.createTextNode(user[i].email));
        td5.appendChild(document.createTextNode(user[i].tel));
        td6.appendChild(document.createTextNode(method));
        td7.appendChild(document.createTextNode(hr));
        td8.appendChild(document.createTextNode(price));
        td9.appendChild(document.createTextNode(ordercost));
        td10.appendChild(document.createTextNode(ordernet));
        td11.appendChild(statusbtn);
        // td12.appendChild(document.createTextNode(order_confirm_date_time))
        //td12.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[0]));
        //td13.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[1].split('.')[0]));
        td14.appendChild(document.createTextNode(length));
        //td15.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[0]));
        //td16.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[1].split('.')[0]));
        td17.appendChild(document.createTextNode(remainder));
        td18.appendChild(document.createTextNode(orderHistory[i][k]._id));




        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        tr.appendChild(td7);
        tr.appendChild(td8);
        tr.appendChild(td9);
        tr.appendChild(td10);
        tr.appendChild(td11);
        tr.appendChild(td12);
        tr.appendChild(td13);
        tr.appendChild(td14);
        tr.appendChild(td15);
        tr.appendChild(td16);
        tr.appendChild(td17);
        tr.appendChild(td18);


        tbody.appendChild(tr);

    }
}




tableDiv.appendChild(table)

}

                h3.mb-0 All Orders
                p.text-sm.mb-0
                  | This is a data log of all omega orders. This includes the date of order, expiration, cryptocurrency, hashrate, cost, payment options.
              .table-responsive.py-4#clientorders

Больше тарабарщины ...

scott6 · Answer 1 · 18 марта 2019

вы не должны использовать id для нескольких элементов, так как getElementById получит только первый найденный элемент, используйте вместо него класс или вы можете связать событие onclick после создания элемента кнопки

Поэтому попробуйте изменить это

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }

в

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        // statusbtn.setAttribute("id", "card_class"); // -> remove this
        statusbtn.setAttribute('class', ' card_class btn btn-warning');
        statusbtn.setAttribute('data-customdata', 'some-data'); // -> you can pass your data by using element data attribute (with data- prefix)
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
        // bind onclick event
        statusbtn.addEventListener('click', function(e) {
           e.preventDefault();
           // get your data using dataset (your 'customdata' will be available as datasets property ) like this :
           var data = this.datasets.customdata;
           // do other task here 
        });
    }

Datatables.net + Stripe?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Datatables.net + Stripe?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы