ナビ
楽天ペイ(オンライン決済 LITE版)
メニュー

お支払いボタンの作成方法

1種類の商品のみでのお支払いの場合

1つの商品の購入もしくは、合計金額で購入を管理する場合には以下のようなJavascriptコードを、御社サイトに埋め込んでください。
data-keyにSandbox環境用またはLive環境テスト用のPublic Keyが設定されている場合はローカル環境にてご確認できますが、Live環境本番用の場合はセキュリティ上ローカル環境では動作しません。必ずインターネット上に掲載した上でご確認下さい。

<script
    src="https://lite.checkout.rakuten.co.jp/s/js/checkout-lite-v1.js"
    data-key="ここに発行されたPublic Keyを入れてください"
    class="checkout-lite-button"
    data-item-id-1="itemId-001"
    data-item-name-1="商品名"
    data-item-unit-price-1="2000"
    data-item-quantity-1="1">
</script>

data-key: 楽天から発行するPublic Key(必須)

英数字
制限
楽天から発行するPublic Key
説明
申し込み時に発行されます。
Live環境の本番用・テスト用またはSandbox環境いずれかのPublic Keyをセットしてください。

class: ボタン作成(必須)

文字列
制限
固定値: "checkout-lite-button"
説明
ボタン作成のための設定値

data-item-id-1: 商品ID(必須)

英数字、記号は-[ハイフン]のみ可
制限
最大100桁まで登録可能
説明
商品単位連携の場合 - 商品を特定する場合のID
合計金額連携の場合 - 注文を特定するID

data-item-name-1: 商品名(必須)

文字列
制限
全角半角合わせて255文字
商品名に使用できる文字
説明
商品単位連携の場合 - 商品の名称
合計金額連携の場合 - 1回の注文の名称

data-item-unit-price-1: 商品単価(必須)

数値
制限
最大7桁
説明
商品単位連携の場合 - 商品の金額
合計金額連携の場合 - 合計金額

data-item-quantity-1: 個数(必須)

数値
制限
最大3桁
説明
商品単位連携の場合 - 商品の個数
合計金額連携の場合 - 1回の注文の個数

data-cart-id: カートID

英数字、記号は-[ハイフン]のみ可
制限
最大255桁まで登録可能
説明
楽天側の注文と御社サイトの注文番号を照合する項目
※楽天側では、この番号が一意であるかどうかはチェックしません

data-image: お支払いボタンイメージ

0 - 3
説明
お支払いボタン - デフォルトdata-image="0" (デフォルト)
お支払いボタン - 白data-image="1"
お支払いボタン小 - 赤data-image="2"
お支払いボタン小 - 白data-image="3"

data-callback: 関数名

関数名
制限
callback関数
説明
決済完了後、パラメータを受け取りハンドリングしたい場合はdata-callback属性にcallback関数名を指定してください。
取得できる値はCharge オブジェクトを参照してください。
<script>
function callback(data){
    alert(data.id);		// 注文番号
    alert(data.open_id);	// open_id
    alert(data.items[0].id);	// 1つめの商品の商品ID
}
</script>

data-sig: ハッシュ化した文字列

説明
data-sigの作成方法
注文情報の入力値の文字列を全て";"でつなげ、全体をHMAC-SHA-1でPrivate Keyをキーにハッシュ化したものをdata-sigに設定します。
"data-key";"data-item-id-1";"data-item-name-1";"data-item-unit-price-1";"data-item-quantity-1";"data-cart-id";

複数種類の商品でのお支払いの場合

複数商品の購入を管理する場合には、以下のようなJavascriptコードを御社サイトに埋め込んでください。
商品は最大50個まで送ることが出来ます。 data-keyにSandbox環境用またはLive環境テスト用のPublic Keyが設定されている場合はローカル環境にてご確認できますが、Live環境本番用の場合はセキュリティ上ローカル環境では動作しません。必ずインターネット上に掲載した上でご確認下さい。

<script
    src="https://lite.checkout.rakuten.co.jp/s/js/checkout-lite-v1.js"
    data-key="ここに発行されたPublic Keyを入れてください"
    class="checkout-lite-button"
    data-item-id-1="itemId-001"
    data-item-name-1="商品名"
    data-item-unit-price-1="2000"
    data-item-quantity-1="1"
    data-item-id-2="itemId-002"
    data-item-name-2="商品名(2)"
    data-item-unit-price-2="1000"
    data-item-quantity-2="2"
    (省略)
    data-item-id-50="itemId-050"
    data-item-name-50="商品名(50)"
    data-item-unit-price-50="100"
    data-item-quantity-50="1">
</script>

お支払いボタン作成時のエラーについて

data-keyにSandbox環境またはLive環境テスト用のPublic Keyが設定されているときに、お支払いボタンのJavascriptに不備があると下記のようなボタンイメージになると共に、以下のようなメッセージがポップアップで表示されます。
まずはSandbox環境用またはLive環境テスト用のPublic Keyにてこれらのエラーが発生しないよう十分にテストされるのを推奨します。 data-keyにSandbox環境用またはLive環境テスト用のPublic Keyが設定されている場合はローカル環境にてご確認できますが、Live環境本番用の場合はセキュリティ上ローカル環境では動作しません。必ずインターネット上に掲載した上でご確認下さい。

エラー ご購入サイトにお問い合わせしてください

以下のメッセージが、ポップアップで表示されます。

  • data-keyが未設定です。
  • 商品の枝番が連番になっていません。
  • 商品数が50件を超えています。
  • data-item-id-nが未設定です。
  • data-item-id-nに英数字と記号(-_)以外が含まれています。
  • data-item-id-nが100文字を超えています。
  • data-item-id:{商品ID}が重複しています。
  • data-item-name-nが未設定です。
  • data-item-name-nが255文字を超えています。
  • data-item-unit-price-nが未設定です。
  • data-item-unit-price-nに数値以外が含まれています。
  • data-item-unit-price-nが7桁を超えています。
  • マイナス金額の商品は2つ以上設定できません。
  • data-item-quantity-nが未設定です。
  • data-item-quantity-nに数値以外が含まれています。
  • data-item-quantity-nが3桁を超えています。
  • data-cart-idに英数字と記号(-)以外が含まれています。
  • data-cart-idが255文字を超えています。
  • 注文合計金額が7桁を超えています。

商品名で使用できる文字

商品名に使用できる文字は下記になります。商品名に下記以外の文字が含まれている場合、エラーとなります。
全角文字 機種依存文字を除く全ての全角文字か利用できます。
0~9 数字
a~z 小文字アルファペット
A~Z 大文字アルファペット
! 感嘆符
" ダブルクォーテーション
# シャープ
$ ドル
% パーセント
& アンパサンド
' アポストロフィ
( 開く括弧
) 閉じる括弧
* アスタリスク
+ プラス
, コンマ
- ハイフン
. ピリオド
/ スラッシュ
  改行されないスペース
: コロン
; セミコロン
< 小なり
= イコール
> 大なり
? 疑問符
@ アットマーク
[ 開く角括弧
\ バックスラッシュ
] 閉じる角括弧
^ キャレット
_ アンダーバー
` バッククォート
{ 開く中括弧
| 縦線
} 閉じる中括弧
~ チルダ

使用できるカード情報 [Sandbox環境]

Sandbox環境では、本物のクレジットカードの代わりに模擬のクレジットカード情報を使用して決済の流れをご確認頂くことが出来ます。
Sandbox環境で作成した注文ボタンを押下し、お支払い画面に進むと利用カードを選択できます。こちらにてカードが選択できますので、貴社にてお試しいただきたい挙動のカード番号を選択してください。

  1. 1. 確認画面
  2. 2. 確認画面(クレジットカード選択)

使用できるクレジットカード情報

クレジットカード番号
クレジットカード番号 カードブランド
XXXX-XXXX-XXXX-4242 VISA
XXXX-XXXX-XXXX-4444 MASTER
XXXX-XXXX-XXXX-0000 JCB
XXXX-XXXXXX-X0005 AMEX
XXXX-XXXX-XXXX-5904 DINERS
クレジットカード番号以外の情報

模擬のクレジットカード番号を使用する場合、番号以外の項目は任意の値を入力することができます。その際は下記の条件をご確認の上、お試し下さい。

項目 条件
ポイント利用数 利用なし または、50~100,000の数値
セキュリティコード 任意の3桁か4桁の数字

意図してエラーを発生させられるクレジットカード情報

Sandbox環境では、カード利用時に発生しうるエラーを下記のクレジットカード番号を使用することで挙動を確認することができます。
以下のクレジットカード番号ではお支払いが完了しないため、注文は作成されません。

クレジットカード番号
クレジットカード番号 カードブランド 備考
XXXX-XXXX-XXXX-0002 VISA カード決済に失敗するクレジットカード番号です
XXXX-XXXX-XXXX-0127 VISA セキュリティコード認証に失敗するクレジットカード番号です
XXXX-XXXX-XXXX-0069 VISA 有効期限チェックに失敗するクレジットカード番号です
XXXX-XXXX-XXXX-0119 VISA 処理中でエラーが発生するクレジットカード番号です