はじめに

こんにちは。株式会社UPSIDER 支払い.com Techチームの Akanuma です。 2025年7月1日の下記プレスリリースで発表したとおり、支払い.com はパートナー企業を通じたサービス提供を開始しました。

本記事では、パートナー企業が自社ブランドで支払い.comの機能を提供するために実装した技術的な工夫について、開発者の視点から解説します。特に、動的なブランドテーマ切り替えとセキュアなWebコンポーネント埋め込み機能の設計思想に焦点を当てます。

パートナー企業を通じたサービス提供とは

支払い.com のパートナー企業を通じたサービス提供は、パートナー企業が自社ブランドで請求書カード払いサービスを提供できるソリューションです。

このソリューションでは、ユーザーとの契約締結・クレジットカード情報の審査・カスタマーサポートなどの運用を UPSIDER が担当するため、パートナー企業は金融サービス提供のための専門的な仕組みを構築する必要がありません。これにより、パートナー企業はリスクを抑えてサービスを提供できます。

また、レベニューシェアモデルによる報酬体系も用意しており、パートナー企業にとって新たな収益基盤としてもご活用いただけます。

技術的な課題と解決アプローチ

パートナー企業を通じたサービス提供を実現するにあたり、従来の単一テーマシステムでは以下の課題がありました：

静的設定: ビルドタイムで色が固定されるため、動的なブランド切り替えが困難
スケーラビリティ: 提携先が増える度にコード変更が必要
パフォーマンス: 複数テーマファイルによるバンドルサイズの増加
埋め込み対応: 他社サイトでの埋め込み実装が複雑

これらの課題を解決するため、以下の技術的なアプローチを採用しました。

技術実装の特徴

1. CSS変数を活用した動的テーマシステム

パートナーブランドに合わせたUIカラーの動的切り替えを実現するため、CSS変数を活用したテーマシステムを構築しました。この技術は、支払い.comチームのフロントエンドエンジニアの太田さんが下記のブログで紹介した手法を基盤としています。

tech.up-sider.com

また、同じくフロントエンドエンジニアの Okahashi さんが下記のブログで紹介したデザインシステムの整備により、一貫性のあるブランドテーマの切り替えが可能となりました。

tech.up-sider.com

フォールバック機能付きテーマ設定

// セキュアなテーマ設定の考え方
const SECURE_THEME_COLORS = {
  primary: {
    // フォールバック値は安全な既定値
    base: `var(--theme-primary, #3b82f6)`,
    light: `var(--theme-primary-light, #60a5fa)`,
    dark: `var(--theme-primary-dark, #2563eb)`,
  }
} as const

// Tailwind設定での安全な統合
export default {
  theme: {
    extend: {
      colors: SECURE_THEME_COLORS
    }
  },
}

2. ランディングページ埋め込み用コンポーネント提供

パートナー企業は自社ブランドでのランディングページ作成を担当し、UPSIDER からは支払い.comの会員登録フォームを安全に埋め込むためのコンポーネントと専用スクリプトを提供しています。

iframe で埋め込まれたコードとその親となるコンポーネントの間では message イベントで連携しており、想定しているイベントを処理するための埋め込み用のスクリプトを提供しています。

※下記はイメージです

window.addEventListener(
  'message',
  (event) => {
    if (event.data) {
      if (event.data.type === 'success') {
        // 登録成功時：登録完了ページへ遷移する
        location.href = 'https://app.shi-harai.com/signup/sent_email'
      }

      if (event.data.type === 'failed') {
        // 登録失敗時：エラー表示を行う
        alert('登録に失敗しました。')
      }
    }
  },
  false
)