顧客に支払い方法を登録する

curl -X POST https://api.pay.jp/v2/setup_flows \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "customer": "cus_xxxxx",
    "payment_method_types": ["card"]
  }'

{
  "id": "sflw_xxxxx",
  "object": "setup_flow",
  "client_secret": "sflw_secret_xxxxx",
  "customer": "cus_xxxxx",
  "status": "requires_payment_method",
  "payment_method_types": ["card"],
  ...
}

<script src="https://js.pay.jp/payments.js"></script>
<script>
  const payments = PayjpPayments('pk_test_xxx');
  ...
</script>

npm install @payjp/payments-js

import { loadPayments } from '@payjp/payments-js'

const payments = await loadPayments('pk_test_xxx')
...

const widgets = payments.widgets({
  clientSecret: "sflw_secret_xxxxx",
});

<div id="payment-form"></div>

const paymentForm = widgets.createForm("payment", {
  layout: "tab",
});
paymentForm.mount("#payment-form");

const result = await widgets.confirmSetup({
  return_url: 'https://example.com/setup-complete'
});

if (result.error) {
  // エラー処理
  console.error(result.error);
}

https://example.com/setup-complete?setup_flow_id=sflw_xxxxx&setup_flow_client_secret=sflw_secret_xxxxx

const setupFlow = await payments.retrieveSetupFlow(
  "sflw_secret_xxxxx"
);

if (setupFlow.status === 'succeeded') {
  // 登録成功
  const paymentMethodId = setupFlow.payment_method;
  console.log('登録された支払い方法:', paymentMethodId);
} else {
  // 登録失敗時の処理
}

import { createClient, createCheckoutSession } from '@payjp/payjpv2'

const client = createClient({
  apiKey: process.env.PAYJP_API_KEY!,
})

app.post('/create-checkout-session', async (req, res) => {
  try {
    const { data: session } = await createCheckoutSession({
      client,
      body: {
        mode: 'setup',
        customer_id: 'cus_xxxxx',
        payment_method_types: ['card'],
        success_url: 'https://example.com/setup-complete',
        cancel_url: 'https://example.com/setup-cancel',
      }
    })
    res.redirect(303, session.url)
  } catch (error) {
    console.error('Checkout session creation failed:', error)
    res.status(500).json({
      error: '登録画面の生成に失敗しました。'
    })
  }
})

<form action="/create-checkout-session" method="POST">
  <button type="submit">支払い方法を登録する</button>
</form>

app.post('/webhook', (req, res) => {
  const event = req.body

  if (event.type === 'checkout.session.completed') {
    const session = event.data

    if (session.mode === 'setup') {
      // 支払い方法の登録完了
      // setup_flow_id を使って SetupFlow を取得し、payment_method_id を確認できます
      console.log('支払い方法が登録されました:', session.setup_flow_id)
    }
  }

  res.json({ received: true })
})

import { createClient, getPaymentFlow } from '@payjp/payjpv2'

const client = createClient({
  apiKey: process.env.PAYJP_API_KEY!,
})

const { data: paymentFlow } = await getPaymentFlow({
  client,
  path: { payment_flow_id: 'pfw_xxxxx' }
})

if (paymentFlow.status === 'succeeded') {
  const paymentMethodId = paymentFlow.payment_method_id
  // この ID を保存しておく
}

curl -X POST https://api.pay.jp/v2/payment_methods/pm_xxxxx/attach \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "customer_id": "cus_xxxxx"
  }'