カテゴリー:
Stripe
閲覧数:320 配信日:2019-02-26 12:20
Custom
Checkoutを起動するために任意のHTML要素またはJavaScriptイベントを使用できる
・カスタム組み込みには堅固なJavaScriptのスキルが必要
・Simple組み込みで必要なすべてのステップを実行する必要がある
ページがロードされたら？
・StripeCheckout.configure()を使ってハンドラオブジェクトを作成する必要がある
・その後、任意のイベントに応答してハンドラーでopen()を呼び出すことができる
チェックアウトプロセスを中止する必要がある場合は？
・例えば、ナビゲーションがsingle-page applicationで行われているときに、ハンドラでclose（）を呼び出す
・キーパラメータはconfigure()に渡す必要がある
・他のオプションはconfigure()、またはopen()の何れかへ渡すことができる
<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>
設定必須
| キー | 説明 |
|---|---|
| key | 公開キー（テスト用または本番用） |
| token もしくは source | チェックアウトプロセスが完了したときに呼び出すコールバック。両方ではなく、トークンコールバックまたはソースコールバックのいずれかを渡す。 チェックアウトは、トークンオブジェクトを使用してトークンコールバックを呼び出し、ソースオブジェクトを使用してソースコールバックを呼び出す。 function(token, args) tokenは作成されたトークンオブジェクト token.idは、請求を作成するために使用することも、顧客に添付することもできる token.emailには、ユーザーが入力した電子メールアドレスが含まれている argsは、有効な場合、請求先住所と出荷先住所を含むオブジェクトである function(source, args) sourceは作成されたSourceオブジェクト source.idは、請求を作成するために使用することも、顧客に添付することもできる source.owner.emailには、ユーザーが入力した電子メールアドレスが含まれている argsは、有効な場合、請求先住所と出荷先住所を含むオブジェクトである argsオブジェクトの例 { |
強く推奨されている設定オプション
以下の設定オプションを使用して、Checkoutの外観と動作を変更する
| キー | 説明 |
|---|---|
| image | ブランドまたは製品の正方形の画像を指す相対URLまたは絶対URL。推奨される最小サイズは128 x 128 px。サポートされている画像の種類は、 .gif 、 .jpeg 、及び.png |
| name | あなたの会社またはウェブサイトの名前 |
| description | 販売している製品またはサービスの説明 |
| amount | [チェックアウト]ダイアログでユーザーに表示される金額（JPY）。 APIを使用して請求を作成するときに、金額を明示的に含める必要がある。 （また、デフォルトのUSDを変更するには、Checkoutにdata-currencyの値を指定する必要がある） |
| locale | 利用可能な場合、 ユーザーの希望する言語でCheckoutを表示するには、 autoを指定する。 デフォルトでは英語が使用される |
| zip-code | Checkoutが請求先の郵便番号を検証するかどうかを指定する（trueまたはfalse）。 デフォルトはfalseだが、アカウント設定におけるバリデーションfalseによる拒否を有効にするためtrueに設定することを強くお勧めする。日本アカウント未対応 |
| billing-address | Checkoutがユーザーの請求先住所を収集するかどうかを指定する（trueまたはfalse）。 デフォルトはfalse |
設定オプション
| キー | 説明 |
|---|---|
| currency | 金額の通貨（3文字のISOコード ）。 デフォルトはUSD |
| panel-label | チェックアウトフォームの支払いボタンのラベル（ Subscribe, Pay {{amount}}など）。 ラベル値に{{amount}}を含めると、ローカライズ版のdata-amount置き換えられる。 それ以外の場合は、ローカライズされたdata-amountがラベルの末尾に追加される。 チェックアウトは、カスタムラベルをユーザーの希望する言語に翻訳しない |
| shipping-address | Checkoutがユーザーの配送先住所を収集するかどうかを指定する（trueまたはfalse）。 デフォルトはfalse |
| あなたのユーザーのEメールアドレスを既に知っている場合は、それをCheckoutに提供して事前入力することができる | |
| label | 青いボタンに表示されるテキスト。 デフォルトは Pay with Card。 チェックアウトは現在このラベルを翻訳していない |
| allow-remember-me | 将来の購入のために「 Remember Me」というオプションを含めるかどうかを指定する（trueまたはfalse）。 デフォルトはtrue。 この機能は、Cookieを設定したり、ブラウザのlocalStorage使用したりできることに依存しており、顧客の「特定のプライバシー設定」が有効になっている場合は利用できない場合がある |
| opened | function() Checkoutが開かれたときに呼び出すコールバック |
| closed | function() Checkoutが閉じられたときに呼び出すコールバック。 トークンまたはソースコールバックの後に呼び出される（トークン化またはソースの作成が成功した場合） |
エラー
checkout.js:2 StripeCheckout.configure: The options 'source' and 'token' can not be used at the same time.
You can learn about the available configuration options in the Checkout docs:
You can learn about the available configuration options in the Checkout docs: