Привет, я пытаюсь интегрировать кнопку оплаты 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.info(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Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
Больше бреда...
@wsw мне просто нужно, чтобы цена передавалась сумме для полосы, но в зависимости от того, какую кнопку строки я выбираю



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


вы не должны использовать идентификатор для нескольких элементов, так как 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
});
}
пробую это сейчас, это имеет смысл с частью идентификатора, я забыл, что они должны быть уникальными
черт возьми, это сработало, я выложу здесь свою версию решения, большое спасибо, чувак !!!!
Можете подробнее рассказать о том, какие данные вы хотите передать в опции оформления заказа (stripe.com/docs/checkout#интеграция-простые-опции)? stripe.com/docs/checkout#интеграция-простые-опции описывает все доступные настраиваемые параметры, которые вы можете там сделать.