構築済みのチェックアウトページ

Smartpay チェックアウトの連携にご使用いただける実用的な全サンプルコードをご覧ください。これらのクライアント側とサーバー側のコードにより、お客様を Smartpay がホストする構築済みの支払いページにリダイレクトします。

前提条件

連携を機能させるには、事前に Smartpay の API クレデンシャル (公開キーと秘密キー) を取得する必要があります。クレデンシャル情報は、ダッシュボードの設定 > 開発者のページでご確認いただけます。

Smartpay の支払いの仕組みについては、支払いフローで詳細をご確認ください。

1. サーバーのセットアップ

Smartpay ライブラリのインストール

パッケージをインストールし、コードにインポートします。ゼロから作成し、package.jsonが必要な場合は、プロジェクトファイルをダウンロードします。

yarn add @smartpay/sdk-node

または

npm install --save @smartpay/sdk-node

チェックアウトセッションの作成

チェックアウトセッションの作成エンドポイントを貴社サーバーに追加します。チェックアウトセッションでは、 Smartpay 側の支払いページに表示される内容（品目や注文金額や通貨など）を設定します。

品目を定義する

クライアント側での変更操作を防ぐために、価格や在庫状況などの商品在庫に関する機密情報は、必ず貴社サーバーに保存してください。チェックアウトセッションを作成する際は、商品情報を定義してください。

successUrl (成功 URL) と cancelUrl (キャンセル URL) を指定する

お客様がチェックアウトセッションを完了またはキャンセルした場合に、Smartpay がリダイレクトする URL を指定します。同じ URL で成功した場合とキャンセルした場合の両方を処理できます。

チェックアウトにリダイレクトする

セッションの作成後、お客様をレスポンスで返されるチェックアウトページの URL にリダイレクトします。

2. チェックアウトの実装

チェックアウトボタンを追加する

ページにボタンを追加します。お客様がこのボタンをクリックすると、Smartpay 側の支払いフォームにリダイレクトされます。

3. 連携のテスト

テストアカウント

弊社では、スムーズなデベロッパー体験の提供を目指しており、Smartpay の連携を簡単にテストしていただけます。

連携を確認する場合は、テストキーを使用します。それにより、カードネットワークや決済サービスプロバイダから支払いが処理される心配がありません。必要な手順は、Smartpay チェックアウトが起動したら、+test サフィックスが付いたメールを使用するだけです。たとえば、hello+test@smartpay.co などで登録すると、テストアカウントとして認識され、課金の発生を心配をすることなく安心して連携作業が行えます。

テストモードでは、カード番号があらかじめ入力されており、さまざまな結果をテストしていただけます。

成功: 4242 4242 4242 4242
チェックアウトに失敗: 4100 0000 0000 0019
この支払い方法に失敗: 4000 0000 0000 0119

アプリケーションを実行する

サーバーを起動し、http://localhost:3080 に移動します。

おめでとうございます！

チェックアウトの基本的な連携に成功しました。

ダッシュボードでアカウントが有効化されているかどうかを確認してください（有効化されていない場合は、お客様に公開する準備が完了している旨を弊社にお知らせください）。アカウントが有効化されると、ダッシュボードの設定 > 開発者のページにライブセッション用のクレデンシャルが表示されます。連携を公開する際は、スムーズに移行できるよう公開前チェックリストをご確認ください。

1const path = require('path');
2const cors = require('cors');
3const express = require('express');
4
5const Smartpay = require('@smartpay/sdk-node').default; // The Nodejs SDK
6
7// Replace the keys with yours
8const SECRET_KEY = process.env.SECRET_KEY || '<YOUR_SECRET_KEY>';
9const PUBLIC_KEY = process.env.PUBLIC_KEY || '<YOUR_PUBLIC_KEY>';
10
11const smartpay = new Smartpay(SECRET_KEY, {
12  publicKey: PUBLIC_KEY,
13});
14
15const app = express();
16const root = path.join(__dirname, '..', 'client', 'build');
17
18app.use(express.static(root));
19app.use(express.json());
20app.use(cors());
21
22app.get('/', async (req, res) => {
23  res.redirect('http://localhost:3080');
24});
25
26app.post('/create-smartpay-checkout', async (req, res) => {
27  const CALLBACK_URL_PREFIX = req.headers.referer;
28
29  // Generate the payload for checkout session
30  const payload = {
31    amount: 400,
32    currency: 'JPY',
33    items: [
34      {
35        name: 'オリジナルス STAN SMITH',
36        amount: 250,
37        currency: 'JPY',
38        quantity: 1,
39      },
40    ],
41    customerInfo: {
42      accountAge: 35,
43      email: 'merchant-support@smartpay.co',
44      firstName: 'かおる',
45      lastName: '田中',
46      firstNameKana: 'カオル',
47      lastNameKana: 'タナカ',
48      address: {
49        line1: '北青山 3-6-7',
50        line2: '青山パラシオタワー 11階',
51        subLocality: '',
52        locality: '港区',
53        administrativeArea: '東京都',
54        postalCode: '107-0061',
55        country: 'JP',
56      },
57      dateOfBirth: '1970-06-30',
58      gender: 'male',
59    },
60    shippingInfo: {
61      address: {
62        line1: '北青山 3-6-7',
63        line2: '青山パラシオタワー 11階',
64        subLocality: '',
65        locality: '港区',
66        administrativeArea: '東京都',
67        postalCode: '107-0061',
68        country: 'JP',
69      },
70      feeAmount: 150,
71      feeCurrency: 'JPY',
72    },
73    // Your internal reference of the order
74    reference: 'order_ref_1234567',
75    // Callback URLs
76    successUrl: 'https://docs.smartpay.co/example-pages/checkout-successful',
77    cancelUrl: 'https://docs.smartpay.co/example-pages/checkout-canceled',
78  };
79
80  const session = await smartpay.createCheckoutSession(payload);
81
82  res.redirect(303, session.url);
83});
84
85/**
86 * Handle callbacks
87 */
88app.get('/payment-success', async (req, res) => {
89  res.sendFile('payment-success.html', { root });
90});
91
92app.get('/payment-canceled', async (req, res) => {
93  res.sendFile('payment-canceled.html', { root });
94});
95
96app.listen(5001, '127.0.0.1', () =>
97  console.log('Node server listening on port 5001!')
98);
99

フロントエンド

バックエンド