PowerPoint プレゼンテーション

(1)

フォームからの申込時に

クレジットカード決済を行うシステムを作る

◆必要な契約

GMOペイメント PGマルチペイメントサービス

SPIRAL基本契約

SPIRALAPIオプション（分間10件以上決済の発生が想定される場合）

◆必要なスキル

HTML,CSS,PHP

※デザインにこだわらなければ不要

◆作業工数

3営業日

(2)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(3)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(4)

①サイト管理画面にログイン

②該当のSHOPをクリック

（１）ショップ情報取得

※当手順書ではサイト管理画面にログインした場合の手順を記載します。ショップ管理画面からも、ショップ情報を取得できます。

(5)

④「ショップ」の「ID」「パスワード」をメモ。 ※後続の「４．PGマルチペイメントサービス・SPIRAL連携（９）入会申し込みフォーム連携設定」（P.39〜）で使用する値となります。

（１）ショップ情報取得

③「ショップ管理」をクリック

(6)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(7)

①サイト管理画面にログイン

②該当のSHOPをクリック

（２）接続先URL取得

※当手順書ではサイト管理画面にログインした場合の手順を記載します。ショップ管理画面からも、接続先URLを取得できます。

(8)

①「API情報」をクリック ③「リンク・タイプ」の「決済選択呼出し」の接続先URLをメモ。 ※後続の「４．PGマルチペイメントサービス・SPIRAL連携（９）入会申し込みフォーム連携設定」（P.39〜）で使用する値となります。

（２）接続先URL取得

②「ショップ情報」をクリック

(9)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(10)

①サイト管理画面にログイン ②該当のSHOPをクリック

（３）テンプレート設定

※当手順書ではサイト管理画面にログインした場合の手順を記載します。ショップ管理画面からも、テンプレートを設定できます。決済画面（SPIRALからPGマルチペイメントサービスへ遷移した先の画面）の設定をおこないます。１．提供されるテンプレート画面を利用する２．テンプレートをカスタマイズし、画面デザインを統一する当手順書では「１．提供されるテンプレート画面を利用する」手順を記載いたします。

(11)

②「リンクタイプ設定」をクリック

①「ショップ情報」をクリック

③「サンプルテンプレート反映」をクリック

(12)

②「実行」をクリック ①以下項目を選択し、「確認」をクリックサンプル種別：PC用対象決済：クレジットカード（決済用）共通テンプレートも反映する：チェックする対象No.：1 対象種類：pc

（３）テンプレート設定

(13)

（３）テンプレート設定

以下、赤枠にテンプレートが適用されました。

詳細は以下をマニュアルを参照ください。

１．サイト管理画面もしくはショップ管理画面にログイン

２．「ドキュメント」クリック

３．「リンクタイプ」

【リンクタイプ（テンプレート作成ガイド）】の

「1.3.2. ご利用形態ごとのテンプレート必須・不要」

(14)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(15)

（４）SPIRALAPIの設定

①「開発」をクリック ②「スパイラルAPI」をクリック ③「トークン発行」をクリック ④「タイトル」を入力、メモ ※後続の「４．PGマルチペイメントサービス・SPIRAL連携（１０）決済結果受け取りフォーム連携設定」（P.44〜）で使用する値となります。 ⑤「発行する」をクリック ⑥「一覧へ戻る」をクリック

(16)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(17)

②「アプリ一覧」の「＋」ボタンをクリック

③「新規作成」をクリック ①「アプリ」をクリック

(18)

②「新規作成」をクリック ③「引き続き設定を行う」をクリック【PGマルチペイメントサービス】会員登録〜決済 gmopayment ①「名称」「タイトル」を入力

（５）アプリ作成

(19)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(20)

①「DB」の「＋」ボタンをクリック

②「通常DB」をクリック

(21)

②「構成設定」をクリック

（６）会員DB発行

(22)

フィールドに自動的に値を生成する機能の設定仕様です。設定方法は次ページで解説します「登録日時」「オーダーID」「合計金額」は PGマルチペイメント呼び出し時に必須となります。 ※それ以外は任意項目になりますので自由に設定ください

（６）会員DB発行

※赤枠部分の差替えキーワードはプログラム部分で利用しますので本サンプルと同じ名称で設定してください。 ①DBの構造を設定。本ページ下部のテーブルを参照してDBを設計してください ※詳細手順は下記URLを参照してください http://support.smp.ne.jp/function/35

(23)

①「オーダーID」の歯車マークをクリック ②フィールド値自動生成トリガの動作で「値が存在する場合何もしない」を選択 ③生成する値で「システムID」「10桁」を選択、接頭文字列は任意の英字を入力 ④「詳細を閉じる」をクリック

（６）会員DB発行

＜オーダーIDの設定＞

(24)

①「決済結果」の歯車マークをクリック ②ラベルの「＋」ボタンをクリック ③１に「成功」２に「失敗」の文言入力 ④「詳細を閉じる」をクリック

＜決済結果の設定＞

（６）会員DB発行

(25)

①「新規作成」をクリック

②「OK」をクリック

③「一覧へ戻る」をクリック

(26)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(27)

①「＋」ボタンをクリック

②「フォーム」をクリック

（７）入会申し込みフォーム発行

③「会員DB」を選択し、「新規作成」をクリック

(28)

②「新規作成」をクリック

③「引き続き設定を行う」をクリック ①「名前」「タイトル」を入力

(29)

①「使用フィールド」をクリック

(30)

（７）入会申し込みフォーム発行

以下項目は「使用しない」を選択・注文番号・オーダー番号・エラーコード・エラー詳細「登録日時」は「登録日時自動取得」を選択「合計金額」は「固定値」を選択以下項目は「入力項目として使用する」を選択・氏名・氏名（ふりがな）・メールアドレス・電話番号・郵便番号・都道府県・住所

①フィールド毎に入力設定を行なう。

(31)

①「変更内容をフォームに反映」をクリック

(32)

①「フィールド別チェック」をクリック ②入力必須にする項目の「チェックする」を選択 ※入力必須でない場合は選択不要 ③「保存して次のフィールドへ」をクリック以降②、③を繰り返し ④「変更」をクリック

＜必須項目の設定＞

（７）入会申し込みフォーム発行

(33)

①「フィールド別チェック」をクリック ③「固定値」に“1000”を設定※ ②「合計金額」を選択 ④「変更」をクリック ⑤「変更内容をフォームに反映」をクリック

＜固定値の設定＞

※PGマルチペイメント側に「利用金額」として送信する値となります。当手順書では固定値として設定しておりますが、フローに合わせて・金額を変える・画面で選択された商品の金額をJS・PHP等で設定するを変更してください。

（７）入会申し込みフォーム発行

(34)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(35)

①「＋」ボタンをクリック

②「フォーム」をクリック

（８）決済結果受け取りフォーム発行

③「会員DB」を選択し、「新規作成」をクリック

(36)

②「新規作成」をクリック

③「引き続き設定を行う」をクリック ①「名前」「タイトル」を入力

(37)

①「使用フィールド」をクリック

（８）決済結果受け取りフォーム発行

②URLをメモ ※後続の「４．PGマルチペイメントサービス・SPIRAL連携（９）入会申し込みフォーム連携設定」（P.39〜）で使用する値となります。

(38)

①「全て使用しない」を選択

②「変更」をクリック

③「変更内容をフォームに反映」をクリック

(39)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(40)

①「サンキューページ」をクリック

②「ソースデザイン」をクリック

(41)

<?php // 【変更箇所】ショップID $ShopID = "xxxxxxxxxxxxx"; // 【変更箇所】ショップパスワード $ShopPassword = "xxxxxxxx"; // オーダーID $OrderID = $SPIRAL->getContextByFieldTitle("OrderID"); // 利用金額 $Amount = $SPIRAL->getContextByFieldTitle("Amount"); // 日時情報（yyyyMMddhhmmss書式） $registDate = $SPIRAL->getContextByFieldTitle("registDate"); $registDate = str_replace("年", "/", $registDate);

$registDate = str_replace("月", "/", $registDate); $registDate = str_replace("日", "", $registDate); $registDate = str_replace("時", ":", $registDate); $registDate = str_replace("分", ":", $registDate); $registDate = str_replace("秒", "", $registDate); $DateTime = date("YmdHis", strtotime($registDate));

// ショップ情報チェック文字列、MD5ハッシュ化 $seed = $ShopID."|".$OrderID."|".$Amount."|"."|".$ShopPassword."|".$DateTime; $ShopPassString = md5($seed); ?> <!DOCTYPE html>の上に、以下のPHPプログラムを追加。 【変更必要】が記載されている２つの項目を差替え $ShopID …P.5でメモした値 $ShopPassword …P.5でメモした値

（９）入会申し込みフォーム連携設定

(42)

ご登録ありがとうございました。<br>

「決済画面へ進む」ボタンより入会金のお支払をお願いします<br>

<input type="hidden" name="ShopID" value="<?php echo $ShopID; ?>">

<input type="hidden" name="DateTime" value="<?php echo $DateTime; ?>">

<input type="hidden" name="ShopPassString" value="<?php echo $ShopPassString; ?>">

（９）入会申し込みフォーム連携設定

【変更必要】が記載されている２つの項目を差替え １．接続先URL …P.8でメモしたURL ２．決済結果戻し先URL …P.37でメモしたURL PGマルチペイメント画面呼び出しformを追加

(43)

（９）入会申し込みフォーム連携設定

④「×」ボタンをクリック

(44)

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

手順

(45)

（１０）決済結果受け取りフォーム発行

①「入力ページ」をクリック

(46)

<?php

// 【変更対象】APIトークンタイトル

define ("API_TOKEN_TITLE" , "sample_demo");

// 【変更対象】DBタイトル

define ("DB_TITLE", "gmo_memberDB");

// APIトークンタイトル $SPIRAL->setApiTokenTitle(API_TOKEN_TITLE); // 決済結果取得 $orderID = $_POST["OrderID"]; // 注文番号 $ErrCode = $_POST["ErrCode"]; // エラーコード $ErrInfo = $_POST["ErrInfo"];// エラー詳細 // 決済結果 $result = null; if(empty($ErrCode)){ $result = 1; // 成功 }else{ $result = 2; // 失敗 } // 実行結果を格納 $db = $SPIRAL->getDataBase(DB_TITLE); $db->addEqualCondition("OrderID", $orderID); $db->doUpdate(array( “result” => $result, // 決済結果 "ErrCode" => $ErrCode, // エラーコード "ErrInfo" => $ErrInfo // エラー詳細 )); ?> <!DOCTYPE html>の上に、以下のPHPプログラムを追加。

（１０）入会申し込みフォーム連携設定

【変更必要】が記載されている２つの項目を差替え １．API_TOKEN_TITLE …P.15で発行したAPIのAPIタイトル ２．DB_TITLE …P.21で作成した会員DBのDBタイトル

(47)

（１０）入会申し込みフォーム連携設定

④「×」ボタンをクリック

PowerPoint プレゼンテーション

フォームからの申込時に

クレジットカード決済を行うシステムを作る

◆必要な契約

GMOペイメント PGマルチペイメントサービス

SPIRAL基本契約

SPIRALAPIオプション（分間10件以上決済の発生が想定される場合）

◆必要なスキル

HTML,CSS,PHP

※デザインにこだわらなければ不要

◆作業工数

3営業日

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム 連携設定

（１０）決済結果受け取りフォーム 連携設定

手順

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム 連携設定

（１０）決済結果受け取りフォーム 連携設定

手順

（１）ショップ情報取得

（１）ショップ情報取得

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携

（９）入会申し込みフォーム 連携設定

（１０）決済結果受け取りフォーム 連携設定

手順

（２）接続先URL取得

（２）接続先URL取得

１．必要な契約の準備

決済サービスの契約も併せて承る事が可能です。

弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定

（１）ショップ情報取得

（２）接続先URL取得

（３）テンプレート設定

３．SPIRALの設定

（４）SPIRALAPIの設定

（５）アプリ作成

（６）会員DB発行

（７）入会申し込みフォーム発行

（８）決済結果受け取りフォーム発行

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定

（９）入会申し込みフォーム連携設定

（１０）決済結果受け取りフォーム連携設定