web-dev-qa-db-ja.com

StripeCheckoutカスタムボタンを実装する方法

ドキュメントによると、CheckoutはSimpleとCustomの2つの異なる統合をサポートしています。

簡単な方法は私のために働きます：

**<form action="create_subscription.php" method="POST">**
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="asdsdfasd3232"
  data-amount="2000"
  data-name=""
  data-description="2 widgets"
  data-image="https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png"
  data-locale="auto">
</script>
</form>

ただし、カスタムの方法では理解できません方法と場所「create_subscription.php」スクリプトを呼び出す必要があります。これはカスタム統合コードです：

<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'asdsdfasd3232',
  image: 'https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.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: '',
    description: '2 widgets',
    amount: 2000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

このコードを試しましたが、機能しません。誰かが私を正しい方向に向けることができますか？

<form action="/create_subscription.php" method="POST">
      <script src="https://checkout.stripe.com/checkout.js"></script>
      <div id="stripe-demo" class="evo-button rounded cele">
      <span>Register</span>
      </div>

      <script>
      var handler = StripeCheckout.configure({
        key: "asdsdfasd3232",
        image: "img/logo.png",
        name: "",
        description: "Subscription for 1 month",
        panelLabel: "Sign Me Up!",
        amount: "2000",
        allowRememberMe: false
      });

      document.getElementById('stripe-demo').addEventListener('click', function(e) {
        handler.open();
        e.preventDefault();
      });

      window.addEventListener('popstate', function() {
        handler.close();
      });
      </script>
    </form>
javascriptphpstripe-payments
5
Lisan Mulena

Comdenzに感謝します。これは、既存のフォームを使用してサーバーサイドコードを呼び出す方法です。

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
 key: "your testing key",
  locale: 'auto',
  image: "image/directory",
  name: "Name",
  description: "your discription",
  panelLabel: "Click to make payment",
  allowRememberMe: false,


  token: function(token) {
    // Prevent user from leaving page
    window.onbeforeunload = function() {
            return "";
        }

    // Dynamically create a form element to submit the results
    // to your backend server
    var form = document.getElementById("payment-form");
    form.setAttribute('method', "POST");
    form.setAttribute('action', "//localhost/dubb/charge.php");

    // Add the token ID as a hidden field to the form payment-form
    var inputToken = document.createElement("input");
    inputToken.setAttribute('type', "hidden");
    inputToken.setAttribute('name', "stripeToken");
    inputToken.setAttribute('value', token.id);
    form.appendChild(inputToken);

    // Add the email as a hidden field to the form
    var inputEmail = document.createElement("input");
    inputEmail.setAttribute('type', "hidden");
    inputEmail.setAttribute('name', "stripeEmail");
    inputEmail.setAttribute('value', token.email);
    form.appendChild(inputEmail);

        // Finally, submit the form
    document.body.appendChild(form);

    // Artificial 5 second delay for testing
    setTimeout(function() {
        window.onbeforeunload = null;
        document.forms["payment-form"].submit()
    }, 5000);
  }

});

document.getElementById('stripe-demo').addEventListener('click', function(e) {
  handler.open();
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

これで、新しいフォームを作成する必要があります。JavaScriptを使用して既存のフォームを呼び出すだけです。

5
Lob

tokenコールバック関数では、トークンをバックエンドに送信するために必要なことは何でもする必要があります。

通常、これは非表示の要素を持つフォーム要素を使用することで実行され、コールバックから非表示の要素の値をトークンIDに設定して、フォームを送信します。

フォームを最初から動的に作成したり、AJAXリクエスト、または特定のニーズに適したその他のメソッドを起動したりすることもできます。

既存のフォームを使用し、コールバックから非表示要素の値を設定するカスタム統合の例を次に示します。 https://jsfiddle.net/ywain/g2ufa8xr/

1
Ywain

これがお役に立てば幸いです。ここで参照できます https://Gist.github.com/ziadoz/5101836

    <input 
        type="submit" 
        value="Pay with Card"
        data-key="PUBLISHABLE STRIPE KEY"
        data-amount="500"
        data-currency="cad"
        data-name="Example Company Inc"
        data-description="Stripe payment for $5"
    />

    <script src="https://checkout.stripe.com/v2/checkout.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script>
    $(document).ready(function() {
        $(':submit').on('click', function(event) {
            event.preventDefault();
            var $button = $(this),
                $form = $button.parents('form');
            var opts = $.extend({}, $button.data(), {
                token: function(result) {
                    $form.append($('<input>').attr({ type: 'hidden', name: 'stripeToken', value: result.id })).submit();
                }
            });
            StripeCheckout.open(opts);
        });
    });
    </script>

`

0
kiki_ygn

私はそれですべて終わりました。だから私は https://jsfiddle.net/user/ywain/fiddles/1/ でいくつかのヒントを見つけました。ここでは、 https://jsfiddle.net/ywain/9zscyyhg/ を確認する必要があります。夏には、tokenでストライプトークンを取得する必要があります。function（token）{// token.idを使用してトークンIDにアクセスできます。 //トークンIDをサーバー側コードに取得して使用します。

購入の送信は、Stripeモーダル支払いフォームのみをトリガーします。したがって、フォームからサイトに戻る方法が必要です。これは、追加のjavascriptコードを使用して実行する必要があります。

0
Comdenz

投稿をチェックアウトする 投稿ではなくストライプカスタムチェックアウト あなたは私と同じ問題を抱えています。これがお役に立てば幸いです

0
IMO