Monitor failed payments for your JavaScript application

These days, many JavaScript applications are served via a subscription model where users pay a monthly or yearly fee to use the application. These applications are called SaaS or Software as a Service application. In these applications, users are usually charged a recurring monthly or yearly fee, or in some cases, a pay-as-you-go model where they are charged depending on their usage of the said JavaScript application.

In either of these models, a common issue that the developers of the JavaScript application usually face is when a user's payment fails. These commonly occur when the user's credit card information is invalid, when the user's credit card has expired, or when the user's credit card has been declined by the bank. In addition, in some cases, users use one-time credit cards only valid for a single payment and not recurring payments.

Whether the payment failure is intentional or unintentional, it can cause significant issues for the JavaScript application and the user. For example, if the user is heavily dependent on the application and their payment fails, they may not be able to use it. As a result, they may be forced to cancel their subscription, commonly called churn. In addition, if the payment failure is unintentional, the user may not be aware of the issue and may not be able to use the application until they resolve it.

Therefore, tracking and monitoring failed payments in your JavaScript application is essential to ensure that the user is aware of the issue and can resolve it before it causes any significant problems. Fortunately, here at LogSnag, we have created a powerful solution for this problem. LogSnag is a powerful, real-time event tracking tool that works seamlessly with any JavaScript application. With LogSnag, you can set up event tracking for anything you want and track when a user's payment fails in your JavaScript application in real time. You may also set up optional rules to notify you and your team when a user's payment fails.

LogSnag also allows you to track user journeys and create a timeline of their actions to monitor the users' payment history and any other activity they have done in your application. This way, you can always track the activity of a specific user, such as when their payment fails and any other activity they have done in your application.

Connect LogSnag to JavaScript

Setting up LogSnag

Sign up for a free LogSnag account.
Create your first project from the dashboard.
Head to settings and copy your API token.

JavaScript code snippets

Use the following code snippet to connect LogSnag to your JavaScript application. Please don't forget to replace the YOUR_API_TOKEN with your API token and update the project and channel names.

Using JavaScript with Fetch

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_API_TOKEN");

var raw = JSON.stringify({
  "project": "my-saas",
  "channel": "billing",
  "event": "Payment Failed",
  "description": "A 19.99$ payment failed for john@example.com",
  "icon": "💳",
  "notify": true
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://api.logsnag.com/v1/log", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Using JavaScript with jQuery

var settings = {
  "url": "https://api.logsnag.com/v1/log",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_TOKEN"
  },
  "data": JSON.stringify({
    "project": "my-saas",
    "channel": "billing",
    "event": "Payment Failed",
    "description": "A 19.99$ payment failed for john@example.com",
    "icon": "💳",
    "notify": true
  }),
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

Using JavaScript with XHR

// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
  "project": "my-saas",
  "channel": "billing",
  "event": "Payment Failed",
  "description": "A 19.99$ payment failed for john@example.com",
  "icon": "💳",
  "notify": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://api.logsnag.com/v1/log");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_TOKEN");

xhr.send(data);

JavaScript integration details

We strongly believe that event tracking should be simple and accessible to every developer and team. Hence, we have worked hard to create the next generation of event tracking tools.

LogSnag provides powerful features such as cross-platform push notifications, event filtering, user and product journeys, charts, insights, and more. In addition, LogSnag is flexible and easy to use, making it a great companion for your JavaScript applications.

LogSnag provides a generous free plan to get you started with event tracking. You can also check out our pricing page to see our paid plans. So don't hesitate to give us a try and let us know what you think!

Other use-cases for LogSnag

View all common use-cases with JavaScript

Setting up LogSnag

JavaScript code snippets

JavaScript integration details

Other use-cases for LogSnag

Posted by

Content