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

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

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

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

  決済
 

作成方法

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

STEP.1

stripe管理画面にて

1. 「Checkout クライアント専用組み込み」を有効化
2. ドメイン追加

STEP.2

stripeに商品を登録

STEP.3

サイトにｈｔｍｌコードを記載する。
（対応箇所は要変更）

<!-- 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>