Skip to main content

Integration Guide

ウェブブラウザに都度決済機能を実装する​

対象となるサービス​

  • EC の決済
  • デジタルコンテンツにおける一過性の決済
  • コインやアイテムなどの購入

本機能によってできること​

  • ユーザーが Jamm で決済することを選択できる
  • 選択したあとにユーザーが必要な行動を取り決済手続きを完了する
  • 決済手続きが完了してから、ユーザーが自社サイトに戻り、決済完了画面を確認する

実装に必要な手順​

  • サービス内に Jamm 決済オプションボタンを実装
  • ユーザーを Jamm の指定するリンクに遷移させる
  • ユーザー決済完了の webhook を受け取る

1. バックエンドにJamm決済機能を実装する

Step 1 of 3
1

サーバーを設定する

Jamm SDKのインストール

Gemfile + ターミナル
1# Gemfile
2gem "jamm", ">= 1.1.1"
3

4# ターミナル
5$ bundle install

GemfileにJamm SDKを追加してから、bundle install を実行してください。bundle installを実行するとGemfileとGemfile.lockが更新されますので、gitにコミットしてください。

2

非公開鍵を設定する

server.rb
1require "jamm"
2

3Jamm.configure(
4env: ENV['JAMM_ENVIRONMENT'],
5client_id: ENV['JAMM_MERCHANT_CLIENT_ID'],
6client_secret: ENV['JAMM_MERCHANT_CLIENT_SECRET']
7)
3

リダイレクト用決済リンクを取得する

server.rb
1result = Jamm::Payment.on_session(
2

3# 購入者の情報をセット
4

5buyer: Jamm::OpenAPI::Buyer.new(
6 email: 'foo1@example.com', # 必須
7 force_kyc: true, # 必須
8 ),
9

10 # 決済情報をセット
11

12 "charge": {
13 "price": 1000,
14 "description": "Test charge",
15 "one_off_charge": true
16 },
17

18 # 遷移先をセット
19

20 redirect: Jamm::OpenAPI::URL.new( # 決済成功時のリダイレクト URL
21 success_url: 'https://example.com/success', # 決済失敗時のリダイレクト URL
22 failure_url: 'https://example.com/fail'
23 )
24)
25

26puts result.to_hash.to_json

2. Jamm決済用のボタンを実装する

Step 1 of 3
1

Jamm SDKを組み込む

Install the Jamm JS library

App.js
1import { Jamm } from '@jamm/jammpay-js';

importを行いたい箇所に実装してください

  • page
  • payment context
  • layout
  • main component
  • HTML script tagなど
2

加盟店情報を設定する

App.js
1import { Jamm } from '@jamm/jammpay-js';
2

3Jamm.init({
4 merchantId: "YOUR_MERCHANT_ID", // Required
5 language: 'en', // Optional: 'en' or 'ja' (defaults to 'en')
6});
3

Jammの決済ボタンを表示させる

Add the Jamm payment button to your page

App.js
1import { Jamm } from '@jamm/jammpay-js';
2

3Jamm.setupPayment({
4 mode: "default",
5 containerId: "jamm-button",
6 style: "default", // 'default', 'text-only', 'icon-only', or 'text-with-icon'
7 size: 'medium', // 'small', 'medium', or 'large'
8

9 getRedirectUrl: async () => {
10    // call your server here to prepare payment
11    const response = await fetch('/api/create-payment', {
12    method: 'POST',
13    headers: { 'Content-Type': 'application/json' },
14    body: JSON.stringify({ amount: 1000 })
15 });
16    const data = await response.json();
17    return data.redirectUrl;
18 },
19});
20

21// render:
22// <div id="jamm-button"></div>

こちらJamm決済ボタンでの実装になりますが、radioでの実装も可能です

3. 決済完了のwebhookを受け取る

Step 1 of 3
1

webhook URLを登録する

Provide webhook URL to Jamm

加盟店ダッシュボードからwebhook URLを設定

2

決済成功webhookを受け取る

server.rb
1# 例: Jamm Webhook用のルートを設定
2

3POST /webhooks/jamm
4

5# Webhook メッセージを受け取り、メッセージ種別によって処理を行う
6

7require 'jamm'
8

9def create
10msg = Jamm::Webhook.parse(request.body.read)
11

12  # 受け取ったメッセージをS3などにバックアップ (略)
13

14  case msg.event_type
15    when Jamm::EventType.EVENT_TYPE_CHARGE_SUCCESS
16    # 決済完了の情報をもとに自社の決済 DB を更新
17      msg.content.charge  # その他決済に関する情報が含まれます（省略）
18  end
19

20end
3

決済後処理を実施する

決済関連DBの更新、発送、経理システムとの連携など必要な後処理を実施！