新機能 🚀
-
インラインチェックアウト - 完全に埋め込まれたチェックアウト体験 (BETA)
Dodo Paymentsのチェックアウトを直接ウェブサイトに埋め込んで、シームレスでブランド化された支払い体験を提供します。モーダルとして開くオーバーレイチェックアウトとは異なり、インラインチェックアウトは支払いフォームをページレイアウトに直接埋め込みます。
- 完全統合: ウェブサイトとシームレスに融合するチェックアウト体験を作成
- カスタム注文サマリー: チェックアウトとリアルタイムで同期するカスタムUIを構築
- 最大の制御: チェックアウトのレイアウトとデザインを完全に制御
- PCI準拠: Dodo Paymentsはすべての機密支払い情報を安全に処理
- リアルタイム同期: SDKイベントを使用してUIをチェックアウト状態と同期
仕組み
displayType: 'inline' を使用して SDK を初期化し、チェックアウトをコンテナ要素に埋め込みます:
import { DodoPayments } from "dodopayments-checkout";
// Initialize the SDK for inline mode
DodoPayments.Initialize({
mode: "test",
displayType: "inline",
onEvent: (event) => {
if (event.event_type === "checkout.breakdown") {
// Update your UI with real-time tax and total calculations
const breakdown = event.data?.message;
}
},
});
// Open checkout in a specific container
DodoPayments.Checkout.open({
checkoutUrl: "https://test.dodopayments.com/session/cks_123",
elementId: "dodo-inline-checkout" // ID of the container element
});
主な機能
- Real-time breakdown events: 顧客が情報を入力するたびに
checkout.breakdown イベントを受信します
- Custom order summaries: リアルタイムで更新される独自の価格表示を構築できます
- Seamless integration: チェックアウトフレームが支払い収集を処理しつつ、レイアウトは自分で制御できます
- SDK methods:
open()、close()、isOpen() を使用してチェックアウトをプログラム的に制御します
結果:ブランドに合わせた完全統合されたチェックアウト体験で、支払いフローを最大限制御できます。
チェックアウトデザインを最大限制御したい場合はインラインチェックアウトを使用し、既存ページへの変更を最小限に抑えてより高速な統合が必要な場合はoverlay checkoutを使用します。
詳細はこちら: インラインチェックアウトガイド
-
既存の支払い方法を使用して支払い、サブスクリプション、チェックアウトを作成する
既存のお客様が保存した支払い方法を利用することでチェックアウトフローを効率化します。新しい payment_method_id パラメータを使用すると、お客様が以前に保存した支払い方法を使用して支払い、サブスクリプション、またはチェックアウトセッションを作成できます。
- 迅速なチェックアウト: リピート顧客のために支払い方法の収集をスキップ
- ワンクリック購入: 保存された支払い方法で即時購入を有効化
- サブスクリプション管理: 既存の支払い方法を使用してサブスクリプションを簡単に作成
- コンバージョンの向上: リピート顧客のチェックアウトの摩擦を減少
仕組み
チェックアウトセッション、支払い、サブスクリプションを作成する際には payment_method_id を使用します:
Checkout Sessions
One-Time Payments
Subscriptions
const session = await client.checkoutSessions.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
customer: {
customer_id: 'cus_123'
},
payment_method_id: 'pm_abc123',
confirm: true
});
const payment = await client.payments.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
customer_id: 'cus_123',
payment_method_id: 'pm_abc123'
});
const subscription = await client.subscriptions.create({
customer_id: 'cus_123',
product_id: 'prod_subscription',
payment_method_id: 'pm_abc123'
});
payment_method_id をチェックアウトセッションで使用する場合は、confirm を true に設定し、既存の customer_id を提供する必要があります。支払い方法は支払いの通貨での適格性が検証されます。
支払い方法は顧客のものであり、支払い通貨に対応している必要があります。検証に失敗すると、リクエストはエラーを返します。
-
ダッシュボードでのサブスクリプションプランの変更と次回請求日更新
ダッシュボードから直接サブスクリプションプランを管理し、強化された制御を提供します。サブスクリプションプランを変更し、次回請求日を単一のアクションで更新できるようになり、サブスクリプション管理に完全な柔軟性を提供します。
ダッシュボード機能
- プラン変更: 1クリックでサブスクリプションをアップグレードまたはダウングレード
- 請求日制御: プラン変更時に次回請求日を更新
- 按分オプション: プラン変更時の按分処理方法を選択
- 視覚的プレビュー: 確認前にプラン変更が請求に与える影響を正確に確認
使用例
- 顧客サポート: 顧客のリクエストに応じてサブスクリプションプランを迅速に調整
- プロモーションアップグレード: 特定の請求日を持つ顧客を一時的にアップグレード
- プラン移行: サブスクリプションティア間で顧客をスムーズに移行
- 請求の整合性: 複数のサブスクリプション間で請求日を整合させる
結果:ダッシュボードからのサブスクリプション管理制御を完全に行え、一般的なサブスクリプション調整に関する API 呼び出しの必要性を減らします。
ダッシュボードで素早くサブスクリプションプランを変更し、アプリケーション内のプログラム的なサブスクリプション管理には API を使用します。
-
支払いURLの短縮リンク
新しい短縮リンク機能を使用して、クリーンで共有しやすい支払いリンクを生成します。短縮リンクはカスタムスラッグを持つ短縮されたチェックアウトURLを提供し、顧客と共有したり、ウェブサイトに埋め込んだりするのが簡単です。
- クリーンなURL: 長い支払いURLを短く、ブランド化されたリンクに置き換え
- 信頼性の向上: 顧客の信頼を築くプロフェッショナルな外観のリンク
- 共有の容易さ: SMS、メール、またはソーシャルメディアに最適な簡素化されたURL
- カスタムスラッグ: 製品のための記憶に残るブランド化された短縮リンクを作成
仕組み
チェックアウトセッションまたは支払いリンクを作成する際に短縮リンクを有効にします:
Checkout Sessions
Payment Links
const session = await client.checkoutSessions.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
short_link: true,
return_url: 'https://yourapp.com/success'
});
const payment = await client.payments.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
short_link: true,
return_url: 'https://yourapp.com/success'
});
結果:共有しやすく、よりプロフェッショナルな外観の短縮支払いリンクにより、コンバージョン率と顧客信頼を向上させます。
-
redirect_immediately フラグ - 支払い成功ページをスキップ
新しい redirect_immediately フラグでチェックアウトフローを制御します。有効にすると、支払い完了後すぐに顧客がリダイレクトされ、デフォルトの成功ページをスキップしてより迅速でスムーズな体験を提供します。
使用例
- 迅速なチェックアウトフロー: 中間ページをスキップすることで摩擦を減少
- カスタム成功ページ: ブランド化された成功ページに直接リダイレクト
- モバイル最適化: 即時リダイレクトでモバイルチェックアウト体験を改善
- 埋め込みチェックアウト: オーバーレイまたは埋め込みチェックアウトフローとシームレスに統合
仕組み
チェックアウトセッション、支払い、またはサブスクリプションで即時リダイレクトを有効にします:
Checkout Sessions
One-Time Payments
Subscriptions
const session = await client.checkoutSessions.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
feature_flags: {
redirect_immediately: true
},
return_url: 'https://yourapp.com/success'
});
const payment = await client.payments.create({
product_cart: [{ product_id: 'prod_123', quantity: 1 }],
redirect_immediately: true,
return_url: 'https://yourapp.com/success'
});
const subscription = await client.subscriptions.create({
customer_id: 'cus_123',
product_id: 'prod_subscription',
redirect_immediately: true,
return_url: 'https://yourapp.com/success'
});
デフォルトの支払い成功ページよりも優れたユーザー体験を提供するカスタム成功ページがある場合は redirect_immediately: true を使用します。
redirect_immediately が有効な場合、支払い完了後すぐに顧客はあなたの return_url にリダイレクトされ、デフォルトの成功ページは完全にスキップされます。
-
オンデマンドサブスクリプション - すべてのビジネス向けに利用可能
オンデマンドサブスクリプションはすべてのビジネス向けに有効化され、使用ベースおよびメーターサービスの柔軟な請求制御を提供します。
これにより可能になること
- 使用ベースの請求: 実際の使用に基づいて顧客に請求するサブスクリプションを作成
- 柔軟な請求サイクル: 固定の間隔ではなく、オンデマンドで顧客に請求
- メーターサービス: API使用量、ストレージ、計算時間、その他のメーターリソースに最適
- 手動請求制御: 必要に応じて手動で請求を作成し、請求タイミングを完全に制御
仕組み
オンデマンドサブスクリプションを作成し、必要に応じて顧客に請求します:
// Create an on-demand subscription
const subscription = await client.subscriptions.create({
customer_id: 'cus_123',
product_id: 'prod_api_access',
on_demand: true
});
// Charge the customer when usage occurs
await client.subscriptions.createCharge(subscription.id, {
amount: 4900,
currency: 'USD',
description: 'API usage for September: 1,000 requests'
});
結果:請求タイミングと金額を完全に制御でき、従量課金型ビジネスモデルに最適です。
詳細はこちら: オンデマンドサブスクリプション
-
一般的なバグ修正と改善
このリリースには、パフォーマンスの向上、UIの洗練、そしてより信頼性の高いスムーズな体験のための小さなバグの修正が含まれています。