如何與 Stripe Checkout JS/HTML 集成

Question

我正在嘗試按照此文檔嘗試實現條帶結帳：

https://stripe.com/docs/payments/checkout/one-time

我目前還沒有讓它工作，因為當我在我的 html 文件中點擊我的立即購買按鈕時，它沒有做任何事情（這是通過我的本地主機進行測試）。 當我說它不做任何事情時，我的意思是我單擊按鈕並且沒有加載任何內容，保持在同一頁面上。

以下是立即購買按鈕的 html 代碼以及 javascript 代碼：

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

...
<a class="buy-btn" onclick="showStripe()">Buy Now</a>
...
    <script src="myScript.js"></script>
    <script src="stripe.js"></script>

然后我有兩個處理條紋的 javascript 文件，您可以將它們與文檔進行比較：

myScript.js：

var stripe = Stripe('pk_test_xxxx'); //xxxx out key for SO

function showStripe(){
stripe.redirectToCheckout({
  // Make the id field from the Checkout Session creation API response
  // available to this file, so you can provide it as parameter here
  // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
  sessionId: '{{CHECKOUT_SESSION_ID}}'
}).then(function (result) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});
}

條紋.JS

// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
const stripe = require('stripe')('sk_test_xxxx'); //xxxx out key for SO

(async () => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [{
      name: 'title',
      description: 'description',
      images: ['img/top-view-img.jpg'],
      amount: 25,
      currency: 'gbp',
      quantity: 1,
    }],
    payment_intent_data: {
      capture_method: 'manual',
    },
    success_url: 'http://localhost:8080/order-confirmation',
    cancel_url: 'http://localhost:8080/',
  });
})();

我的問題很簡單，我怎樣才能讓它發揮作用？

Answer 1

您擁有的stripe.JS文件是服務器端代碼，旨在在 Node.js 上運行 - 它無法在瀏覽器中運行，您永遠不應該共享您的密鑰。

您可以僅在客戶端（即，僅在瀏覽器中）結帳，但這是一種不同的方法： https : //stripe.com/docs/payments/checkout/client-only