技術記事、ブログ投稿、ニュースなどの執筆活動を紹介しています。
Stripe Checkoutは少ないコード（ローコード）で単発・定期課金のカード決済システムを提供できるStripeのサービスです。この機能を、NestJSをつかったAPIと静的ホスティング機能を利用して、簡単な商品購入ページを作る本です。 # 触れるもの - NestJSで作るREST API - NestJSで静的なHTMLを配信する - Stripe Checkoutの決済URLの発行方法など NestJSの入門と、Stripe Checkoutのことはじめに役立てばと思い執筆しました。 ## 2025/05 内容がそろそろ古くなってきたかと思いますので、無料にしました。 現在のNestJSやStripeの仕様との差分が発生しているはずですので、本書を参考にされる際は差分にご注意ください。...
Stripeから提供されているCLIツールのインストール方法や使い方について紹介します。 JP_Stripesなどのコミュニティイベントで紹介する内容を本としてまとめたものですので、本編については無料公開としています。 有料部分には個人的に使っているTipsのようなものを載せていますので、興味がある方はあわせてご覧ください。 ## 紹介しているCLI version v1.7.9 ## 前提としている環境 macOS / zsh...
<p>Cloudflareの新機能により、wrangler.jsonc定義だけでKV/R2/D1が自動プロビジョニングされるようになりました。開発者はストレージ設定の手間なく、本質的な課題解決に集中できます。</p>
<p>MCPサーバーの利用状況をCloudflare Analytics Engineで効率的に追跡する方法を解説。SQLベースの分析機能で低コストかつ柔軟にツール利用データを収集・分析し、データドリブンな改善を実現できます。</p>
<p>Ionicフレームワークの`IonItemSliding`内で`href`属性が機能しない問題に遭遇。原因調査と`onClick`ハンドラと`window.open`を使った実用的な解決策を紹介します。</p>
<p>Cloudflare Workersに静的HTMLをデプロイする際、`.git`ディレクトリが含まれてエラーになる問題。解決策は`.assetsignore`ファイルを作成して除外設定を行うだけ。シンプルだけど見落としがちなポイントです。</p>
<p>Slack連携でDosu.devのAIアシスタントを最大限活用！GitHub連携コードベースへの質問に答え、チーム全体の開発効率を向上させる設定方法を解説します。</p>
<p>TypeScriptでAlgoliaの検索結果を扱う際に発生する型エラーの原因と、Type Guardを使った安全な実装方法について解説します。複数インデックス検索に対応した型定義の理解がカギです。</p>
<p>Algoliaの検索APIを活用し、Cloudflare Workers上にMCPサーバーを構築。ベクトル検索なしでRAGを簡単に実現する方法を解説します。</p>
<p>AWS Amplify Gen 2で@parcel/watcherエラーが発生した場合、バックエンドリソースを使用しないSPAなら、amplify.ymlファイル内のpipeline-deployコマンドをコメントアウトすることで簡単に回避できます。</p>
<p>AWS Lambdaから Amazon Bedrock AgentCoreを実行するために必要なIAMポリシー設定を解説。特に「bedrock-agentcore:InvokeAgentRuntime」権限と、正しいリソースARN指定のポイントをCDKでの実装例とともに紹介。</p>
<p>Cloudflare Workers KVで複数アイテムを効率的に取得する方法を解説。N+1問題を避け、パフォーマンスを向上させるための配列を使った一括取得テクニックを紹介します。</p>
<p>Remix と Clerk 連携時に発生する「clerkState」エラーの原因と解決方法を解説。Layout コンポーネントから ClerkProvider を削除し、ClerkApp のみで認証状態を管理する正しい実装パターンを紹介します。</p>
<p>Ionic と Angular を使って共通ナビゲーションを実装する方法を解説。standalone コンポーネントを活用し、コードの重複を避けながら保守性の高いタブバーを実現する DRY な手法を紹介します。</p>
<p>Cloudflare Workers上でAlgoliaの検索を実装する際に発生する「XMLHttpRequest is not defined」エラーの解決法。fetch requesterを活用した具体的な実装方法を解説します。</p>
<p>CloudflareのWorkers Analytics Engineを活用して、MCPサーバーの利用状況やエラーを効率的に監視する方法を解説。簡単な設定とSQLクエリで、ツールの使用頻度分析やサーバー最適化に役立てる実践的アプローチ。</p>
<p>Stripe Appsの拡張UI開発において、fetchStripeSignatureを活用した署名検証の実装方法と、APIリクエストを安全に行うための共通化ヘルパー関数の設計について解説します。</p>
<p>Mastraフレームワークを使ったAIエージェント開発の始め方を解説。セットアップから基本的なエージェント作成までの手順を詳しく紹介し、初心者でも簡単に開発環境を整えられる方法を紹介します。</p>
<p>Cloudflare Workersで無料プランでDurable Objectsを使う際に発生するエラーの解決法。`wrangler.jsonc`の設定で`new_sqlite_classes`を`new_classes`に変更するだけで問題が解決します。</p>
<p>Hono フレームワークを使って Model Context Protocol (MCP) サーバーを構築する方法を解説。Agent SDK を活用し、Cloudflare Workers 環境で動作する実装手順からテスト方法まで、ステップバイステップで紹介します。</p>
<p>Amazon S3 Vectorsの新機能を徹底調査。ベクトルデータを簡単・安価に保存・検索できる仕組みの基本API、OpenSearchとの連携、次元数対応など、実装に役立つポイントを解説。</p>
<p>Remix V2でネストしたディレクトリ構造のルーティングが404エラーになる問題を解説。ファイルベースルーティングの仕様変更により、ネストされたファイル構造からドット記法を使ったフラットな構造への移行が必要になった事例と解決方法。</p>
@modelcontextprotocol/create-server の公開フォークした create-mcp-tools をリリースしました。このツールは Model Context Protocol (MCP) サーバーの開発をよりシンプルで迅速にすることに使えます。create-mcp-to...
2025/03/11、npmにてLangChain.jsを使ってStripeのドキュメントを読み込むDocumentLoaderライブラリを作成しました。以下のURLより詳細を確認できます。 https://www.npmjs.com/package/langchain-stripe-loader背...
本日2025/03/05、FF14のゲーム世界であるエオルゼア各地域の天気予報を行うWebアプリケーション「エオルゼア天気予報（β版）」をリリースしました。アプリケーションは無料で利用いただけます。地域予報に加えて、虹やオーロラの予報にも対応この予報アプリでは、エオルゼア各地域での直近の天気予報を表...
2024年11月30日に、新しい個人開発アプリケーション「京都地下鉄ラスト・コール」をリリースしました。オープンデータと生成AIを利用したアプリケーション開発の可能性を探究し、データ活用やマッシュアップの可能性を提案することを目的とし、京都市が公開しているデータを利用したアプリケーションをリリースし...
この記事では、物理的なアイテムを提供したり、初期設定を完了したりする必要がある場合に、顧客にサービスを提供する方法について説明します。Stripe Billing と Checkout を使用して新しいサブスクリプションを作成し、同時に 1 回限りの支払いを処理する方法を学習します。 ## ハードウェアとサービスの両方を提供する 「SaaS Plus a Box」モデルとは 近年、デバイスやハ...
この記事では、生成AIとStripeの新しいエージェント向けSDKを活用したAIエージェントの開発・テストを[Google Colaboratory (Google Colab)](https://colab.research.google.com/?hl=ja)で簡単に行う方法を紹介します。生成AIエージェントの作り方やLangChain系ツールの動かし方、そして決済や請求管理に関する業務の自...
この記事では、Stripeを利用した決済フォームを実装する際に、リダイレクトをオフにする方法をElements / Checkoutの2つで紹介します。kintoneなどのビジネスアプリケーションに決済機能を埋め込む時のような、現在いるページからの離脱をできるだけ回避したいケースでの決済機能実装を検討されている方はぜひお試しください。 ## Stripeの決済フローにはリダイレクトが含まれる ...
この記事では、VS CodeそしてGItHub Copilotを利用して決済・サブスクリプション機能の開発をスムーズに行う方法を紹介します。これからStripeの組み込みを開始するという開発者だけでなく、担当者の異動などで新しく決済・請求システムの運用保守を担当することになった方にとっても、コードの理解や修正方法をより効率的に知る方法としてぜひお試しください。 :::note この記事は、[Vi...
この記事では、Stripeを使って構築したサブスクリプション請求システムに、大企業向けの大型契約に向けたワークフローを追加する方法を紹介します。Stripeが持つサブスクリプション・請求書、そして見積書を発行する仕組みを活用することで、より複雑な契約・請求シナリオを必要とする場面にも対応できるようになります。 毎年や2年周期で契約内容の見直しや再契約の承認フロー通過を必要とするような企業に対し...
複数のStripeアカウントで開発や運用を行っていると、プロジェクトで利用しているAPIキーがどのStripeアカウントで利用しているものかがわからなくなることがあります。 この記事では、APIキーから対象のStripeアカウントを特定する方法を紹介します。 Checkout Sessionを利用して確認する もっとも簡単な方法は、Checkout Sessionを利用することです。Checkout Sessionには、カード情報を保存するためのsetupモードが用意されています。setupモードでセッションを作成し、リダイレクトを行うAPIを実装しましょう。 app.get('/c......
この記事では、SaaSの料金や機能リストの管理をコードで管理する方法を紹介します。[terraform](https://www.terraform.io/)とコミュニティプラグインである[Stripe Provider](https://registry.terraform.io/providers/lukasaron/stripe/latest/docs)を使った料金や機能リストの設定方法と...
この記事では、従量課金タイプのサブスクリプションサービスを提供する際に、ユーザーがサービスをお試しするためのクレジットを付与する方法を紹介します。日数ベースのトライアルとは異なるアプローチでの、サービス体験オファーの作り方を、この記事の内容で学ぶことができます。 ## なぜトライアルではなくクレジットなのか Stripeのようなサブスクリプションの請求管理サービスには、通常トライアル機能が用意...
この記事では、Stripeを使って構築したECサイトやサブスクリプションサービスにおいて、クレジットカード情報の使い回しや多重登録を防止する方法を紹介します。Stripe APIやWebhook、ダッシュボードを使った対策とそのメリットデメリットを3種類まとめました。長期間のトライアルを提供しようとしているユーザーや、クレジットカードマスター・カードテスティング攻撃への対策を検討されている方は、ぜ...
:::note この記事は、[Postman Advent Calendar 2024](https://qiita.com/advent-calendar/2024/postman) 3日目の投稿です。 ::: こんにちは、Stripe Developer Advocateの岡本です。Qiitaでは、Stripeに関する記事を大体年に40-50本投稿したり、開発者コミュニティへの参加や登壇など...
:::note この記事は、[Hono Advent Calendar 2024](https://qiita.com/advent-calendar/2024/hono) 3日目の記事です。 ::: この記事では、Honoを使ってStripeのSDKを利用したAPI開発を行う際に、知っておくと便利なAPIや実装方法を紹介します。 ## はじめに StripeでDeveloper Rela...
この記事では、ブラックフライデー（Black Friday）やサイバーマンデー（Cyber Monday）・そして年末商戦など、年末のさまざまな大型セール期間に向けた販売キャンペーンを、Stripe Checkoutで簡単に始める方法を紹介します。特別な割引オファーの準備や、LPの構築と提供方法などを、コードベースで解説します。 Stripe Checkoutの持つ機能を活用することで、少ない開...
この記事では、保存したクレジットカード情報などを利用したオンライン決済フローにおける3Dセキュア認証の対応方法を、Stripeを例に紹介します。2025年3月に義務化される3Dセキュア認証への対応方法を知るため、そしてよりユーザー・開発者のどちらにもシンプルでセキュアな決済フローを実現するための方法を、サンプルコードを使って解説します。 ## Stripeの`Setup Intents API...
この記事では、WordPressで構築されたサイトに決済フォームを組み込むために、カスタムブロックを作成する方法を紹介します。 WordPressのブロック作成支援ツールと、Stripe SDKを利用したブロック実装方法の紹介と、実際のウェブサイトに導入する際の注意点をステップバイステップで紹介します。 ## Step1: カスタムブロックのプロジェクトを新しく作成する まず、新しいWordP...
この記事では、Stripeが提供するシンプルかつセキュアな決済手段 Link を決済フォームに導入し、テストする方法を紹介します。Linkによる支払いをサポートすることで、顧客はクレジットカード情報を入力することなく、支払いフローを完了させることができます。決済体験をスムーズにすることで、決済フォームでのカゴ落ちを防止でき、コンバージョン率（ CVR ）の向上や、それに伴う売り上げの増加が期待でき...
この記事では、決済フローを最適化することによるコンバージョン率の改善を、Stripeが提供するノーコード機能を使って実現する方法を紹介します。 ## 決済フローの最適化でコンバージョン率を改善する ECサイトにおいて、決済フローの最適化は売上と収益を最大化するための重要な課題です。マーケティング施策やウェブサイトの改善などで構築したコンバージョンファネルの最終ステップで、どれだけ売上を逃さな...
この記事では、Stripeダッシュボードを活用して現在は非推奨となっているCharges APIをシステムが利用しているかどうかを調査する方法を紹介します。2025年3月に必須化される3Dセキュアによる追加認証への対応を進めている方は、この記事を参考にシステムの組み込み状況を調査してみてください。 2025年3月から対応が必須となる3Dセキュアを利用した追加認証、Stripeを利用している場合、...
この記事では、Stripeを使った商品の決済やサブスクリプションの契約申し込み時のバックエンドのデータ処理について、Make.comを使ってノーコードに実現する方法を紹介します。Stripe Webhookを必要とする業務フローを実現させたい場合に、POCとして実験的にコードを書かずに実現する方法や、開発チームを持たない小規模なプロジェクトで実現させる際のヒントとしてお使いください。 ## 決...
:::note この記事は、[dev.to](https://dev.to/stripe)に公開されている[Justin Michael氏](https://dev.to/violetpixel)によって書かれた英語記事の日本語訳です。 ![スクリーンショット 2024-04-05 11.23.42.png](https://qiita-image-store.s3.ap-northeast-1...
決済手段としてPaidyを追加する場合、商品の発送先住所をPaidy Checkoutを開始するAPIリクエストに送信する必要があります。この記事では、Paidyで顧客の住所情報を収集する際に、Stripeの住所フォーム機能を使う方法を紹介します。 ## Paidyでは発送先住所が必須 Paidy Checkoutでは、`shipping_address`で郵便番号から始まる住所を送信する必...
決済手段としてPaidyを追加する場合、顧客がPaidy以外で注文を行った履歴情報を送信する必要があります。この記事では、Stripeを利用している場合に、Paidyへ送信する情報を集める方法を紹介します。 ## [関連記事] Stripeを使って「クレジットカード」と「Paidy」両方に対応した決済フォームを作る方法 Stripe Elementsを利用すると、Paidyとクレジットカード...
Stripeにはサービス連携やカスタムUI、ワークフローなどを構築・カスタマイズできる「Stripe Apps」があります。 https://stripe.com/jp/apps これをローカルで開発する際、時より「localhost:4242 is already in use」というエラーが発生することがあります。 今回はこのエラーが発生した時の対処法を簡単に紹介します。 ステップ1: 現在のポート使用状況の確認 エラーが発生した際、まず確認することは、対象のポートを使用しているプロセスがあるかどうかをチェックすることです。Terminalやコマンドプロンプトで以下のコマンドを実......
このワークショップでは、StripeとNext.jsを利用したシンプルなe-commerceサイトを作る方法を学びます。 "
StripeのPayment Linksを利用すると、コードを書かずにクレジットカードなどの決済を受け付けるURLを作成できます。 また、Dashboardで設定を行うことで、割引やGoogle Analyticsでのトラッキング、QRコード発行なども簡単に行えます。 この本では、Stripe Payment Linksを使って、簡単に決済・サブスクリプション申し込みを組み込む方法を紹介します。 サービスやアプリを新しくスタートする際に欠かせない「オンライン決済」を、Payment Linksでシンプルにはじめましょう。...
dev.to/stripe のStripe Connect fundamentals Seriesを日本語化していきます。２章以降は随時追加予定
AstroとCloudflareそしてStripeを利用して、サブスクリプションの申し込みページを構築します。
「Cloudflare Workers」を利用すると、サーバーレスなアプリケーションをCloudflareのデータセンターにデプロイできます。 この記事では、これからCloudflare Workers（以下Workers）を触ってみようという方向けの、簡単なAPIの作り方を紹介します。 Stripe SDKを利用して、オリジナルのPayment Linksを作るAPIを作成しよう ここでは、「Stripeの決済フォームへ遷移するAPI」をWorkers上に作りましょう。 ユーザーがWorkersのURLにアクセスする Workers内でStripe SDKを利用して、Checko......
このワークショップ資料は、JP_Stripesで開催された「AWSでサーバーレスなSaaSバックエンド開発ワークショップ」の後編資料です。 ここでは、AWS Step FunctionsとAWS CloudFormationを利用したWordPressサーバーの起動システムを構築します。 その後、Amazon EventBridgeと連携させ、Stripeのサブスクリプション申し込みと連動してサーバーが起動するようにします。 AWSマネージメントコンソールとStripe Dashboardのみで完結する、ローコードなワークショップ資料です。...
Stripeでは、決済方法の増加や法的な要件の追加といった周りの状況の変化に応じて、大きくAPIを変更することがあります。 その場合、より多くの決済方法や機能・オプションを利用するためには、実装の変更が必要です。 このガイドでは、言語・FW別に、Charge APIやToken APIから、Payment Intentsを利用した決済フローへ変更する方法を紹介します。...
やりたかったこと /adminのように、特定のパス以下でのルーティングやファイル群をmoduleにまとめたい。 ベースアプリ 公式チュートリアルをやっていたので、これをリファクタリングした。 https://angular.jp/tutorial やったこと 1: 子ページのRoutingモジュールを作成 子ページにしたいコンポーネントのインポートとRouteの定義を実施。 ネスト先の場合、RouterModuleはforChildを使う。 import { NgModule } from '@angular/core'; import { RouterModule, R......
環境 "@angular/common": "^14.0.0", "@angular/compiler": "^14.0.0", "@angular/core": "^14.0.0", "@angular/router": "^14.0.0", "@angular-eslint/builder": "14.0.2", "@angular-eslint/eslint-plugin": "14.0.2", "@angular-eslint/eslint-plugin-template": "14.0.2", "@angula......
Next.jsを利用することで、より多様なwebサイト・アプリケーションを開発できるようになります。 今回のワークショップでは、Next.jsとStripeを利用した、シンプルなECサイトをフルスクラッチする方法を体験できます。 なお、このワークショップドキュメントは不定期にアップデートを行います。 内容が前回開催時と変更されている場合もございますのでご了承ください。...
年末のJP_Stripe配信で、Stripe Connectでの住所の書き方の記事が話題になりました。 https://gist.github.com/toruf-stripe/60293ec99a333a7af1daaca31b562741 その中で、「Geoloniaがリリースしている住所正規化ライブラリが使えるのでは？」と思いつきで言っちゃったので、どこまでいけるか試してみました。 使用するライブラリ https://github.com/geolonia/normalize-japanese-addresses 表記揺れや新旧字体など、住所入力でありがちな揺らぎを吸収してくれ......
DevRel Advent Calendar 2021 20日目の遅刻記事です。 これまで 2013年ごろからWeb業界に入り、PHPやWordPressでプログラミングを始めました。 2015年にAWSを利用するSaaS企業に転職し、そこからはAWS LambdaまたはAmplifyとNetlify / Stripe / Algoliaを組み合わせるようなアプリケーションをJavaScript / TypeScriptで色々作ったり保守したりしていました。 現在地 2021年11月末からDeveloper AdvocateとしてStripeにジョインしました。 まだ１ヶ月経って......
2021/11/29から、Stripeにジョインしました。 自分の知る限りでは、日本でコミュニティ経由でStripeに入社したのは、自分が一人目なはずなので、そのへんの振り返りを兼ねて、Stripe Advent Calendar 1日目の記事としたいと思います。 StripeとStripeコミュニティへの関わり Stripeそのものを触り始め、Stripeコミュニティ（以降JP_Stripesと表記）への関わりが始まったのが2017年でした。 在籍していた会社でStripeを採用することになり、Stripeに関する情報がより知れる場所を探していた時期だったと記憶しています。そして......
GraphQL (AppSync)やREST APIですでに作成済みのDynamoDBテーブルにアクセスしたい場合、Amplify CLIでデータをインポートする必要があります。 Storageとしてimportする必要がある これ結構な罠な気がしますが、DynamoDBのテーブルはStorageとしてimportします。 amplify import storageを実行すると、S3バケットかDynamoDBかを質問されるので、ここでDynamoDBを選びましょう。 % amplify import storage ? Please select from one of the b......
できれば公式のExampleに持っていきたいので、PRたててリクエスト中。 https://github.com/serverless-nextjs/serverless-next.js/pull/1522 マージされたらそっちベースにちゃんとした記事書き直す予定。 Serverless Next.jsでAWS CDK Serverless Next.jsといえば、Serverless Componentを使う印象でした。が、最近CDK版も出たみたいです。 定義イメージ import * as cdk from '@aws-cdk/core'; import { NextJSLa......
Stripe Checkoutは少ないコード（ローコード）で単発・定期課金のカード決済システムを提供できるStripeのサービスです。この機能を、NestJSをつかったAPIと静的ホスティング機能を利用して、簡単な商品購入ページを作る本です。 # 触れるもの - NestJSで作るREST API - NestJSで静的なHTMLを配信する - Stripe Checkoutの決済URLの発行方法など NestJSの入門と、Stripe Checkoutのことはじめに役立てばと思い執筆しました。 ## 2025/05 内容がそろそろ古くなってきたかと思いますので、無料にしました。 現在のNestJSやStripeの仕様との差分が発生しているはずですので、本書を参考にされる際は差分にご注意ください。...