Q37 ／ A37抜粋

やりたいこと
・移行ではなく、新規でPaymentIntent作成。支払い実行
・自動で確認

試したこと
・https://dashboard.stripe.com/test/events/evt_1ESXe1JiXAQvfxv3YdG1pNTV

出来たこと
・webhookで"payment_intent.succeeded"イベントを受け取り
・支払い実行

問題点
・PaymentIntentで支払いを行った後、成功画面が表示されない
・webhookで"payment_intent.succeeded"イベントを受け取っても、そこへは画面遷移しない

質問1
・PaymentIntentで支払いを行った後、成功画面を表示させるにはどうすれば良いですか？
・Checkout newでは、下記のように'success_url'を指定できたけれども、Checkout を使用しない場合は'success_url'をどう指定すれば良い？

$checkoutSession = \Stripe\Checkout\Session::create([

 'customer_email' => 'customer@example.com',

 'success_url' => 'https://xxxx/thanks.php',

質問2
・成功確認は下記何れで行うのですか？ 何れでも良い？ あるいは、何れかが良い？　そもそも下記判定は何が異なるのですか？
・webhookの"payment_intent.succeeded"イベントで判定
・stripe.jsの「await stripe.handleCardPayment」メソッドのレスポンスであるerrorで判定

試したコード(PHP)
▼index.php

<?php

\Stripe\Stripe::setApiKey("sk_test_xxxx");

$paymentintent = \Stripe\PaymentIntent::create([

  "amount" => 1099,

  "currency" => "jpy",

]);

?>

<input id="cardholder-name" type="text">

<div id="card-element"></div>

<button id="card-button" data-secret="<?php echo $paymentintent->client_secret; ?>">

  Submit Payment

</button>



<script src="https://js.stripe.com/v3/"></script>

<script>

const stripe = Stripe('pk_test_xxxx');



const elements = stripe.elements();

const cardElement = elements.create('card');

cardElement.mount('#card-element');



const cardholderName = document.getElementById('cardholder-name');

const cardButton = document.getElementById('card-button');

const clientSecret = cardButton.dataset.secret;



cardButton.addEventListener('click', async (ev) => {

  const {paymentIntent, error} = await stripe.handleCardPayment(

    clientSecret, cardElement, {

      payment_method_data: {

        billing_details: {name: cardholderName.value}

      }

    }

  );



  if (error) {

    // Display error.message in your UI.

    console.log(error)

  } else {

    // The payment has succeeded. Display a success message.

    console.log("成功")

  }

});

</script>