サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
qiita.com/hideokamoto
この記事は、コードを書かずにオンライン決済の注文フローをAWS上に実装する方法を体験するワークショップ資料です。デジタルコンテンツを販売するサイトを例に、イベント駆動型のシステムを作る方法やAWSのサーバーレスな製品を組み合わせる方法などを体験できます。 ワークショップで体験できること このワークショップでは、「商品が注文された後」のワークフローにフォーカスして、業務フローの自動化に挑戦します。事前に用意されたStripeアカウントと、商品注文リンクを利用して、購入されたデジタルコンテンツの提供や社内への通知などを実装します。 プライベートベータ機能を利用します 本資料公開時点では、StripeとAmazon EventBridgeを連携させる機能は招待制のベータ機能です。ご自身のStripeアカウントで試されたい方は、以下のドキュメントにあるフォームから、ベータ版の参加申請を実施してくだ
Astroを使って構築したサイトに、Stripeの決済やサブスクリプション申し込みフローを追加する方法JavaScriptstripeastroStripeElementStripeCheckout 静的なウェブサイトを構築する方法の1つとして、Astroへの注目が高まっています。 https://astro.build/ 今回は、このAstroを使ったサイトにて、Stripeを利用した決済フォームを組み込む方法を紹介します。 3つの組み込み方 Astroで構築したサイトにStripeの決済フォームを組み込むには、3つの方法があります。 1: リンクまたは埋め込みコードで実装する 2: リダイレクト型の決済セッションを作成する 3: 埋め込み型の決済フォームを実装する 1がもっとも簡単に組み込みができる反面、デザインのカスタマイズ性などは3に軍配があがります。 それぞれの実装方法を見ていき
StripeとReactで、銀行振込やコンビニ決済などの複数の決済手段を表示する方法と見た目のカスタマイズ方法JavaScriptReactStripeElementstirpe この記事は、React Advent Calendar 2022 14日目の記事です。 Stripeでは、Checkout / Payment Linksなどのリダイレクト型の決済フォームとは別に、埋め込み型の決済フォーム「Elements」を提供しています。 Stripe.jsやiOS/Android SDKを利用してElementsをサイトやアプリに埋め込むことで、提供するサービスの中で決済体験を完結させることができます。 Elements組み込みの前準備(サーバー側でのPayment Intent作成) Stripe Elementsでの決済フォーム組み込みには、サーバー側の処理が必要です。 const s
この記事は、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
2022年6月施行の改正特定商取引法に対応するための、Stripe Checkout / Payment Links設定ガイドstripeStripePaymentLinksStripeCheckout 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
クレジットカードを利用した商品の注文やサービス申し込みは、今やオンラインビジネスに欠かせない要素です。 ですが、より多くの顧客に商品・サービスを提供したいと考えた場合、クレジットカードを利用できない顧客やシーンについても考慮する必要があります。 例えば、電車での移動中や混み合った店内、信頼性の低い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円 この請求のうち、1と2が比例配分によるものです。 1は、「変更前プランの、プラン変更日から契約期間終了日までの日割料金」を請求から差し引いています。
このページを最初にブックマークしてみませんか?
『@hideokamotoのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く