Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Hidetaka Okamoto (Stripe)

January 13, 2022
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Technology

Transcript

  1. What’s new 2022/01
    JP_Stripes
    @hide__dev
    Jan 2022
    1
    #Stripe #JP_Stripes

    View full-size slide

  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

    View full-size slide

  3. Product Updates
    JP_Stripes What’s new 2022/01
    3
    #Stripe #JP_Stripes

    View full-size slide

  4. Customer Portalの請求書対応
    ● Customer Portalが
    請求書に対応
    ● 履歴確認や領収書のDL
    請求先情報の更新
    支払い方法の追加・変更
    ● Billingと併用可能
    PaymentIntentには非対応
    4
    JP_Stripes What’s new 2022/01
    https://qiita.com/hideokamoto/items
    /1a56ede321e1650a6302

    View full-size slide

  5. 配送方法(Shipping Rates)
    ● 請求に含める
    配送料金データを管理
    ● 金額と予想配送期間
    Taxでの税金徴収設定が可能
    ● Checkoutで利用可能
    5
    JP_Stripes What’s new 2022/01
    https://qiita.com/hideokamoto/items
    /1a56ede321e1650a6302

    View full-size slide

  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

    View full-size slide

  7. Stripe Payment Element
    ● 複数の決済方法を
    1つのコードで処理できる
    UIコンポーネント
    ● 顧客の国・地域などをもとに
    利用可能な決済方法を
    動的に表示
    ● テーマとAppearance APIで
    デザインカスタマイズも容易に
    7
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/payments/p
    ayment-element

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  10. Payment Elementへの移行
    ● 基本的には「移行を推奨」
    ● 未対応機能が必要な場合は
    CardElementを継続
    ● Docsにガイドあり〼
    10
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/payments/p
    ayment-element/migration

    View full-size slide

  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

    View full-size slide

  12. New features
    JP_Stripes What’s new 2022/01
    12
    #Stripe #JP_Stripes

    View full-size slide

  13. Stripe Taxが日本GA
    JP_Stripes What’s new 2022/01
    13
    #Stripe #JP_Stripes

    View full-size slide

  14. 14
    JP_Stripes What’s new 2022/01
    Stripe Tax
    税務処理の自動化サービス
    世界各国の税法・税率に対応
    ノーコード・ローコード
    申告と納税も効率化
    #Stripe #JP_Stripes

    View full-size slide

  15. ● 決済方法
    ● 顧客住所
    ● IPアドレス
    15
    JP_Stripes What’s new 2022/01
    どの地域の税金を請求すべきか自動判定
    #Stripe #JP_Stripes

    View full-size slide

  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

    View full-size slide

  17. 地域ごとの納税情報も簡単に確認可能
    17
    JP_Stripes What’s new 2022/01

    View full-size slide

  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

    View full-size slide

  19. New (beta) features
    JP_Stripes What’s new 2022/01
    19
    #Stripe #JP_Stripes

    View full-size slide

  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="[email protected]" \
    -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

    View full-size slide

  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

    View full-size slide

  22. [Beta] Checkoutでのクロスセル(抱き合わせ販売)
    ● 別の商品の追加購入を
    サジェストできる
    ● Dashboardで商品に
    サジェストする商品を設定
    ● 定期課金でもサジェスト可能
    22
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/payments/c
    heckout/cross-sells

    View full-size slide

  23. Miscellaneous
    JP_Stripes What’s new 2022/01
    23
    #Stripe #JP_Stripes

    View full-size slide

  24. Stripe CLIがブラウザ上で実行可能に
    ● DocsのStripe CLIページで
    Stripe CLIが実行可能に
    ● 要Dashboardログイン
    ● コマンドサジェストや
    JSON整形などもサポート
    24
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/stripe-cli

    View full-size slide

  25. Stripe CLIをブラウザ上でテストする
    ● DocsのStripe CLIページで
    Stripe CLIが実行可能に
    ● 要Dashboardログイン
    ● コマンドサジェストや
    JSON整形などもサポート
    25
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/stripe-cli

    View full-size slide

  26. Invoicing(請求書)のノーコードガイド
    ● ノーコードで請求を行う
    クイックスタート
    ● メールベースで請求処理を
    行いたい方におすすめ
    ● ノーコードでもStripe
    ガッツリ実装でもStripe
    26
    JP_Stripes What’s new 2022/01
    https://stripe.com/docs/invoicing/qui
    ckstart-guide

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide