Руководство для начинающих по интеграции Stripe

Конечным результатом должна быть HTML-страница с кнопкой оплаты Stripe, которая позволяет посетителю ввести данные своей карты по заданной цене и нажать «Купить».

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

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

Предположения

В этом руководстве предполагается, что вы немного знакомы с JavaScript (через узел) - или, по крайней мере, хорошо знакомы с копированием и вставкой! Это также предполагает, что вы просто хотите продать вещь и не хотите или не нуждаетесь в полностью управляемой системе (для отслеживания запасов и т. Д.), Хотя, конечно, вы можете добавить это, я просто не собираюсь рассказывать об этом!

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

Это также предполагает, что вы находитесь в одной из 25 стран, которые поддерживает Stripe.

Наконец, если вы находитесь в Европе, вам нужно будет указать НДС, и, конечно же, в Великобритании, независимо от того, зарегистрированы вы в качестве плательщика НДС или нет, вам нужно будет сообщить VATMOSS - я объясню на конец поста, как то, над чем я работаю, может помочь.

1. Получите аккаунт

Прежде чем что-либо делать, вам понадобится аккаунт Stripe. Процесс довольно безболезненный, но требует достаточного количества информации, включая данные вашей компании (если применимо), адрес и так далее.

Теперь вам нужно собрать свои API-ключи.

Стоит создать каталог, в котором будет жить ваш код. Затем поместите тестовые ключи в файл с именем .dev.env, а живые ключи в .env, например. Мы также собираемся указать здесь валюту и стоимость:

STRIPE_SECRET=sk_test_BQokikJOvBiI2HlWgH4olfQ2
STRIPE_PUBLIC=pk_test_6pRNASCoBOKtIshFeQd4XMUh
STRIPE_CCY=gbp
STRIPE_COST=999

Обратите внимание, что коды валют - коды ISO (по умолчанию - доллары США), а стоимость указана в центах за пенсы, поэтому приведенный выше пример значения составляет 9,99 фунтов стерлингов.

2. Используйте Stripe’s Checkout.

Я также предположил, что у вас есть какая-то страница продукта, на которой вы хотите, чтобы ваш посетитель что-то купил, электронную книгу, программное обеспечение и т. Д. Мы хотим добавить кнопку «Купить».

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

Я собираюсь дать вам шаблонный код JavaScript, который позволит вам обслуживать это и обрабатывать автономную и онлайн-среду. А пока вам понадобится страница продукта (я назвал свою index.html) с формой оформления заказа:

<!DOCTYPE html>
<html>
<head>
  <title>My ebook</title>
</head>
<body>
  <h1>Buy "My Book"</h1>
  <p>It's all about me!</p>

  <!-- this is copied from the Stripe checkout embed -->
  <form action="/your-server-side-code" method="POST">
    <script
      src="https://checkout.stripe.com/checkout.js" class="stripe-button"
      data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
      data-amount="999"
      data-currency="EUR"
      data-name="My Company"
      data-description="My Book"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto">
    </script>
  </form>
  <!-- end of Stripe embed -->

</body>
</html>

Несколько замечаний:

Действие формы, мы обновим это через мгновение, чтобы указать на ваш URL-адрес списания (мы перейдем к этому позже).
Есть значения, которые мы повторили из файлов .env, мы обновим их позже, чтобы вы могли управлять ими из единой точки кода.
data-key - ваш публикуемый ключ.
data-amount указывается в центах (или пенни), то есть цена, деленная на 100, поэтому цена, указанная выше, будет показывать 9,99 евро (также потому, что валюта данных находится в евро).
Если вы хотите указать собственный текст на кнопке, вам нужно будет добавить data-label = "My custom button text".
Я настоятельно рекомендую добавить в форму data-zip-code = ”true”, это означает, что Stripe запросит у вашего пользователя почтовый индекс, который поможет с подтверждением налогообложения (особенно для VATMOSS).

После того, как у вас все заработало и вы используете свой тестовый публикуемый ключ, вы сможете смоделировать покупку своей вещи с помощью номеров тестовых карточек Stripe. Для читателей, не являющихся гражданами США, прокрутите немного вниз по этой ссылке, и вы найдете карточки для конкретных стран - я нашел это очень полезным для тестирования налоговых расчетов позже в процессе.

3. Завершение списания

Не обращая внимания на то, что нам нужно где-то запустить этот серверный код, следующий код - это все, что вам нужно для завершения обработки транзакции. Обратите внимание, что принцип работы Stripe’s Checkout заключается в том, что Stripe фиксирует данные карты посетителя, а ваш сервер никогда не видит карту (это хорошо). Ваш сервер получит токен, и этот токен будет использован для завершения транзакции:

// load the stripe module pass in your secret token
// this will configure the `stripe` object for your
// account that you created earlier
const stripe = require('stripe')(process.env.STRIPE_SECRET);

// this function will charge the user's card,
// note that `req` is the http request, we'll
// see how to connect this all up later.
module.exports = (req) => {
  // the token is generated by Stripe and POST'ed
  // to the `action` URL in our form
  const token = req.body.stripeToken;

  // now we create a charge which returns a `promise`
  // so we need to make sure we correctly handle
  // success and failure, but that's outside of this
  // function (and we'll see it later)
  return stripe.charges.create({
    // ensures we send a number, and not a string
    amount: parseInt(process.env.STRIPE_COST, 10),
    currency: process.env.STRIPE_CCY,
    source: token,
    description: 'My Book', // 👈 remember to change this!
    // this metadata object property can hold any
    // extra private meta data (like IP address)
    metadata: {},
  });
}

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

Я включу полный код в репозиторий git, чтобы вы могли загрузить и просмотреть его, но основной способ обработки сообщения прост:

app.post('/charge', (req, res, next) => {
  charge(req).then(data => {
    res.render('thanks');
  }).catch(error => {
    res.render('error', error);
  });
});

При успешном выполнении POST в конечную точку / charge запрос передается нашему модулю начисления (описанному в предыдущем блоке кода), и если обещание выполнено успешно, мы показываем страницу «спасибо», в противном случае мы показываем пользователю ошибку - хотя Я бы рекомендовал проверить конкретные ошибки и показать удобное для пользователя сообщение, вместо того, чтобы делать то, что я делаю выше, и передавать ошибку прямо на страницу.

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

4. Конфигурация

Как я уже упоминал ранее, у нас будет конфигурация для разработки (через .dev.env) и производственная (через .env). У вас, конечно, нет для этого, но это немного упрощает тестирование, и, в частности, с Stripe вы получаете два набора ключей API: один для тестирования, а другой - для получения денег. .

Я обычно использую эти два файла для управления средами и их условную загрузку в зависимости от значения NODE_ENV. NODE_ENV - это то, что мы устанавливаем в среде при запуске node.

Например, чтобы установить NODE_ENV = production в командной строке, вы можете запустить:

$ NODE_ENV=production node app.js

Внутри кода нашего приложения мы используем пакет под названием dotenv и загружаем файл * .env в соответствии с:

const dotenv = require('dotenv');
const envfile = process.env.NODE_ENV === 'production' ?
      '.env' :    // production
      '.dev.env'; // development

// load the contents of the env file into
// the `process.env` object.
dotenv.config({
  silent: true,
  path: `${__dirname}/${envfile}`,
});

Важно, это необходимо сделать перед попыткой прочитать какое-либо из значений process.env. *, как мы это делаем в логике начисления.

Также важно, что файлы .env содержат личную информацию. Не кладите их туда, где их можно будет прочитать (обратите внимание на те, которые я вам пока показывал, с использованием собственных тестовых API-ключей Stripe). Это означает: не размещайте эти файлы в общедоступном репозитории github и не размещайте эти файлы в Интернете, где их можно будет прочитать.

5. Развертывание

Теперь, когда у вас есть элементы логики, нам нужно получить на сайте URL-адрес, по которому люди будут покупать эту вещь. В настоящее время я очень неравнодушен к платформе Zeit’s now (Я писал об этом недавно и включаю несколько советов по развертыванию).

Однако, и это важно, если вы решите использовать Zeit, но используете уровень бесплатного пользования (по умолчанию), каждый файл, который вы развертываете, будет общедоступным. Поэтому вам нужно удалить файл .env и установить значения среды в командной строке при развертывании. Что хорошо в использовании process.env для значений, так это то, что даже если вы удалите файл .env, ни один из ваших кодов не нуждается в изменении.

Во-первых, создайте файл с именем .gitignore и включите (как минимум) .env - это означает, что git проигнорирует этот файл, но также команда Zeit now не будет загружать файл.

Использование следующей команды приведет к развертыванию с использованием now и включит все значения вашей среды в качестве аргумента (с использованием -e KEY = VALUE) в команду now:

$ now $(sed -e 's/^/-e /' .env)

Одно предостережение в отношении приведенного выше выражения: ваш файл .env не может содержать комментарии и не может содержать пробелов.

Или вы можете использовать такой продукт, как Surge.sh или Heroku, или что-нибудь, что вам удобно.

6. Налог

Я упомянул налог. Если вы находитесь в ЕС (или ... в Великобритании ... # brexit), вам нужно будет сообщать о любых налогах на основе ЕС, что не так уж сложно, но наверняка неудобно. В Великобритании это известно как VATMOSS, я уверен, что в других странах ЕС у него есть не менее запутанные названия.

Есть доступные услуги, и я написал свой собственный мини-продукт для этого (конечно, вам понадобятся продажи в ЕС, чтобы увидеть какие-либо данные) на сайте taxdo.eu. Taxdo сейчас бесплатен (так как я участвую в бета-тестировании), но вы можете зарегистрироваться и попробовать (или отправить мне отзыв).

Есть также продукты, которые сделают за вас весь процесс, в частности Quaderno (хотя я лично не пробовал, их название постоянно упоминается в этой области). Если вы хотите узнать больше о VATMOSS, я настоятельно рекомендую прочитать Материал Рэйчел Эндрю.

Заключительные примечания

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

Изначально опубликовано в B: log Реми Шарпа