Extract and send referral code from Telegram bot start parameter to Laravel backend using JavaScript

Other Questions Telegram bot
1

I’m building a Telegram miniapp with a referral system. I’ve set up authentication and other features, but I’m stuck on getting the referral code from the bot’s start parameter.

Here’s what I’m trying to do:

  1. Extract the referral code from a link like t.me/my_bot?start=RefC0d3
  2. Send this code to my Laravel backend

I’ve attempted various methods, but none have worked so far. Here’s a simplified version of my current JavaScript code:

const tgApp = await loadTelegramSdk();
if (tgApp) {
  const { id, first_name, username, start_param } = tgApp.initDataUnsafe;
  
  const requestBody = {
    ...tgApp.initDataUnsafe,
    referral_code: start_param
  };

  const response = await fetch('/authenticate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(requestBody)
  });

  // Handle response...
}

In my Laravel controller, I’ve used Log::info('Request Input:', $request->all()); to check the inputs, but the referral code isn’t being sent.

Can anyone help me figure out why the referral code isn’t being passed to the backend? Thanks!

2

I’ve dealt with a similar issue when building a Telegram miniapp. The problem you’re facing is likely because the start_param isn’t available in initDataUnsafe for miniapps.

Instead, try using the Telegram WebApp API’s Telegram.WebApp.initDataUnsafe.start_param. Here’s how you can modify your code:

const tgApp = window.Telegram.WebApp;
if (tgApp) {
  const { id, first_name, username } = tgApp.initDataUnsafe;
  const start_param = tgApp.initDataUnsafe.start_param;
  
  const requestBody = {
    id,
    first_name,
    username,
    referral_code: start_param
  };

  // Rest of your code...
}

This should correctly extract the referral code and send it to your Laravel backend. Make sure your backend is set up to receive and process this parameter. Also, remember to validate the data on the server-side for security reasons.

Hope this helps! Let me know if you encounter any other issues.

3

hey mate, have u tried using the Telegram.WebApp.initData instead? It’s a string with all the params, including start_param. You can parse it like this:

const initData = new URLSearchParams(Telegram.WebApp.initData);
const referralCode = initData.get(‘start_param’);

Then send referralCode to ur backend. hope this helps!

4

I encountered a similar challenge when working on a Telegram miniapp project. One approach that worked for me was utilizing the Telegram.WebApp.startParam property. This directly provides the start parameter value without needing to parse the entire initData string.

Here’s a code snippet that might help:

const tgApp = window.Telegram.WebApp;
if (tgApp) {
  const referralCode = tgApp.startParam;
  
  const requestBody = {
    // other user data
    referral_code: referralCode
  };

  // Your fetch request here
}

This method is straightforward and doesn’t require any additional parsing. Just ensure your Laravel backend is set up to handle this parameter correctly. Also, remember to implement proper security measures on the server-side to validate the incoming data.