決済ソリューションを統合する
紹介者を追跡し、協力者への支払いを行うには、まずエクソラ決済ステーションを統合する必要があります。要件は以下の通り:
- 決済ステーションは、パフォーマンスに最適化されたランディングページに統合されています。
- 決済ステーションは、パートナーネットワークプログラムでトラフィックを誘導するゲームのランディングページで使用される唯一の決済方法です。
トークンを取得する
決済インターフェースを統合するには、トークンを取得する必要があります。アクセストークンは、ゲームやユーザー、購入パラメータを識別する文字列です。
エクソラAPIは基本アクセス認証を採用しています。マーチャントIDをユーザー名、APIキーをパスワードとして指定します。
このデータを確認するには:
- パブリッシャーアカウントで、会社設定に移動します。
- 会社タブで、マーチャントIDをコピーします。
- APIキータブで、APIキーをコピーします。

トークンの取得はこのURLから:
- curl
https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token
user.id
、user.name
およびuser.email
でのユーザーに関する情報を渡します。user.id
パラメータには、ユーザーが覚えていて、後で自分でゲーム外で使用できる識別子を使用します。(たとえば、プッシュペイメントを使用してゲームの残高を補充する場合)。リクエストとレスポンスはどちらもJSON形式です。
以下に、エクソラPHP SDKを使用してPHPでトークンを取得する方法のサンプルコードを掲載します。他のプログラミング言語を使用している場合は、CURLタブをクリックしてCURLの例を見てみてください。
- php
- curl
<?php
use Xsolla\SDK\API\XsollaClient;
use Xsolla\SDK\API\PaymentUI\TokenRequest;
$tokenRequest = new TokenRequest($projectId, $userId);
$tokenRequest->setUserEmail('email@example.com')
->setExternalPaymentId('12345')
->setSandboxMode(true)
->setUserName('USER_NAME')
->setPurchase(9.99, 'USD');
$xsollaClient = XsollaClient::factory(array(
'merchant_id' => MERCHANT_ID,
'api_key' => API_KEY
));
$token = $xsollaClient->createPaymentUITokenFromRequest($tokenRequest);
curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
"user": {
"id": {
"value": "1234567"
},
"email": {
"value": "email@example.com"
}
},
"settings": {
"project_id": 14004,
"mode": "sandbox"
},
"purchase": {
"checkout": {
"amount": 9.99,
"currency": "USD"
}
}
}'
決済UIを開く
決済UIを開く方法は3つあります:
Xsollaと契約する前に、支払い処理のテストはサンドボックスモードでのみ利用可能です。万が一、エラーが発生した場合は、その説明をご覧ください。
サンドボックスモードで決済インターフェースを開くには、次のURLを使用してください。https://sandbox-secure.xsolla.com/
。
決済ステーション埋め込み
例:スクリプトの非同期読み込み
- html
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<button data-xpaystation-widget-open>Buy Credits</button>
決済ステーション埋め込みでは、postMessage経由で決済UIからのイベントを取得することができます。これらのイベントを分析システムに送信できます。イベント処理を分析システムで設定するには、担当のアカウントマネージャー、またはEメールでam@xsolla.comまでお問い合わせください。
ウェブサイトに決済UIを簡単に実装するには、当社のCDNからスクリプトをダウンロードしてください。このURLを使用して、あなたのウェブサイトにスクリプトを統合します。詳細については、GitHubリポジトリをご覧ください。
スクリプト初期化パラメータ:
パラメータ | 種類 | 説明文 |
---|---|---|
access_token | string | APIから受信したトークン。 必須。 |
sandbox | boolean | 決済処理をテストするには、true に設定します。sandbox-secure.xsolla.com がsecure.xsolla.com の代わりに使用されます。 |
lightbox | object | ライトボックスパラメータ(オブジェクト、デスクトップバージョンのみ)。 |
lightbox.width | string | ライトボックスのフレームの高さ。null の場合、決済ステーションの高さに依存します。既定はnull です。 |
lightbox.height | string | ライトボックスのフレームの高さ。null の場合、決済ステーションの高さに依存します。既定は100% です。 |
lightbox.zIndex | integer | 配置順序を定義します。既定は1000 です。 |
lightbox.overlayOpacity | integer | オーバーレイ不透明度(0〜1)。既定は.6 です。 |
lightbox.overlayBackground | string | オーバーレイの背景色。既定は#000000 。 |
lightbox.modal | boolean | true の場合、ライトボックスフレームを閉じることはできません。既定はfalse です。 |
lightbox.closeByClick | boolean | true の場合、オーバーレイをクリックするとライトボックスが閉じます。既定は true です。 |
lightbox.closeByKeyboard | boolean | true の場合、ESCを押すとライトボックスが閉じます。既定は true です。 |
lightbox.contentBackground | string | フレームの背景色。デフォルトは#ffffff 。これらの色の変更は、決済ステーション iframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。 |
lightbox.contentMargin | string | フレームマージン。既定は10px です。 |
lightbox.spinner | string | ローディングアニメーションのインジケータの種類。xsolla またはround に指定できます。既定はxsolla です。 |
lightbox.spinnerColor | string | スピナーの色。既定値はありません。 |
childWindow | object | 決済ステーションUIを含む子ウィンドウのオプション。モバイル版でサポートされています。 |
childWindow.target | string | 決済ステーションウィンドウを開く場所。_blank 、_self 、_parent に指定できます。既定は_blank です。 |
このスクリプトでは、決済インターフェースのイベントを追跡することができます。イベントの種類に応じて、Webページでさまざまな操作を実行できます。
イベントの一覧:
パラメータ | 説明文 |
---|---|
init | ウィジェットが初期化されました。 |
open | ウィジェットが開かれました。 |
load | 決済インターフェース(決済ステーション)が読み込まれました。 |
close | 決済インターフェース(決済ステーション)が閉じられています。 |
status | ユーザーはステータスページにいます。 |
status-invoice | ユーザーはステータスページにいます。支払いが進行中です。 |
status-delivering | ユーザーはステータスページにいます。支払いが完了しました。支払い通知が送信されました。 |
status-done | ユーザーはステータスページにいます。支払いはユーザーのアカウントに振り込まれます。 |
status-troubled | ユーザーはステータスページにいます。支払いに失敗しました。 |
自分で決済UIのオープニングを初期化したい場合は、こちらのリンクを利用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
テストを試したいときは次のURLをご使用くださいhttps://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
Iframe
お客様側で次のメカニズムを実装してください:
- デバイスの種類(デスクトップまたはモバイル)を指定し、トークンのsettings.ui.versionパラメータ内で送信する。
- postMessage経由で決済UIからイベントを受け取る。こちらのイベントは分析システムに送信できます。分析システムでイベント処理を設定する場合は、アカウントマネージャーにご連絡いただくか、am@xsolla.comまでメールでお問い合わせ下さい。
Iframeで決済UIを開く場合は、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
、ACCESS_TOKEN
は前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
新しいウィンドウ
新しいウィンドウで決済インターフェース開くには、次のリンクを使用してください:https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
、ACCESS_TOKEN
は前のステップで入手したトークンです。テストする場合は、次のURLをご使用ください:https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN
。
ウェブフックの設定
メッセージボディなしのHTTPコード204で応答することで、ウェブフックの受信を確認します。
ウェブフックのハンドラをテストするときは、プロジェクト設定 > ウェブフックセクションを開いてください。
支払処理をテストする
支払い処理をテスト方法:
サンドボックスモードでテストする
サンドボックスモードは独立した環境で、実際の支払いと拒否された支払いを除き、ライブ環境のすべての機能をサポートします。サンドボックスモードにアクセスするには、トークンを取得する際に"mode":"sandbox"
を送信します。
サンドボックスモードでは、次の方法で支払いプロセスをテストできます:
銀行カード決済をテストする
- サンドボックスモードで決済インターフェースを開く。
- 決済方法のグループからクレジット/デビットカードを選択する。
- 銀行カードの詳細情報を入力。その他のフィールドに任意の値を入力。間違った情報(カード番号または有効期限)を入力して、エラーを生成することも可能です。
カード情報に加えて、以下の条件のうち少なくともひとつに該当する場合は、郵便番号の指定が必要です:
- ユーザーの国は、米国またはカナダです。
- 銀行識別番号(BIN)は、カードが米国で発行されたことを示します。
有効な郵便番号(例:12345)を指定することができます。これは消費税率を決定するもので、テスト支払の進行に影響を与えるものではありません。
サンドボックスモードでは、テストバンクカードのみを使用できます。サンドボックス銀行カードでの決済は、次の通貨で行うことができます:USD、EUR、RUB、GBP、AED、ALL、AMD、ARS、AUD、AZN、BGN、BRL、BYN、CAD、CHF、CLP、CNY、COP、CZK、DKK、DZD、EGP、GEL、HKD、HRK、HUF、IDR、ILS、INR、ISK、JPY、KES、KGS、KRW、KZT、MAD、MDL、MKD、MNT、MXN、MYR、NGN、PEN、PHP、PKR、PLN、RON、RSD、SAR、SEK、SGD、THB、TRY、TWD、UAH、UYU、UZS、VEF、VND、ZAR。
PayPal支払いのテスト
- PayPalサンドボックスモードのアカウントを作成します:
- Open the PayPal開発者のウェブサイトを開きます。
- アカウントにログインするか、新規にアカウントを作成します。
Sandbox > Accounts に移動します。Sandbox Account セクションで、Create account をクリックします。- モーダルウィンドウでは、
Personal のアカウントタイプと国を選択します。 Create をクリックします。作成されたアカウントは、サンドボックスのアカウントリストに表示されます。
- サンドボックスモードで決済UIを開きます。
- PayPalの決済方法を選択します。
- 決済ウィンドウで必要な情報を入力してください。
Pay Now をクリックします。PayPalアカウントにログインするためのウィンドウにリダイレクトされます。
- テスト支払いプロセスを完了するには、ステップ1で作成したサンドボックスアカウントに関する情報を入力します:メールアドレスの
Email ID とパスワードのSystem Generated Password 。この情報を見つけるには:- PayPal開発者のウェブサイトでアカウントにログインします。
Sandbox > Accounts に移動します。Sandbox Account セクションで、サンドボックスアカウントを選択します。- •••をクリックして、ドロップダウンリストから
View/edit account を選択します。
Pay Now をクリックします。
また、既に作成されているサンドボックスのアカウント情報を利用することも可能です:
sb-xmxij16980134@business.example.com | oi9_m_KW |
sb-p7pju16979920@business.example.com | 7%%p8ioS |
実際の支払いでテストする
"mode":"sandbox"
を削除します。実際の支払いでテストするには、銀行カードの利用をお勧めします:
- 決済UIを開きます。
- 決済方法のクレジット/デビットカードグループを選択します。
- 有効な銀行カード情報を入力してください。
- 支払いが行われた後、パブリッシャーアカウントで、サポート > トランザクション検索に移動します。
- ステータスが完了のテストトランザクションを選択し、返金をクリックします。
ライブに行く
実際の支払いの処理を開始するには:
- エクソラとの契約に署名したことを確認してください。
secure.xsolla.com
リンクで決済ステーションをを開く。または決済ステーション埋め込みスクリプトでsandbox-secure.xsolla.com
からsecure.xsolla.com
まで変更する。- トークンを取得する時、
"mode":"sandbox"
を外す。
誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。