# Payment Dialog

There are two versions of it for now, one including the Badger button `<PaymentDialog />` and the other depends on the internal payment system `<PaymentDialogNew />` which is the one used for now.

Both are designed as a popup window, with the plan to make a separated payment page in the near future.&#x20;

The component communicates with the back-end server to supply the user choices regarding the subscription type and payment method and amount of payment ""in the one time payment subscription" . that is done using `fetch`  as shown in the snippet&#x20;

```javascript
fetch("/api/paytokens",
    {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: "POST",
      body: JSON.stringify({"amount": amount, "method": method})
    }).then(res => console.log(res)) 
```
