カテゴリー:
Stripe
閲覧数:297 配信日:2019-03-08 12:11
最初に結論
根本的に勘違いしていた
・原因は「入力場所間違い」
・「名前」と「カード番号」を入力しなければいけないのに、「名前」欄にカード番号を入力して「カード番号」欄には何も入力せず「送信ボタン」を押していた
「名前」欄
・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
テスト環境において、下記コードで、カード番号を「4242424242424242」と入力して有効期限と指定番号を入力して送信すると、エラーが表示されます。何が悪いのでしょうか？
{type: "validation_error", code: "incomplete_number", message: "カード番号に不備があります。"}
{type: "validation_error", code: "incomplete_number", message: "カード番号に不備があります。"}
<?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 について