<form action="/hoge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
クレジット または デビットカード
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>支払う</button>
</form>
JavaScript の記述
Elements のインスタンスと Stripe が持っている要素(支払いフォームの部品)を生成し、上記 HTML ファイルに記述した要素と紐付ける
// Elementsのインスタンスを生成
var stripe = Stripe('publishable API key');
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// CSSの記述
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: "#32325d",
}
};
// Create an instance of the card Element.
// カード要素のインスタンス生成
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
// id="card-element"の<div>タグにカード要素のインスタンスを紐付ける(mountする)
card.mount('#card-element');
// Create a token or display an error when the form is submitted.
// トークンの生成、またはサブミット時のエラーを表示
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the customer that there was an error.
// エラーがあった場合、エラーを表示
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
// エラーがない場合、トークン送信
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
// トークンIDを付加してフォームデータをサブミット
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// サブミット
form.submit();
}
// Stripeライブラリの読み込み（インストール方法によって記述が変わるので注意）
require_once('vendor/autoload.php');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("secret API key");
// Token is created using Checkout or Elements!
// トークンは、Checkout か Elementsで作成される
// Get the payment token ID submitted by the form:
// フォームから送られたトークンID取得
$token = $_POST['stripeToken'];
$charge = \Stripe\Charge::create([
'amount' => 999,
'currency' => 'usd',
'description' => 'Example charge',
'source' => $token,
]);
![[PHP] オンライン決済Stripeの新バージョンBeta版 Checkoutの使い方](https://agohack.com/wp/wp-content/uploads/2019/05/stripe_opg-100x100.png)
https://agohack.com/stripe-checkout-beta/
