テレットブログ

stripe(新バージョン)での購入ボタンの作成方法

2020年09月30日
image
paypalもいいけど、paypalは購入者もユーザー作成が必要なので、ちょっと不便と思っている。
なので近年ははstripeを好んで利用導入しています。

しかしながら今年の年頭にstripeのversionが上がり、1ページ画面利用での決済画面への移行となりました。

Stripeの購入ボタンを作成するのに旧バージョンの情報はありますが、
新バージョンv3での場合での設置方法を紹介

今回の方法はstripe管理画面にて登録した商品でのボタン作成方法です。
以下のようなボタン(ボタンクリックで新決済画面が開きます)

 
 

作成方法


stripeを契約している前提です。
 

STEP.1

stripe管理画面にて
  1. 「Checkout クライアント専用組み込み」を有効化
  2. ドメイン追加



STEP.2

stripeに商品を登録


STEP.3

サイトにhtmlコードを記載する。
(対応箇所は要変更)
 
<!-- Stripe.js 読込 -->
<script src="https://js.stripe.com/v3"></script>
<!-- ボタン、botan ID を設定 -->
<button id="checkout-button-price_1HWkUDEdGEe8ZreMtDTT6iNE" role="link" style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em" type="button">決済</button> 

<script>
(function() {
 //公開Keyを記載
  var stripe = Stripe("pk_live_51HWCIFEdGEe8ZreMspx6DyesrfWy3tGtPCUSru8uzBJa6TeYa3zhp0LSew3lAQlzOYFgI3Gg2K8wDzwBgt4hSfqV00swZFv00z");
//ボタン botan IDを記載
  var checkoutButton = document.getElementById("checkout-button-price_1HWkUDEdGEe8ZreMtDTT6iNE");
  checkoutButton.addEventListener("click", function () {

    stripe.redirectToCheckout({
      lineItems: [{price: "price_1HWkUDEdGEe8ZreMtDTT6iNE", quantity: 1}], //追加した商品のAPI IDを記載  &数量
      mode: "payment",
      successUrl: "https://terreto.work/paystripe_success", //成功ページのURL
      cancelUrl: "https://terreto.work/paystripe_error", //失敗ページのURL
    })
    .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>
 
注意点:
サンキューメール等は別途設定必要です

 


新着記事

image

CodeIgniter3でリダイレクトでセッション消える Part2

2021年10月07日
前回の記事でセキュリティ上、httpsにのみ対応する。というセッション問題解決が
Read more →
image

Codeigniter3 PHP8環境だとセッションflashdataが消えない

2021年10月01日
CodeIgniterは、PHPのフレームワークであり、非常に簡単で快速で、We
Read more →
image

CodeIgniter3でリダイレクトでセッション消える

2020年10月28日
テストサーバ(http)にて確認していると 管理画面ではセッションが空に!
Read more →
image

防衛省、サイバーセキュリティ担当の防衛技官を募集中月給30万円

2020年10月16日
 防衛省が、サイバーセキュリティに従事する防衛技官を募っている。自衛隊のシステム
Read more →
image

Amazon Echo Auto アマゾンエコーオート 開封&利用一週間レビュー

2020年10月08日
早速アマゾン・エコーオートを購入して車に取り付けて利用してみました! 報道
Read more →
Choose Colour