Expressを使用したNode.jsでのStripePaymentsの概要

提供：Dev Guides
移動先:案内、検索

この記事では、StripeのChargesAPI を使用して、顧客を作成し、支払いを送信できる基本的な寄付アプリを作成する方法について説明します。

前提条件

基本的なpromisesと、Expressサーバーのセットアップ方法を理解する必要があります。

インストール

これを設定するには、かなりの数のことが必要になります。 Body-parserを使用すると、フォームデータをより便利なものに変換できます。ejsを使用すると、サーバーから成功ページをレンダリングできます。expressは、サーバー自体にnodemonは保存時にサーバーをリロードし、最後にstripeを使用して、StripeAPIで必要なすべてのより興味深い機能にアクセスできるようにします。 

$ npm i body-parser ejs express nodemon stripe

Stripe Webサイトで、アカウントを作成する必要があります。 ダッシュボードのDevelopersの下にあるAPI Keysには、Publishable keyとSecret Keyの両方があります。 これらは、後でデータにアクセスするために必要なものです。 最初はテストキーを使用することをお勧めします。

ファイルとディレクトリの設定

単純なプロジェクトのファイルは次のように編成されます。 

* views 📂  - Handles our front-end code, must be named views for `ejs` to work.
  * card.js 
  * completed.html
  * index.html
* server.js

サーバーのセットアップ

基本的なExpressサーバーであり、インストールしたものすべてが必要です。stripeが必要な場合はStripeSecret Keyを追加し、express.staticを使用してビューフォルダーをレンダリングします。

server.js 

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const stripe = require('stripe')('SECRET_KEY'); // Add your Secret Key Here

const app = express();

// This will make our form data much more useful
app.use(bodyParser.urlencoded({ extended: true }));

// This will set express to render our views folder, then to render the files as normal html
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

app.use(express.static(path.join(__dirname, './views')));

// Future Code Goes Here

const port = process.env.PORT || 3000;
app.listen(port, () => console.log('Server is running...'));

アプリを本番環境に移行するときは、APIキーをコードに直接入れないでください。 使用しているホスティングサービスが何であれ、代わりに安全な情報を渡すために環境変数を設定することを忘れないでください。 コードが誤って公開される可能性のあるリポジトリに秘密鍵がコミットされないように、環境変数をすぐに設定することをお勧めします。


UIセットアップ

UIとフロントエンドには、 Taiwind CSS を使用します。また、独自のフロントエンドコードの直前にStripeからフロントエンドスクリプトを取得する必要があります。

フォームの一番下に、Stripeがカード入力とエラーメッセージを表示するために、IDがcard-elementとcard-errorの2つの空のdivが必要です。

index.html 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <title>Donation App</title>
</head>

<body class="bg-gray-900">
  <nav class="bg-purple-900 h-20 flex justify-center">
    <h1 class="text-white text-5xl">Donation App</h1>
  </nav>

  <div class="flex justify-center mt-32">
    <form action="/charge" method="POST" class="flex flex-col w-1/3">
      <input class="bg-transparent text-white p-2 h-10 mb-4" type="text" name="name" placeholder="Name">
      <input type="email" class="bg-transparent text-white p-2 h-10 mb-4" name="email" placeholder="Email">
      <input class="bg-transparent text-white p-2 h-10 mb-4" type="text" name="amount" placeholder="Amount">

      <div id="card-element" class="bg-transparent text-white p-2 h-10 mb-4"></div>
      <div id="card-errors" role="alert"></div>
      <button class="text-white bg-purple-900 p-4 rounded">Submit Payment</button>
    </form>
  </div>
</body>

<script src="https://js.stripe.com/v3/"></script>
<script src="card.js"></script>

</html>

フロントエンドコード

まず、カードの入力と検証を設定する必要があります。 私たちにとって幸運なことに、Stripeはそれについても私たちを助けてくれます。 これは少し複雑に見えるので、少し分解してみましょう。

  • Stripeの要素関数を使用してカード入力を作成し、アプリの他の部分と一致するようにいくつかのスタイルを追加し、それをcard-element IDに追加して、前面に表示されるようにする必要があります。 -終わり。
  • フォームが送信される直前に、引数の値を使用してフォームに非表示の入力を追加する関数を作成します。
  • on submitイベントリスナーをフォームに追加して、新しいStripeトークンを作成します。これにより、ユーザーのカードデータが暗号化され、関数に渡されて、非表示の入力で送信されます。

入力を作成し、渡されたデータを保護し、暗号化されたデータをフォームに追加してからサーバーに送信します。

card.js 

const stripe = Stripe('PUBLISHABLE_KEY'); // Your Publishable Key
const elements = stripe.elements();

// Create our card inputs
var style = {
  base: {
    color: "#fff"
  }
};

const card = elements.create('card', { style });
card.mount('#card-element');

const form = document.querySelector('form');
const errorEl = document.querySelector('#card-errors');

// Give our token to our form
const stripeTokenHandler = token => {
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  form.submit();
}

// Create token from card data
form.addEventListener('submit', e => {
  e.preventDefault();

  stripe.createToken(card).then(res => {
    if (res.error) errorEl.textContent = res.error.message;
    else stripeTokenHandler(res.token);
  })
})

基本料金

サーバー側で、/chargeの新しいPOSTAPIエンドポイントを作成します。 基本情報（すべてのオプションここで遊ぶことができます）、最も重要なのは、カード入力から作成したトークンで顧客を作成することを約束しているだけです。

新しい顧客の場合、カードに新しい請求を作成し、金額をセントで渡します。 すべてがうまくいけば、completed.htmlページをレンダリングします。 

app.post("/charge", (req, res) => {
  try {
    stripe.customers
      .create({
        name: req.body.name,
        email: req.body.email,
        source: req.body.stripeToken
      })
      .then(customer =>
        stripe.charges.create({
          amount: req.body.amount * 100,
          currency: "usd",
          customer: customer.id
        })
      )
      .then(() => res.render("completed.html"))
      .catch(err => console.log(err));
  } catch (err) {
    res.send(err);
  }
});

完成したページ

寄付が正常に送信されると、ありがとうメッセージとボタンが付いた別のページをホームページに戻すことができます。 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <title>Donation Completed</title>
</head>

<body class="bg-gray-900">
  <nav class="bg-purple-900 h-20 flex justify-center">
    <h1 class="text-white text-5xl">Donation App</h1>
  </nav>
  <div class="flex flex-col items-center mt-32 text-white text-2xl">
    <p>Thank you for your generous donation.</p>
    <p>Your payment has been received.</p>
    <a href="/"><button class="bg-blue-700 rounded p-4 mt-3">Return</button></a>
  </div>
</body>

</html>

localhost:3000で試してみると、Stripeはテストカード番号のリストを提供します。 ダッシュボードで、テスト支払いの詳細を確認できます。

結論

明らかに、この投稿は表面を傷つけただけであり、より複雑なユースケースでは、優れたStripeドキュメントを掘り下げる必要があります。 より堅牢な支払いシステムは、ユーザーが誤って2回続けて請求を処理しようとした場合に、エラー処理や重複請求の回避などの処理も行います。 ただし、ご覧のとおり、Stripeを使用すると、クレジットカード番号などの機密データを処理しなくても、支払いページを簡単に作成できます。 彼らは私たちのために機密データの処理を引き受けます。

この短いイントロが、StripeとNode.jsを使用したオンラインでの支払い処理の仕組みを簡単に理解するのに役立つことを願っています。 ここでコードを実装する際に問題が発生した場合は、このGithubリポジトリを確認してください。

「https://www.finddevguides.com/index.php?title=Expressを使用したNode.jsでのStripePaymentsの概要&oldid=106955」から取得
Powered by MediaWiki