Appearance
投げ銭
概要
投げ銭機能を提供します。
投げ銭は複数のイベントに対して紐づける事が可能で、例えばイベント 1、2、3 があった時に
- 「山田太郎への投げ銭」はイベント 1 でのみ支払い可能
- 「ライブ会場への寄付」は全てのイベントで支払い可能
といった運用が可能です。
サンプル
ここでは、投げ銭を作成してフロントエンド側で情報を取得するまでの流れを解説します。
TIP
ステップ 1 ～ 3 は、Hedgehog Dashboard でも同様の操作が可能です。
WARNING
以下サンプルは、環境変数に STAGE_UUID がセットされている前提になります。
1. イベントを作成する admin
まずはイベント作成します。
ts
const event = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.admin.create({
title: "〇〇イベント",
isPublic: true,
isFree: true,
startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
image: new File([], ""), // 本来はイベントのタイトル画像を入力します
});2. 投げ銭を作成する admin
イベントと紐づける投げ銭を作成します。
投げ銭作成のためには支払先情報が必要なので、先に支払い先情報を取得し、得られたデータを投げ銭に紐づけます。
ts
// 支払先情報取得
const payee = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.admin.payee.list();
// 投げ銭作成
const tipping = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.tipping.admin.create({
title: "山田太郎",
image: new File([], ""), // 本来は商品画像を入力します
maxAmount: 10000,
publishFlag: true,
stripeAccountUuid: payee[0].uuid,
});3. 投げ銭をイベントに紐づける admin
作成したイベントと投げ銭を紐づけます。
ts
await tipping.admin.associate(event.uuid);ここまでで、投げ銭の作成は完了となります。
4. フロントエンドを作成する
イベントに使用する web サイトを作成します。イベントの趣旨に沿った web サイトを、自由に作成してください。
5. 投げ銭情報を取得する
イベントに紐づく投げ銭をすべて取得します。
ts
const products = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.ref("イベントのUUID")
.products()
.all();
console.log(products[0].name); // 記念Tシャツあるいは、イベントに関わらず全ての商品を取得する事も可能です。
ts
const allProducts = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.product.list()
.all();ここでは一覧取得時に all() を使用していますが、数が多くなるようであれば page() を使用して取得数を制限し、フロントエンド上でもページネーションを実装する必要があるでしょう。
6. 投げ銭の購入ダイアログを実装する
WARNING
ダイアログのリニューアルを検討しているため、リニューアル後に追記します。