Вспомните, что когда мы говорили о моделировании вашего бизнеса, вы узнали, что один из способов, с помощью которого многие SaaS-компании зарабатывают больше денег, — это обслуживание различных типов пользователей с помощью различных функций или уровней обслуживания. Основатель-меценат, работающий над побочным проектом, не имеет тех же потребностей, что и огромная команда в корпоративной компании.

SaaS-компании, которые хотят помочь как инди-основателю, так и предприятию, должны решить вопрос ценообразования своих предложений. В идеале цены отражают ценность услуги. Вы видели страницы с ценами, где представлены 2, 3 или 4 уровня с какой-то сравнительной таблицей, в которой указаны различия между уровнями.

Возможно, это уровни Startup, Growth и Enterprise; или что-то вроде Individual и Family. Они обычно моделируются в виде схемы типа «хороший-лучший-лучший», где пользователям показывается самый низкий уровень цен, который также включает наименьшее количество функций, поддержки и включенных активов, а также более высокие уровни, которые часто различаются на основе большего количества функций, более быстрой или специализированной поддержки, большего количества активов или контента.

Существует несколько способов создания таблицы цен, различающихся по сложности интеграции и гибкости: от встраиваемой таблицы цен (самый быстрый и высокоэффективный способ) до полностью пользовательской страницы цен. Я расскажу о каждом из них, чтобы вы могли решить для себя, какой способ интеграции лучше.

Встраиваемая таблица цен

Самый быстрый способ создать страницу с ценами — это использовать встраиваемую таблицу цен Stripe. Используя Stripe Dashboard, вы можете настроить UI-компонент и встроить его на свой сайт, чтобы показать информацию о ценах вашим клиентам и перевести их к оформлению заказа. Из коробки таблица цен не требует никакого пользовательского кода. Посмотрите, насколько прост HTML в этом кодепене:

Мы добавим немного пользовательского кода, чтобы указать client_reference_id для обеспечения возможности связать новую подписку с существующим пользователем в нашей базе данных.

<script
  async
  src="https://js.stripe.com/v3/pricing-table.js">
</script>
<stripe-pricing-table
  pricing-table-id="<%= pricing_table_id %>"
  publishable-key="pk_test_vAZ3gh1LcuM7fW4rKNvqafgB00DR9RKOjN"
  client-reference-id="<%= current_user.id %>"
></stripe-pricing-table>

Вы можете настроить таблицу с изображениями товаров, их характеристиками и прочим — все это через панель управления Stripe и без необходимости развертывания нового кода. Встраиваемая таблица цен — это совершенно новая функция, и мы будем рады услышать, как мы можем улучшить ее, чтобы она отлично работала для вашего бизнеса.

Таблица цен также позволяет тестировать цены, обновляя продукты и цены, связанные с данной таблицей цен. Через несколько минут мы поговорим о том, почему тестирование цен полезно для вашего бизнеса.

Платежные ссылки

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

С помощью ссылок на оплату можно даже встроить мини-таблицу цен:

Индивидуальная подписка за $5/месяц
Подписка на семью за $15/месяц

Ссылки на оплату также поддерживают передачу client_reference_id в качестве параметра запроса, поэтому мы можем использовать это и на нашем сайте. Вот пример: https://buy.stripe.com/test_7sI8zHfcU9uYaC45lm?client_reference_id=888

Stripe Checkout или PaymentElement

Если вы предпочитаете создать свою собственную страницу ценообразования, которая будет хорошо работать с Stripe Checkout, или пользовательский поток платежей с PaymentElement, этот раздел для вас. Страница ценообразования для обоих случаев будет одинаковой, и в обоих случаях мы будем передавать ID цены, на которую клиент хочет подписаться, обратно на сервер.

В случае Checkout мы создадим новую сессию Checkout Session и перенаправим на страницу, размещенную на сайте Stripe. В случае PaymentElement мы создадим новую Подписку и перенаправим на наш пользовательский поток платежей.

Использование Stripe Checkout требует меньше усилий по интеграции, чем Payment Element. PaymentElement позволяет вам создать очень индивидуальный поток платежей и удержать клиентов на вашем сайте, но для его реализации требуется больше усилий по разработке.

Помните из предыдущей статьи о моделировании вашего бизнеса с помощью продуктов и цен, что каждый из этих уровней представлен в Stripe как продукт с одной или многими ценами? Давайте заглянем в будущее. Когда мы в конечном итоге создадим Подписку для Клиента, нам нужно будет передать ID объекта Цены.

Зная это, какая информация нам понадобится для создания полнофункциональной страницы с ценами?
Для каждого продукта, который мы хотим отобразить:

• Название продукта
• Характеристики
• Цена
• Периодичность
• Валюта
• Кнопка подписки (с идентификатором цены)
• Изображение?

Следующий вопрос… откуда берутся эти данные и каковы компромиссы между хранением их в нашей базе данных и получением из Stripe с помощью вызова API?

Вариант A: Хранить все данные о товарах и ценах в базе данных

Вы можете создать таблицы Product и Price в базе данных для зеркального отображения данных в Stripe, а затем запросить базу данных для получения информации об отображении. Один из недостатков этого решения заключается в том, что каталог продуктов может быстро устареть. Если вы внесете изменения в продукт в Stripe Dashboard, они не попадут в вашу систему без подключения обработчика webhook для product.updated. Аналогично, если вы создадите пользовательский интерфейс для управления продуктами и ценами в своей базе данных, вам понадобится способ синхронизировать эти изменения со Stripe (в одних случаях обновляя, в других — создавая новые цены).

Плюсы

• Быстрая загрузка страницы с ценами

Минусы

• Сложно управлять состоянием
• Сложно обновлять цены
• Два потенциальных источника истины

Вариант B: Выборка из Stripe API

Другим вариантом является получение данных о продукте и цене из Stripe API на вашем сервере при отображении страницы с ценами. Недостатком этого подхода является увеличение задержки на странице, которая должна быть быстрой. Объекту Product также не хватает чистого способа отображения списка характеристик.

Плюсы

• Легко изменять цены
• Единый источник истины
• Нет сложного управления состоянием

Минусы

• Замедленная загрузка страницы с ценами

Опять же, лучшее решение зависит от вашего бизнеса. Чувствительны ли вы к задержкам на странице ценообразования? Вы уже провели несколько экспериментов с ценами и уверены, что цены не изменятся?

Я предпочитаю получать продукты и цены непосредственно из API Stripe, потому что считаю, что штраф за задержку стоит того, чтобы получить дополнительную гибкость и простоту. Но это еще не все, есть еще одно менее известное преимущество такого подхода: тестирование цен.

Реализация

В этом примере мы используем несколько более продвинутых возможностей API Price. Вот часть кода в контроллере Rails, где мы получаем список цен и связанных с ними продуктов.

class PricesController < ApplicationController
  def index
    @prices = Stripe::Price.list(
      active: true,
      recurring: { interval: params.fetch(:interval, ‘month’),},
      currency: 'usd',
      expand: ['data.product'],
      lookup_keys: ['startup', 'freelancer', 'enterprise'],
    ).data.sort_by { |p| p.unit_amount }
    @prices.each do |price|
      price.features = JSON.parse(price.product.metadata.features)
    end
  end
end

Давайте упростим и рассмотрим каждый аргумент конечной точки списка Prices.

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

Вот как может выглядеть HTML:

<% if @prices.empty? %>
  <p>No products yet.</a></p>
<% end %>
<% @prices.each do |price| %>
  <div>
    <div>
      <img src="<%= price.product.images.try(:first) %>" alt="<%= price.product.description %>">
    </div>
    <div>
      <h3><%= price.product.name %></h3>
      <p><%= price.product.description %></p>
    </div>
    <div>
      <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
      <p><%= number_to_currency(price.unit_amount/100, precision: 0) %></p>
    </div>
    </div>
    <form action="/checkout" method="post" data-remote="true">
      <input type="hidden" name="price" value="<%= price.id %>">
      <button type="submit">
        Subscribe to <%= price.product.name %>
      </button>
    </form>
  </div>
<% end %>

(Бонус!) Тестирование цен

Последователи Патрика МакКензи (patio11) знают общий рефрен в его советах по бизнесу: берите больше. Джулиан Лер описывает 9 приемов для экспериментов с ценообразованием. В основе этих советов лежит истина: выбрать правильную цену очень сложно. Будущий успех вашего бизнеса может зависеть от того, насколько правильно вы назначаете цену. Слишком маленькая цена — и у вас не хватит капитала для поддержания бизнеса, слишком большая цена — и вы вытесните себя с рынка.

Определим ценовое тестирование или ценовой эксперимент как практику периодического изменения размеров и уровней цен для проверки гипотез о готовности конкретного сегмента клиентов платить. Чтобы сделать это правильно, очень важно иметь хорошую телеметрию, чтобы знать, как изменение повлияло на конверсию.

Тестирование цен с помощью встраиваемой таблицы цен — это простое дело. Вы можете редактировать продукты и цены, отображаемые в данной таблице цен, прямо с приборной панели.

Тестирование цен для пользовательской страницы ценообразования немного сложнее, но с помощью менее известной функции lookup_key вы можете протестировать цены без развертывания нового кода. Чтобы протестировать цены на странице ценообразования выше, мы хотим убедиться, что мы также включаем lookup_key в Price create для наших новых цен.

price = Stripe::Price.create(
  currency: 'usd',
  product: 'prod_abc123',
  unit_amount: 500,
  recurring: {
    interval: 'month',
  },
  lookup_key: 'starter',
)

Когда мы захотим изменить цену на $7/месяц, мы можем использовать аргумент transfer_lookup_key:

price = Stripe::Price.create(
  currency: 'usd',
  product: 'prod_abc123',
  unit_amount: 700,
  recurring: {
    interval: 'month',
  },
  lookup_key: 'starter',
  # important!
  transfer_lookup_key: 'starter',
)

Теперь наша страница ценообразования обновлена, и нам не нужно устанавливать новый код страницы ценообразования!

Я рекомендую начать с Таблицы цен или Платежных ссылок. Если вам нужно больше возможностей и контроля, выбирайте Stripe Checkout. Если вы готовы инвестировать в свой собственный поток платежей, выбирайте PaymentElement.

Об авторе

CJ Avilla (@cjav_dev) — представитель разработчиков в Stripe, разработчик на Ruby on Rails и YouTuber. Он любит изучать и преподавать новые языки программирования и веб-фреймворки. Когда он не за компьютером, он проводит время с семьей или катается на велосипеде 🚲.