カテゴリー:
Stripe
閲覧数:296 配信日:2019-02-12 11:25
どこが提供している仕組みでトークン化するの? 2種類
A.Stripeが用意した仕組みを利用してトークン化
・Stripeに丸投げ
・Stripe側のサーバにて、「顧客の生のカード情報」を取得
B.あなた自身が作成した仕組みを利用してトークン化
・自力で構築
・自前でトークン化
・販売者側のサーバにて、「顧客の生のカード情報」を取得
比較一覧表
- | Stripeに丸投げ | 自力で構築 |
---|---|---|
「顧客の生のカード情報」をどこが取得するか | Stripe側のサーバ | 販売者側のサーバ |
PCI DSS 対応 | Stripe | 販売者 |
A.Stripeが用意した仕組みを利用してトークン化する方法は、5種類
「Stripeに丸投げ」する方法は、5種類に分かれる
┏Checkout
┃ ┣Simple
┃ ┗Custom
┃
┣Checkout public beta version
┃
┣Stripe.js and Elements
┃
┣iOS Integration
┃
┗Android Integration
┃ ┣Simple
┃ ┗Custom
┃
┣Checkout public beta version
┃
┣Stripe.js and Elements
┃
┣iOS Integration
┃
┗Android Integration
要点
・「checkout.js」を使用する場合、'src_xxxx'を受け取ることが出来ない
checkout.js ― Stripe.js と Stripe Elements
checkout.js
・Webとモバイルでの最もシンプルな決済フロー
比較一覧表
- | checkout.js | Stripe.js と Stripe Elements |
---|---|---|
JavaScriptライブラリのURL | https://checkout.stripe.com/checkout.js | https://js.stripe.com/v3/ |
Stripeサーバより返された「トークン」をどこで受け取る | クライアントのformタグ内 | クライアントのJavaScript処理内 |
難易度 | 易 | 難 |
比較一覧表
・「Stripeのモバイルライブラリ」については、これから確認予定
- | checkout.js | Checkout public beta version | Stripe.js と Stripe Elements |
---|---|---|---|
JavaScriptライブラリのURL | https://checkout.stripe.com/checkout.js | https://js.stripe.com/v3/ | https://js.stripe.com/v3/ |
Stripeサーバより返された「トークン」をどこで受け取る | クライアントのformタグ内 | - | クライアントのJavaScript処理内 |
あなた(販売者側)のサーバが$_POSTで受け取る内容 | array ( |
- | - |
クライアント側コード
Checkout Simple
<form action="your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_●●"
data-amount="999"
data-name="PHPデモ"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="jpy">
</script>
</form>
Checkout Custom
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_●●',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'PHPデモ',
description: '2 widgets',
currency: 'jpy',
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
Checkout public beta version
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. -->
<button id="checkout-button" role="link">Pay</button>
<div id="error-message"></div>
<script>
var stripe = Stripe('pk_test_●●', {
betas: ['checkout_beta_4']
});
var checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: 'sku_EYUuveVPe61SrH', quantity: 1}],
// Note that it is not guaranteed your customers will be redirected to this
// URL *100%* of the time, it's possible that they could e.g. close the
// tab between form submission and the redirect.
successUrl: 'https://php-demo.w4c.work/demo/settlement/stripe/checkout-beta/2/thanks.php',
cancelUrl: 'https://php-demo.w4c.work/demo/settlement/stripe/checkout-beta/2/',
clientReferenceId: 'order_123',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
</script>