Frontend
Backend

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

Smartpay Checkoutのインテグレーションで機能する、完全なコードサンプルを確認してください。クライアント側とサーバー側のコードは、事前に作成されSmartpayによってホストされている支払いページにリダイレクトされます。

前提条件

インテグレーションを機能させる前に、SmartpayのAPIクレデンシャル(公開鍵秘密鍵)を取得してください。クレデンシャル情報は、ダッシュボード設定 > 開発者ページで確認できます。

Smartpayによる支払いの仕組みについて知りたい場合は、支払いフローで詳細を確認してください。

1. サーバーをセットアップする

Smartpayライブラリをインストールする

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

yarn add @smartpay/sdk-node
または
npm install --save @smartpay/sdk-node

チェックアウトセッションを作成する

チェックアウトセッションを作成するエンドポイントをサーバーに追加します。チェックアウトセッションは、ラインアイテム、注文金額、通貨など、Smartpayがホストする支払いページに表示される内容を制御します。

ラインアイテムを定義する

クライアントによる変更操作を防ぐために、たとえば価格や在庫状況などといった製品在庫に関する機密情報は自社のサーバーに保持してください。チェックアウトセッションを作成する場合は、製品情報を定義してください。

成功URLとキャンセルURLを指定する

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

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

セッションが開始された後に、レスポンスから取得されるチェックアウトページURLにお客様をリダイレクトします。

2. チェックアウトを作成する

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

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

3. ページをテストする

テストアカウント

Smartpayは、スムーズなデベロッパー体験を提供することを目指しています。デベロッパーは、サービスを統合するためのテストアカウントを簡単に作成できます。

必要な手順は、+testサフィックスが付いたメールを使用するだけです。たとえば、hello+test@smartpay.coをSmartpayサービスで使用することで、テストアカウントとして認識されます。これにより、課金が発生する心配をすることなく、安心してインテグレーション作業を行うことができます。

さまざまなケースをシミュレートするために組み込まれたテストカードの例を以下に示します。

  • 成功: 4242 4242 4242 4242
  • Hard decline: 4100 0000 0000 0019
  • Soft decline: 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