JP_Stripes What's new 2022/01 / jpstripes-whats-new-202201

2022/01/13の"JP_Stripes What's new"で使用した資料です。

テキストでのまとめと関連記事リンクはこちら-> https://qiita.com/hideokamoto/items/2775e20fd260e907ca04

Transcript

1. What’s new 2022/01 JP_Stripes @hide__dev Jan 2022 1 #Stripe #JP_Stripes
2. Stripe CLI Demo 請求書のノーコードガイド Developer Blog in Qiita Customer Portalの請求書対応 配送方法（Shipping Rates） Payment Element Element updates Stripe Tax for Japan Billing Test clock Search API Checkoutでのクロスセル Stripe Update (pick up for Japan) Miscellaneous New/Beta features Product Updates 2 #Stripe #JP_Stripes
3. Product Updates JP_Stripes What’s new 2022/01 3 #Stripe #JP_Stripes
4. Customer Portalの請求書対応 • Customer Portalが 請求書に対応 • 履歴確認や領収書のDL 請求先情報の更新 支払い方法の追加・変更 • Billingと併用可能 PaymentIntentには非対応 4 JP_Stripes What’s new 2022/01 https://qiita.com/hideokamoto/items /1a56ede321e1650a6302
5. 配送方法（Shipping Rates） • 請求に含める 配送料金データを管理 • 金額と予想配送期間 Taxでの税金徴収設定が可能 • Checkoutで利用可能 5 JP_Stripes What’s new 2022/01 https://qiita.com/hideokamoto/items /1a56ede321e1650a6302
6. 配送方法（Shipping Rates） with Checkout 6 JP_Stripes What’s new 2022/01 const session = await stripe.checkout.sessions.create({ … shipping_options: [{ shipping_rate: 'shr_yyy' }, { shipping_rate_data: { display_name: '動的な配送料金設定 ', type: 'fixed_amount', fixed_amount: { amount: 500, currency: 'jpy' } } }], mode: 'payment' }) #Stripe #JP_Stripes
7. Stripe Payment Element • 複数の決済方法を １つのコードで処理できる UIコンポーネント • 顧客の国・地域などをもとに 利用可能な決済方法を 動的に表示 • テーマとAppearance APIで デザインカスタマイズも容易に 7 JP_Stripes What’s new 2022/01 https://stripe.com/docs/payments/p ayment-element
8. Elements Appearance API • テーマ / 変数 / ルールで 見た目を設定 • Card Element以上に 柔軟なカスタマイズが可能に • ’Night’テーマで ダークモード対応も 8 JP_Stripes What’s new 2022/01 https://stripe.com/docs/stripe-js/app earance-api#additional-variables
9. Payment Elementと従来のCard Elementとの比較 9 Payment Element Card Element 備考 カード以外の決済の受付 ✅ ❌ CardElementの場合、 決済方法ごとに Element実装が必要 3Dセキュア カード登録のみの利用 ✅ ✅ 新しくStripeがサポートした 決済方法への対応 自動対応 原則個別実装 Dashboardでの設定が 必要なケースあり カードブランドの選択 ※EU向け 分割払い（※メキシコのみ） ❌ ✅ レガシーなユースケース 特定地域向け機能 / etc… JP_Stripes What’s new 2022/01 #Stripe #JP_Stripes
10. Payment Elementへの移行 • 基本的には「移行を推奨」 • 未対応機能が必要な場合は CardElementを継続 • Docsにガイドあり〼 10 JP_Stripes What’s new 2022/01 https://stripe.com/docs/payments/p ayment-element/migration
11. 11 { "id" : "txn_19XJJ02eZvKYlo2ClwuJ1rbA", "object": "balance_transaction", "amount": 999, "available_on": 1483920000, "created": 1483315442, "currency": "usd", "description": null, "exchange_rate": null, "fee": 59, "net": 940, "source": "ch_19XJJ02eZvKYlo2CHfSUsSpl", "status": "available", "type": "charge" } const paymentElement = elements.create( 'Payment', { readOnly: true } ); paymentElement.mount("#payment-element"); ElementにReadOnlyモード追加 JP_Stripes What’s new 2022/01 • inputタグにreadonly属性を付与 • 処理中に入力内容を変更させたくない フォームを有効にする条件をつけたい などのユースケースに対応 • element.update()でon/off切り替え可 https://qiita.com/hideokamoto/items /6b68917fd274f9014774 #Stripe #JP_Stripes
12. New features JP_Stripes What’s new 2022/01 12 #Stripe #JP_Stripes
13. Stripe Taxが日本GA JP_Stripes What’s new 2022/01 13 #Stripe #JP_Stripes
14. 14 JP_Stripes What’s new 2022/01 Stripe Tax 税務処理の自動化サービス 世界各国の税法・税率に対応 ノーコード・ローコード 申告と納税も効率化 #Stripe #JP_Stripes
15. • 決済方法 • 顧客住所 • IPアドレス 15 JP_Stripes What’s new 2022/01 どの地域の税金を請求すべきか自動判定 #Stripe #JP_Stripes
16. 数行の変更で、税金の自動計算を開始 16 const session = await stripe.checkout.sessions.create({ payment_method_types: ['card'], line_items: [{ price: 'price_xxxxx', quantity: 1, }], automatic_tax: { enabled: true, } mode: 'payment', success_url: 'https://example.com/success', cancel_url: 'https://example.com/cancel', }); JP_Stripes What’s new 2022/01 #Stripe #JP_Stripes
17. 地域ごとの納税情報も簡単に確認可能 17 JP_Stripes What’s new 2022/01
18. Learn more about Stripe Tax 18 JP_Stripes What’s new 2022/01 https://qiita.com/hideokamoto/items/e92b6ae22065b0d134cd https://qiita.com/hideokamoto/items/878a92f325f063c1ae77 #Stripe #JP_Stripes
19. New (beta) features JP_Stripes What’s new 2022/01 19 #Stripe #JP_Stripes
20. [Beta] Billing テストクロックAPI 20 // テスト用のクロックを作成 curl https://api.stripe.com/v1/test_helpers/test_clocks \ -u sk_test_xxxxx: \ -d "frozen_time"=1635750000 // 顧客に設定 curl https://api.stripe.com/v1/customers \ -u sk_test_xxxxx: \ -d email="jenny.rosen@example.com" \ -d test_clock="{{CLOCK_ID}}" // 指定した時間まで時を進める curl https://api.stripe.com/v1/test_helpers/test_clocks/{{CLOCK_ID}}/advance \ -u sk_test_xxxxx: \ -d "frozen_time"=1667286000 JP_Stripes What’s new 2022/01 https://stripe.com/docs/billing/testing/test_clocks サブスクリプションの時間経過をシミュレートするためのAPI #Stripe #JP_Stripes
21. [Beta] Search API 21 // totalの額が1000を超えてい請求書を検索 stripe.invoices.search({ query: 'total>1000', }).autoPagingEach((invoice) => { // Do something with each invoice here }); // メタデータと通貨の組み合わせに基づいて支払いを照会 stripe.charges.search({ query: 'metadata["key"]:"value" AND currency:"USD"', }).autoPagingEach((charge) => { // Do something with each charge here }); JP_Stripes What’s new 2022/01 https://stripe.com/docs/search-api カスタムクエリで、Stripeのデータを柔軟に検索できるAPI #Stripe #JP_Stripes
22. [Beta] Checkoutでのクロスセル（抱き合わせ販売） • 別の商品の追加購入を サジェストできる • Dashboardで商品に サジェストする商品を設定 • 定期課金でもサジェスト可能 22 JP_Stripes What’s new 2022/01 https://stripe.com/docs/payments/c heckout/cross-sells
23. Miscellaneous JP_Stripes What’s new 2022/01 23 #Stripe #JP_Stripes
24. Stripe CLIがブラウザ上で実行可能に • DocsのStripe CLIページで Stripe CLIが実行可能に • 要Dashboardログイン • コマンドサジェストや JSON整形などもサポート 24 JP_Stripes What’s new 2022/01 https://stripe.com/docs/stripe-cli
25. Stripe CLIをブラウザ上でテストする • DocsのStripe CLIページで Stripe CLIが実行可能に • 要Dashboardログイン • コマンドサジェストや JSON整形などもサポート 25 JP_Stripes What’s new 2022/01 https://stripe.com/docs/stripe-cli
26. Invoicing(請求書)のノーコードガイド • ノーコードで請求を行う クイックスタート • メールベースで請求処理を 行いたい方におすすめ • ノーコードでもStripe ガッツリ実装でもStripe 26 JP_Stripes What’s new 2022/01 https://stripe.com/docs/invoicing/qui ckstart-guide
27. Stripe Developer Blog in Qiita • 開発者向けのTipsや 更新情報の配信を開始 • 製品のユースケース OSS / 連携アプリ 新機能速報 JavaScript以外も今後サポート予定 • 週2〜3記事を目指して更新中 27 JP_Stripes What’s new 2022/01 https://qiita.com/organizations/strip e
28. Stripe CLI Demo 請求書のノーコードガイド Developer Blog in Qiita Customer Portalの請求書対応 配送方法（Shipping Rates） Payment Element Element updates Stripe Tax for Japan Billing Test clock Search API Checkoutでのクロスセル Thanks ! Miscellaneous New/Beta features Product Updates 28 #Stripe #JP_Stripes