Stripe Q15。PaymentIntent でエラー。カード番号に不備があります。

最初に結論

根本的に勘違いしていた
・原因は「入力場所間違い」
・「名前」と「カード番号」を入力しなければいけないのに、「名前」欄にカード番号を入力して「カード番号」欄には何も入力せず「送信ボタン」を押していた

「名前」欄
・HTML直書き

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

「カード番号」欄
・カードアイコンの右横
・JSのasyncで非同期生成

<input autocomplete="cc-number" autocorrect="off" 

 spellcheck="false" name="cardnumber" 

 class="InputElement is-complete" inputmode="numeric" 

 aria-label="Credit or debit card number" placeholder="カード番号" 

 aria-placeholder="カード番号" aria-invalid="false" 

 value="4242 4242 4242 4242"

・然るべきところに入力して送信したところ、無事成功した

質問履歴15

PaymentIntent でエラー。カード番号に不備があります。
・2019/3/8

<?php

require_once( dirname(__FILE__).'/../../vendor/autoload.php');

\Stripe\Stripe::setApiKey("sk_test_××××");

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

  "amount" => 1099,

  "currency" => "jpy",

  "payment_method_types" => ["card"],

]);

?>





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

<!-- placeholder for Elements -->

<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_××××', {

  betas: ['payment_intent_beta_3']

});



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, {

      source_data: {

        owner: {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>

下記を疑うも、結局関係なかった
・Mixed Content: This request has been blocked; the content must be served over HTTPS について