Expressを使用したNode.jsでのStripePaymentsの概要
この記事では、StripeのChargesAPI を使用して、顧客を作成し、支払いを送信できる基本的な寄付アプリを作成する方法について説明します。
前提条件
基本的なpromisesと、Expressサーバーのセットアップ方法を理解する必要があります。
インストール
これを設定するには、かなりの数のことが必要になります。 Body-parser
フォームデータをより便利なものに変換できるようになります。 ejs
サーバーから成功ページをレンダリングします。 express
サーバー自体の場合、 nodemon
保存時にサーバーをリロードし、最後に stripe
StripeAPIで必要なすべての興味深い機能にアクセスできるようにします。
$ npm i body-parser ejs express nodemon stripe
Stripe Webサイトで、アカウントを作成する必要があります。 ダッシュボードにいるとき、 API Keys
下 Developers
、あなたは両方を見つけるでしょう 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を追加します。 Secret Key
必要な場合 stripe
、を使用します express.static
ビューフォルダをレンダリングします。
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からフロントエンドスクリプトを取得する必要があります。
フォームの一番下に2つの空が必要です div
のIDを持つ card-element
と card-error
Stripeがカード入力とエラーメッセージを表示するため。
<!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トークンを作成します。これにより、ユーザーのカードデータが暗号化され、関数に渡されて、非表示の入力で送信されます。
入力を作成し、渡されたデータを保護し、暗号化されたデータをフォームに追加してからサーバーに送信します。
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);
})
})
基本料金
サーバー側で、次の新しいPOSTAPIエンドポイントを作成します。 /charge
. 基本情報(すべてのオプションここで遊ぶことができます)、最も重要なのは、カード入力から作成したトークンで顧客を作成することを約束しているだけです。
新しい顧客の場合、カードに新しい請求を作成し、金額をセントで渡します。 すべてがうまくいけば、レンダリングします 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リポジトリを確認してください。