More than 1 year has passed since last update.

[ノーコード x Stripe で始めるオンライン決済] コードを書かずに、WordPressにStripeを利用した決済フォームへのリンクを設定する方法+α

Last updated at 2022-02-03Posted at 2021-12-18

この記事は「WP ZoomUP Advent Calendar 2021」12/18に寄稿したものです。

WordPressで作られたサイトで、なにかしらの支払い機能を導入する場合、もっとも有名な方法は「WooCommerceプラグイン」を利用することです。
これにより、より柔軟な商品ページ・決済ページとマイページ・そして管理画面を手に入れることができます。

ただし、商品数が少ない場合や静的化して運用する場合、またはプラグインのアップデート検証などの運用体制がとれない場合など、WooCommerceプラグインを導入することが難しいケースも少なくありません。

その場合に取れる方法の１つとして、「Stripeの支払いリンク」機能を利用する方法を紹介します。

支払いリンク（Payment Links）とは

Stripeの支払いリンクは、buy.stripe.comから始まる決済ページへのURLをStripe Dashboardから発行できる仕組みです。

URLにアクセスすると、Stripeが提供する決済フォームを利用して商品の購入や定期課金の申し込みが可能になります。

設定項目についても、Dashboardからある程度柔軟に変更することができます。

支払いリンクをWordPressで利用する

支払いリンク機能を利用することで、「商品や定期課金申し込みのURL」をStripe Dashboardで発行できます。

あとは、発行したURLをWordPressの記事内でリンクとして使用するだけで、簡単に決済機能を追加できます。

WordPressのブロックエディターを利用している場合は、テキストやボタンとしてリンクを設定することができます。

支払いリンク（Payment Links）以前の方法

支払いリンクがリリースされる前は、以下のようなJavaScriptコードを埋め込む必要がありました。

<!-- 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. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"
  id="checkout-button-price_1K7Wz6L6R1kGwUF4ePxqXXbL"
  role="link"
  type="button"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
  var stripe = Stripe('pk_test_xxxxxxx');

  var checkoutButton = document.getElementById('checkout-button-price_1K7Wz6L6R1kGwUF4ePxqXXbL');
  checkoutButton.addEventListener('click', function () {
    /*
     * When the customer clicks on the button, redirect
     * them to Checkout.
     */
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_1xxxxx', quantity: 1}],
      mode: 'payment',
      /*
       * Do not rely on the redirect to the successUrl for fulfilling
       * purchases, customers may not always reach the success_url after
       * a successful payment.
       * Instead use one of the strategies described in
       * https://stripe.com/docs/payments/checkout/fulfill-orders
       */
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/canceled',
    })
    .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>