はてなブックマーク

この記事は、JAWS-UG DEIにて2024/5/11に開催した、AWS AppFlow と Amazon Bedrockを使ったオリジナルなAIチャットを作ろう！ワークショップ資料です。 利用するAWSサービスの一部に、課金の発生するものが存在します。ワークショップではAWSクーポンを配布しますが、個人的に挑戦される方は、ご利用予定のAWSアカウントについて、無料枠やトライアルの有無について事前にご確認をお願いします。 また、AWSマネージメントコンソールのスクリーンショットは、2024/05時点で撮影されたものを利用しています。今後のAWSアップデートによって、UIやフローが変更される場合もありますので、ご了承ください。 ワークショップのゴール Amazon Bedrockを利用して、LLM（大規模言語モデル）ベースのRAG(検索拡張生成)アプリの作り方を学びます。 コードを書かずに

静的なウェブサイトを構築する方法の１つとして、Astroへの注目が高まっています。 https://astro.build/ 今回は、このAstroを使ったサイトにて、Stripeを利用した決済フォームを組み込む方法を紹介します。 3つの組み込み方 Astroで構築したサイトにStripeの決済フォームを組み込むには、3つの方法があります。 1: リンクまたは埋め込みコードで実装する 2: リダイレクト型の決済セッションを作成する 3: 埋め込み型の決済フォームを実装する １がもっとも簡単に組み込みができる反面、デザインのカスタマイズ性などは３に軍配があがります。 それぞれの実装方法を見ていきましょう。 1: リンクまたは埋め込みコードで実装する方法 もっとも簡単な方法は、Stripe上で発行した決済リンクや埋め込みコードを使うことです。 Payment Linksで発行したURLを利用す

この記事は、React Advent Calendar 2022 14日目の記事です。 Stripeでは、Checkout / Payment Linksなどのリダイレクト型の決済フォームとは別に、埋め込み型の決済フォーム「Elements」を提供しています。 Stripe.jsやiOS/Android SDKを利用してElementsをサイトやアプリに埋め込むことで、提供するサービスの中で決済体験を完結させることができます。 Elements組み込みの前準備（サーバー側でのPayment Intent作成） Stripe Elementsでの決済フォーム組み込みには、サーバー側の処理が必要です。 const stripe = new Stripe(STRIPE_SECRET_KEY, { apiVersion: '2022-11-15' }); const paymentIntent =

この記事は、CircleCI Advent Calendar 2022 5日目の記事です。 Stripe CLIを利用すると、Stripe上でのさまざまなイベント（決済完了・サブスクリプションの新規契約・キャンセルなど）をシミュレートすることができます。 CI上でStripe CLIを利用することで、Stripeのイベントがかかわるシステムの結合テストや、バッチジョブの実行などが可能です。 この記事では、Circle CI上でStripe CLIを実行するためのTipsを簡単に紹介します。 Stripe CLIをDockerから利用する Stripe CLIはDockerコマンドで実行できます。 Stripe CLIをDockerで実行する場合、--api-keyでStripeのAPIキーを都度渡す必要がある点に注意が必要です。 Circle CIに制限付きAPIキーを設定する Circl

ReactとStripe Elementで作成した決済フォームの、CSS・見た目をカスタマイズする方法JavaScriptstripecss-in-jscss変数StripeElement Stripe Elementsで描画される決済フォームは、セキュリティなどの目的でiframeの中に配置されます。 そのため、CSSでの内容・見た目のカスタマイズはElement Appearance APIを利用して行う必要があります。 この記事では、Payment Elementsの見た目を調整する方法を紹介します。 プリセットスタイル（テーマ）で設定する StripeのPayment Elementsでは、いくつかのスタイルプリセットが用意されています。 ドキュメントサイトでデモを見る これらは、<Elements/>のoptions.appearanceで設定します。 <Elements str

ECサイトなど、多くの決済を取り扱うシステムでは重複処理・多重決済をいかに防止するかが重要です。 Stripeの場合、同一IDのPayment IntentやInvoiceであれば、2回目以降の決済リクエストについてはデフォルトでエラーで返します。 例えば、以下のコードでは、1回目のconfirm以降にconfirmやcaptureを実行すると、This PaymentIntent could not be captured because it has already been captured.エラーが発生します。 const stripe = new Stripe('sk_test_xxxx', { apiVersion: '2022-08-01', }) // Payment Intentを作成 const paymentIntent = await stripe.paymentI

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2022年6月1日より、改正特定商取引法（以下「改正特商法」）が施行されます。 それにあたり、Stripe CheckoutまたはPayment Linksを利用して商品・サービスの提供をしている方向けの、設定ガイドを用意しました。 注意 本ガイドは、消費者庁から公表されているガイドラインや説明会資料をもとに作成しています。 内容については細心の注意を払って作成いたしましたが、絶対を保証するものではありません。 お手数ではありますが、必ずご自身でガイドライン等の資料をご確認いただきますようにお願いいたします。 令和3年特定商取引法・預託

Markdoc入門: Vite + @markdoc/markdocを使って、Markdownで書かれた記事を表示しようJavaScriptMarkdownvitemarkdoc Markdocは、Stripeのドキュメントサイトで利用している、マークダウンのオーサリングツールです。 この記事では、JavaScriptと@markwodn/markdocライブラリを利用して、Markdownで書かれたコンテンツをサイトに表示させる方法を紹介します。 セットアップ Markdocライブラリは、npm installして利用します。 今回はコードのビルドに、Viteを利用します。 フレームワークにはvanillaを選びましょう。 variantでTypeScriptも選べますが、今回は使用しません。 $ npm init vite ✔ Project name: … vite-markdoc

Stripe Billingを利用することで、カード決済だけでなく、銀行振込でのサブスクリプションも簡単に提供することができます。 しかし、決済タイミングの違いなどでサービスへの組み込みには注意が必要な点がいくつか存在します。 今回はそれぞれの決済方法での違いと併用する際のポイントを紹介します。 Webhookで決済方法の違いを吸収する もっとも大きな違いは、「請求・支払い方法」です。 カード決済の場合、顧客が登録したカードに対して請求を行うため、2回目以降の決済についても提供側・顧客どちらも特別な操作は原則不要です。 しかし銀行振込の場合、毎回顧客が必要金額を指定口座に振り込む必要があります。 そのため、サービスの提供開始タイミングを「決済が完了した後」とする場合には、以下のようなWebhookを用意して、決済が完了しているか否かを処理する必要があります。 if (event.type

クレジットカードを利用した商品の注文やサービス申し込みは、今やオンラインビジネスに欠かせない要素です。 ですが、より多くの顧客に商品・サービスを提供したいと考えた場合、クレジットカードを利用できない顧客やシーンについても考慮する必要があります。 例えば、電車での移動中や混み合った店内、信頼性の低いwi-fiネットワークを一時的に利用している場合などでは、クレジットカードを取り出したりカード情報を送信したりすることをためらうことがあります。 また、未成年者など自分のクレジットカードを持っていない方の存在もビジネスによっては無視することができません。 この記事では、Stripeを利用してカード決済だけでなく、銀行振込での決済も処理する方法を紹介します。 銀行振込での決済処理も、PaymentIntentを利用する StripeでのカードやGoogle Pay / Apple Payなどの処理は

今回の記事では、オーダーメイドな製品やパーソナライズした商品など、顧客によって価格や商品内容が異なるケースでのCheckoutの利用方法を紹介します。 Checkoutでは、料金データを利用する Stripe Checkoutを利用することで、簡単に決済ページを組み込むことができます。 サンプルコードでは、一般的に「事前に作成した料金のID」を設定してCheckoutのセッションを開始します。 const session = await stripe.checkout.sessions.create({ success_url: 'https://example.com/success', cancel_url: 'https://example.com/cancel', customer_creation: 'if_required', line_items: [ { price: 'p

Stripe Billingで、サブスクリプションのプラン・料金変更後の請求金額を事前にプレビューするJavaScriptstripestripeBilling Stripe Billingでサブスクリプションを提供している場合、契約期間中のプラン変更で「使った分だけ支払う」決済ができます。Stripeではこれを「比例配分」とよんでいます。 例えば「月1,000円のプラン」を途中で「月2,000円のプラン」に変更する場合、比例配分が有効になっていると、以下のような請求書が作られます。 1: 月1,000円のプランの未使用分: ▲ 743円 2: 月2,000円のプランの使用分:　 1,485円 3: 次回の契約期間の利用料金: 2,000円 この請求のうち、１と２が比例配分によるものです。 １は、「変更前プランの、プラン変更日から契約期間終了日までの日割料金」を請求から差し引いています。