如何与 Stripe Checkout JS/HTML 集成

Question

I am trying to follow this documentation in trying to implement stripe's checkout:

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

I currently haven't got it working as when I click my buy now button in my html file, it doesn't do anything (this is through my localhost for test purposes). When I say it doesn't do anything, I mean I click the button and nothing loads, remain on the same page.

Below is the html code for the buy now button along with sone javascript code:

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

I then have two javascript files that deal with the stripe and which you can compare with the documentation:

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`.
});
}

stripe.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/',
  });
})();

My question is simply how can I get this to work?

Answer 1

The stripe.JS file you have there is server-side code, meant to run on Node.js - it won't work in the browser, and you should never ever share your Secret Key.

You can do client-only (ie, only in the browser) Checkout, but it's a different approach: https://stripe.com/docs/payments/checkout/client-only