Введение

Многим предпринимателям процесс оплаты кажется величайшим испытанием на терпение. Как только вы думаете, что наконец-то распутали все это, всплывает еще один уровень сложностей, напоминая вам, что гладкое плавание все еще остается далекой мечтой.

Вы чувствуете то же самое? Lemon Squeezy — это ваш аспирин!
Это волшебное платежное зелье упрощает все, так что вы можете отказаться от драмы с платежами и сосредоточиться на интересных вещах. Больше никаких искажений кода не требуется. Это похоже на то, что в вашей команде есть платежный единорог.

Почему LemonSqueezy?

Ну, представьте себе, что вы управляете своим SaaS-бизнесом, не нуждаясь в докторской степени в области налогового законодательства или бесконечных запасах аспирина для решения головных болей с платежами. LemonSqueezy оптимизирует все: от платежей и подписок до глобального соблюдения налогового законодательства и предотвращения мошенничества.

Кроме того, он поддерживает мультивалютность и витрину, готовую для всех видов цифровых продуктов. Это как иметь технически подкованного делового партнера, который берет на себя все скучные дела, а вы можете сосредоточиться на том, что у вас получается лучше всего — на творчестве! Идеально подходит для создателей цифровых технологий, предпринимателей и всех, кто предпочитает нажимать кнопки, а не программировать решения.

Настройка проекта

Прежде чем мы углубимся, я просто хочу сказать, что вы можете найти полный код в моем репозитории GitHub и посмотреть демо-версию в моем Instagram. Теперь об этом проекте на GitHub — у него есть два варианта оплаты: первый — классический единовременный платеж; во-вторых, модная модель подписки.

Но в этом уроке мы пойдем ва-банк на единовременную оплату. Да, и в качестве примера я использую ежемесячную услугу по уборке дома. Это может звучать немного абсурдно, но эй, это все часть нашей тренировки по программированию! ?

1. Настройка LemonSqueezy

Чтобы начать работу, вам необходимо создать магазин в Lemon Squeezy, а также несколько продуктов и вариантов.

Убедитесь, что у вас включен тестовый режим. При публикации магазина он выключится; проверьте нижний левый угол.

Вот как выглядит мой продукт

Далее давайте сгенерируем ключ API по адресу https://app.lemonsqueezy.com/settings/api для подключения к нашему магазину:

Добавьте это как переменную среды в свой проект Next.js:

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. Настройте обработчик маршрута

Затем создайте маршрут API для обработки процессов оплаты. В этой части конечный результат, который мы хотим, — это получить checkoutUrl, который мы позже передадим в раздел Frontend.

export const dynamic = "force-dynamic";

export async function POST(req: NextRequest) {
  try {

    const reqData = await req.json();

    if (!reqData.productId) {
      console.error("Product ID is missing");
      return NextResponse.json({ message: "Product ID is required" }, { status: 400 });
    }


    const response = await lemonSqueezyApiInstance.post("/checkouts", {
      data: {
        type: "checkouts",
        attributes: {
          checkout_data: {
            custom: {
              user_id: "123",
            },
          },
        },
        relationships: {
          store: {
            data: {
              type: "stores",
              id: process.env.LEMON_SQUEEZY_STORE_ID?.toString(),
            },
          },
          variant: {
            data: {
              type: "variants",
              id: reqData.productId.toString(),
            },
          },
        },
      },
    });

    const checkoutUrl = response.data.data.attributes.url;
    console.log(response.data);
    return NextResponse.json({ checkoutUrl });
  } catch (error) {
    console.error("Error in POST /api/lemonsqueezy:", error);
    return NextResponse.json({ message: "An error occured" }, { status: 500 });
  }
}

Вот простое объяснение этого кода:

• сначала мы гарантируем, что страница всегда будет динамически отображаться, что важно для данных в реальном времени, с помощью команды Export const Dynamic = "force-dynamic";
• Определите асинхронную функцию, которая обрабатывает запросы POST к этому маршруту API. Функция сначала проверяет, предоставлен ли идентификатор продукта. В противном случае возвращается сообщение об ошибке.
• Затем мы выполняем вызов API к Lemonsqueezy, чтобы создать новый сеанс оформления заказа, включая такие данные, как идентификатор магазина и вариант продукта.
• Чтобы получить идентификатор магазина, перейдите в настройки этого

• После вызова API он извлекает URL-адрес оформления заказа из ответа:

const checkoutUrl = response.data.data.attributes.url;

• Наконец, в ответе возвращается этот URL:

return NextResponse.json({ checkoutUrl });

Чтобы убедиться, что наш API работает правильно, нам необходимо его протестировать. Для этого я использую инструмент Postman. Прежде чем мы начнем, нам нужен идентификатор варианта нашего продукта. Вы можете найти его на своей панели управления LemonSqueezy.

Если все работает правильно, вы должны получить ответ, включающий checkoutUrl

3. Создание пользовательского интерфейса и вызов данных элемента

Теперь, когда мы заложили основу, наш следующий шаг — улучшить внешний вид внешнего интерфейса. Я большой поклонник TailwindCSS, поэтому вместе с ними делаю ценовую карту

код доступен здесь

Далее давайте настроим асинхронную функцию, которая вызывает только что созданный маршрут API. Функция отправит POST-запрос с идентификатором продукта и взамен получит URL-адрес оформления заказа. Получив URL-адрес, откройте его в новой вкладке, чтобы отправить пользователя на страницу оплаты.

 const buyProcut1 = async () => {
    try {
      const response = await axios.post("../api/lemonsqueezy", {
        productId: "495244",
      });

      console.log(response.data);
      window.open(response.data.checkoutUrl, "_blank");
    } catch (error) {
      console.error(error);
      alert("Failed to buy product #1");
    }
  };

Этот код посвящен

• Определяет асинхронную функцию buyProduct1.
• Затем отправьте запрос на ваш сервер с определенным идентификатором продукта. В случае успеха откроется новая вкладка браузера с URL-адресом оформления заказа
• Если во время процесса что-то пойдет не так, система выявляет проблему, регистрирует ее и показывает пользователю предупреждение о том, что покупка не удалась.

4. Настройка вебхука

И последнее, но не менее важное: мы настраиваем веб-перехватчики для отслеживания заказов. Вернитесь на панель управления LemonSqueezy и настройте вебхук.

Для URL-адреса вам понадобится что-то общедоступное, что сложно при локальной разработке. Вот тут-то и пригодится нгрок.

ngrok предоставит вам временный общедоступный URL-адрес, который перенаправит на ваш локальный компьютер. Вы можете проверить эту ссылку, чтобы настроить ngrok на вашем устройстве:
https://dashboard.ngrok.com/get-started/setup/

Как и раньше, код для обработки вебхука уже готов. Все, что вам нужно сделать, это настроить его в обработчике маршрута и наслаждаться сладким

Давайте оставаться на связи в Instagram, Twitter и GitHub — там, где происходит настоящее волшебство.

Спасибо, что вы рядом! ?