フォームからの申込時にクレジットカード決済を行うシステ …...2017/06/21...

1

フォームからの申込時にクレジットカード決済を行うシステムを作る

◆必要な契約GMOペイメント PGマルチペイメントサービスSPIRAL基本契約SPIRALAPIオプション（分間10件以上決済の発生が想定される場合）

◆必要なスキルHTML,CSS,PHP※デザインにこだわらなければ不要

◆作業工数3営業日

2

１．必要な契約の準備決済サービスの契約も併せて承る事が可能です。弊社、営業担当までお問い合わせください。

２．PGマルチペイメントサービス連携設定（１）ショップ情報取得（２）接続先URL取得（３）テンプレート設定

３．SPIRALの設定（４）SPIRALAPIの設定（５）アプリ作成（６）会員DB発行（７）入会申し込みフォーム発行（８）決済結果受け取りフォーム発行

４．PGマルチペイメントサービス・SPIRAL連携（９）入会申し込みフォーム連携設定（１０）決済結果受け取りフォーム連携設定

手順

3





手順

4

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

②該当のSHOPをクリック

（１）ショップ情報取得

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

5

④「ショップ」の「ID」「パスワード」をメモ。

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

（１）ショップ情報取得

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

6





手順

7



（２）接続先URL取得

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

8

①「API情報」をクリック

③「リンク・タイプ」の「決済選択呼出し」の接続先URLをメモ。

※後続の「４．PGマルチペイメントサービス・SPIRAL連携（９）入会申し込みフォーム連携設定」（P.39〜）

で使用する値となります。

（２）接続先URL取得

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

9





手順

10



（３）テンプレート設定

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

決済画面（SPIRALからPGマルチペイメントサービスへ遷移した先の画面）の設定をおこないます。

１．提供されるテンプレート画面を利用する２．テンプレートをカスタマイズし、画面デザインを統一する

当手順書では「１．提供されるテンプレート画面を利用する」手順を記載いたします。

11

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

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

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


12

②「実行」をクリック

①以下項目を選択し、「確認」をクリック

サンプル種別：PC用対象決済：クレジットカード（決済用）共通テンプレートも反映する：チェックする対象No.：1対象種類：pc


13


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

詳細は以下をマニュアルを参照ください。１．サイト管理画面もしくはショップ管理画面にログイン２．「ドキュメント」クリック３．「リンクタイプ」

【リンクタイプ（テンプレート作成ガイド）】の「1.3.2. ご利用形態ごとのテンプレート必須・不要」

14





手順

15

（４）SPIRALAPIの設定

①「開発」をクリック

②「スパイラルAPI」をクリック

③「トークン発行」をクリック

④「タイトル」を入力、メモ

※後続の「４．PGマルチペイメントサービス・SPIRAL連携（１０）決済結果受け取りフォーム連携設定」（P.44〜）で使用する値となります。

⑤「発行する」をクリック

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

16





手順

17

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

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

①「アプリ」をクリック

（５）アプリ作成

18

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

③「引き続き設定を行う」をクリック

【PGマルチペイメントサービス】会員登録〜決済

gmopayment

①「名称」「タイトル」を入力

（５）アプリ作成

19





手順

20

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

②「通常DB」をクリック

（６）会員DB発行

21

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


①「名前」「タイトル」「レコード」を入力

22

フィールドに自動的に値を生成する機能の設定仕様です。設定方法は次ページで解説します

「登録日時」「オーダーID」「合計金額」はPGマルチペイメント呼び出し時に必須となります。※それ以外は任意項目になりますので自由に設定ください


※赤枠部分の差替えキーワードはプログラム部分で利用しますので本サンプルと同じ名称で設定してください。

①DBの構造を設定。本ページ下部のテーブルを参照してDBを設計してください※詳細手順は下記URLを参照してくださいhttp://support.smp.ne.jp/function/35

23

①「オーダーID」の歯車マークをクリック

②フィールド値自動生成トリガの動作で「値が存在する場合何もしない」を選択

③生成する値で「システムID」「10桁」を選択、接頭文字列は任意の英字を入力

④「詳細を閉じる」をクリック


＜オーダーIDの設定＞

24

①「決済結果」の歯車マークをクリック

②ラベルの「＋」ボタンをクリック

③１に「成功」２に「失敗」の文言入力

④「詳細を閉じる」をクリック

＜決済結果の設定＞


25

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

②「OK」をクリック

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


26





手順

27

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

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

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

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

28



①「名前」「タイトル」を入力


29

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


30

②「変更」をクリック


以下項目は「使用しない」を選択・注文番号・オーダー番号・エラーコード・エラー詳細

「登録日時」は「登録日時自動取得」を選択

「合計金額」は「固定値」を選択

以下項目は「入力項目として使用する」を選択・氏名・氏名（ふりがな）・メールアドレス・電話番号・郵便番号・都道府県・住所

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

31

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


32

①「フィールド別チェック」をクリック

②入力必須にする項目の「チェックする」を選択※入力必須でない場合は選択不要

③「保存して次のフィールドへ」をクリック以降②、③を繰り返し

④「変更」をクリック

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

＜必須項目の設定＞


33

①「フィールド別チェック」をクリック

③「固定値」に“1000”を設定※

②「合計金額」を選択

④「変更」をクリック

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

＜固定値の設定＞

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


34





手順

35

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

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

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

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

36



①「名前」「タイトル」を入力


37

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


②URLをメモ

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

38

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


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


39





手順

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

<div class="sub_text">ご登録ありがとうございました。<br>「決済画面へ進む」ボタンより入会金のお支払をお願いします<br>

<form action="https://pt01.mul-pay.jp/link/xxxxxxxxxxxxx/Multi/Entry" method="POST"><input type="hidden" name="ShopID" value="<?php echo $ShopID; ?>"><input type="hidden" name="OrderID" value="%val:usr:OrderID%"><input type="hidden" name="Amount" id="Amount" value="%val:usr:Amount%"><input type="hidden" name="DateTime" value="<?php echo $DateTime; ?>"><input type="hidden" name="ShopPassString" value="<?php echo $ShopPassString; ?>"><input type="hidden" name="RetURL" value="https://www.pi-

pe.co.jp/regist/is?SMPFORM=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”><input type="hidden" name="UseCredit" value="1"><input type="hidden" name="JobCd" value="CAPTURE"><input type="submit" name="submit" class="submit" value="決済画面へ進む"></form>

</div>



１．接続先URL…P.8でメモしたURL

２．決済結果戻し先URL…P.37でメモしたURL

PGマルチペイメント画面呼び出しformを追加

43




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

①前ページで編集した内容を貼付

44





手順

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

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



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

①前ページで編集した内容を貼付

フォームからの申込時に クレジットカード決済を行うシステ …...2017/06/21...

Documents

フォームからの申込時にクレジットカード決済を行うシステ …...2017/06/21...