---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://pay.yandex.ru/docs/en/custom/web-sdk/reset-session.md
  - https://pay.yandex.ru/docs/ru/custom/web-sdk/reset-session.md
  - href: en/custom/web-sdk/reset-session.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://pay.yandex.ru/docs/en/llms.txt

# Recreating payment session and Yandex Pay buttons

Sometimes, you might need to recreate a payment session and payment buttons.
For example, the button might be shown in a dynamic block, and the session might need to be recreated when accessing a dynamic catalog.

In the process of recreation, active sessions and buttons are deleted before new ones are created.

## Deleting a payment session {#delete-payment-session}

When you delete a session, all the payment buttons related to this session are also deleted.

```javascript
Deleting a payment session and buttons
paymentSession.destroy();
```

## Deleting a payment button {#delete-payment-button}

```javascript
// Deleting a payment button on a specific DOM node
paymentSession.unmountButton(
    document.querySelector('<selector>')
);
```

## Example {#example}

<!-- source: en/custom/web-sdk/_snippets/reset-session--checkout.mdx -->
<!-- markdownlint-disable -->

<div class="ypd-preview ypd-preview_with-source">
    <a href="https://yastatic.net/s3/pay-static/docs/v16.0.0/custom/create-session--payment/index.html" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V3h-6c-.55 0-1 .45-1 1z"></path></svg>
    </a>
    <iframe src="https://yastatic.net/s3/pay-static/docs/v16.0.0/custom/create-session--payment/index.html" style="height: 120px"></iframe>
</div>

```javascript
function onYaPayLoad() {
    const YaPay = window.YaPay;

    // Payment details
    const paymentData = {
        // For debugging, you need to explicitly specify the `SANDBOX` environment.
        // For the production environment, you can omit this parameter or specify `PRODUCTION`.
        env: YaPay.PaymentEnv.Sandbox,

        // Version 2 points at paying via Yandex Pay
        // The user pays in the Yandex Pay form,
        // and only the result of the payment transfer is returned to the merchant
        version: 3,

        // Code of the currency in which you are going to accept payments
        currencyCode: YaPay.CurrencyCode.Rub,

        // Merchant ID received on registration in Yandex Pay
        merchantId: '<YOUR_MERCHANT_ID>',

        // IMPORTANT!
        // Paid order ID
        // If it's available, the payment form is shown
        //               rather than the checkout form
        orderId: 'order-id',

        // Details of the customer's cart (optional)
        cart: {
            // Items in the cart
            items: [
                {
                    productId: '1',
                    total: '26990.00',
                },
                {
                    productId: '3',
                    // If needed, specify the number of items
                    quantity: { count: 2 },
                    // Total for two items is (7990 * 2)
                    total: '15980.00',
                },
            ],
        },

        // Arbitrary additional data for the cart (optional)
        // After applying encodeURIComponent, the data couldn't be longer than 128 characters
        metadata: 'order-metadata',
    };

    // Payment success handler
    function onPaymentSuccess(event) {
        // Order placed successfully
        // show the order success screen to the user
        console.log(`OrderId — ${event.orderId}\nMetadata — ${event.metadata}`);
    }

    // Payment error handler
    function onPaymentError(event) {
        // Show a message that the payment method is unavailable at the moment
        // and suggest the user to try another method.
        console.log(`Payment error — ${event.reason}`);
    }

    // Payment cancellation handler
    function onPaymentAbort(event) {
        // The user closed the Yandex Pay form.
        // Suggest the user to try another payment method.
    }

    // Create a payment session
    YaPay.createSession(paymentData, {
        onSuccess: onPaymentSuccess,
        onAbort: onPaymentAbort,
        onError: onPaymentError,
    })
        .then(function (paymentSession) {
            // Show the Yandex Pay button on the page.
            paymentSession.mountButton(document.querySelector('#button_container'), {
                type: YaPay.ButtonType.Checkout,
                theme: YaPay.ButtonTheme.Black,
                width: YaPay.ButtonWidth.Auto,
            });
        })
        .catch(function (err) {
            // Couldn't create a payment session.
        });
}

```
<!-- endsource: en/custom/web-sdk/_snippets/reset-session--checkout.mdx -->