Skip to content

Ton Connect UI, gives an error when making a payment #328

Open
@adminvl-it

Description

@adminvl-it

Your Question

Second day struggling with the error until it is solved ))
I connect tonkeeper wallet, also tried vallet, when paying, the error is the same there and there.

Context

To begin with, the wallet is authorized via the Connect UI, and only then the payment transaction is carried out through the linked wallet. Wallet authorization went well, there are no special problems, everything is simple.

After authorization, click the pay button, the received data goes through js.
I tried the payment on the keeper, connected the keeper's wallet, clicked the pay button, a transaction appeared in the keeper, but with an error (User has already opened the previous request).

And in the console on the website, I got this error.
****[TON_CONNECT_SDK_ERROR] B: User rejects the action in the wallet. User has already opened the previous request

What happens to me when I click on the pay button.

<a href="#" title="Pay for subscription" style='display:none' class="tza buy" id='payment-button'>Pay</a>

The data from the controller comes like this, there seems to be no error:
Image

`$(document).on('click', 'a.tza', function(e) {
e.preventDefault();
let id = $(this).attr("data-id");
let axresult = $(this).siblings('.ax-result');
let $this = $(this);

$this.prop('disabled', true);

$(axresult, '.ax-result').removeClass('validdone validerror').html('');

let formData = new FormData();
formData.append('id', id);

App.sendAx('/ax/pool/buy', formData, {
silence: true,

successFunction: function(d) {
  axresult.removeClass('validdone validerror').addClass('validdone').html(d.message);

  if (!d.transaction) {
    axresult.removeClass('validdone').addClass('validerror').html(
      'Ошибка: данные для транзакции отсутствуют');
    $this.prop('disabled', false);
    return;
  }

  window.transactionData = {
    validUntil: Math.floor(Date.now() / 1000) + 60,
    messages: [{
      address: d.transaction.recipient,
      amount: d.transaction.amount,
      payload: d.transaction.payload 
    }]
  };


  if (!tonConnectUI.connected) {
    axresult.html('Пожалуйста, подключите кошелёк, чтобы продолжить оплату.');
    tonConnectButton.show();

    tonConnectUI.onStatusChange(wallet => {
      console.log('Статус кошелька:', wallet); 
      if (wallet) {

        axresult.html('Кошелёк подключён, выполняем оплату...');
        sendTransaction(id, axresult, $this); 
      }
    });
  } else {

    axresult.html('Кошелёк уже подключён, выполняем оплату...');
    sendTransaction(id, axresult, $this); 
  }
},
errorFunction: function(d) {
  axresult.removeClass('validdone validerror').addClass('validerror').html(d.message);
  $this.prop('disabled', false);
}

});
});`

The second function, which sends and checks for errors, and sends to the controller, if everything is ok, it checks and writes to the table that the payment has passed.

`function sendTransaction(id, axresult, $button) {
tonConnectUI.sendTransaction(window.transactionData)
.then((result) => {
axresult.html('Оплата успешно выполнена, подтверждаем...');

  let confirmData = new FormData();
  confirmData.append('transaction_hash', result.boc); 
  confirmData.append('pool_id', id);

  App.sendAx('/ax/pool/confirm_payment', confirmData, {
    silence: true,
    successFunction: function(confirmResponse) {
      axresult.removeClass('validdone validerror').addClass('validdone').html(confirmResponse.message);
    },
    errorFunction: function(confirmResponse) {
      axresult.removeClass('validdone validerror').addClass('validerror').html(confirmResponse.message);
    }
  });
})
.catch((error) => {
  console.error('Ошибка TonConnect UI:', error);
  axresult.removeClass('validdone').addClass('validerror').html('Ошибка оплаты: ' + error.message);
  $button.prop('disabled', false); 

  if (error.message.includes("User has already opened the previous request")) {
    axresult.html('Ошибка: в кошельке остался незакрытый запрос. Пожалуйста, переподключите кошелёк.');
    tonConnectUI.disconnect().then(() => {
      axresult.html('Кошелёк отключён. Пожалуйста, подключите его заново.');
      tonConnectButton.show();
    });
  }
})
.finally(() => {
  $button.prop('disabled', false); 
});

}`

Connecting the script and button processing

<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>

`
const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
manifestUrl: 'https://----------.com/tonconnect-manifest.json'
});

const connectButton = document.getElementById('custom-connect-button');
const paymentButton = document.getElementById('payment-button');

function updateButtonState(wallet) {
if (wallet) {
connectButton.textContent = 'Отключить кошелек';
paymentButton.style.display = 'flex';
} else {
connectButton.textContent = 'Подключить кошелек';
paymentButton.style.display = 'none';
}
}

updateButtonState(tonConnectUI.wallet);

connectButton.addEventListener('click', async () => {
const wallet = tonConnectUI.wallet;
if (wallet) {
await tonConnectUI.disconnect();
} else {
await tonConnectUI.connectWallet();
}
});

tonConnectUI.onStatusChange((wallet) => {
updateButtonState(wallet);
});`

What have you tried so far?

No response

Relevant Code or Commands

No response

Documentation Check

  • Yes, I have checked the documentation.

Metadata

Metadata

Assignees

Labels

questionFurther information is requested

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions