在 Netlify 中集成 Stripe Checkout

Question

我正在尝试在 Netlify 网站中集成 Stripe Checkout。 我的网站使用 HTML、CSS 和 Javascript。 我正在尝试在 Node.js 中构建一个服务器，但我拥有的代码在 Express Node 中，而 AWS Lambda 不支持它。 如果有人能帮我修改代码以使其与 AWS Lambda 一起使用，我将不胜感激。

客户端 Javascript“checkoutstripe.js”

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
  var checkoutButton = document.getElementById('checkout-button');

  checkoutButton.addEventListener('click', function() {
    // Create a new Checkout Session using the server-side endpoint you
    // created in step 3.
    fetch('/create-checkout-session', {
      method: 'POST',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(session) {
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then(function(result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using `error.message`.
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
    });
  });

服务器端 Node.js 代码“server.js”

const express = require('express');
const app = express();

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
  });

  res.json({ id: session.id });
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

我试过整合它，但它不起作用。 它最终在控制台中出现以下错误：

checkoutstripe.js:7 POST https://webmd.netlify.app/create-checkout-session 404 (anonymous) @ checkoutstripe.js:7 checkoutstripe.js:25 错误：SyntaxError: Unexpected token < in JSON at position 0

另外，我可以删除服务器端代码中的最后一行吗？ 带有 app.listen 的那个？

更新

我尝试修改 server.js 文件和 checkoutstripe.js 文件。 但它仍然不起作用。 它不会加载服务器端代码，正如您在浏览器控制台的错误日志中看到的那样

服务器.js

const stripe = require('stripe')('sk_test_87b26c723c872');
    exports.handler = async (event) => {
      const session = await stripe.checkout.sessions.create({
        mode: 'payment',
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
    
        success_url: `https://webmd.tech/success.html`,
        cancel_url: 'https://webmd.tech/cancel.html',
        line_items: [
          {
            price_data: {
              price: 'price_1He2fDAXJjHnvDU5765',
              },
            },
            quantity: 1,
          },
        ],
      });
    
      return {
        statusCode: 200,
        body: JSON.stringify({
          sessionId: session.id,
          publishableKey: 'pk_test_f273g27fg28gf',
        }),
      };
    };

CheckoutStripe.js

var checkoutButton = document.getElementById('stripebtn');
checkoutButton.addEventListener('click', CheckoutStripe);

async function CheckoutStripe() {
    const response = await fetch('/.netlify/functions/server', {
      method: 'POST',
    }).then((res) => res.json());

    const stripe = Stripe(response.publishableKey);
    const { error } = await stripe.redirectToCheckout({
      sessionId: response.sessionId,
    });

    if (error) {
      console.error(error);
    }
  }

浏览器控制台中的错误是：

checkout.js:8 POST https://webmd.netlify.app/.netlify/functions/server 502 CheckoutStripe @ checkout.js:8 (index):1 Uncaught (in promise) IntegrationError: Invalid value for Stripe(): apiKey应该是一个字符串。 您指定：未定义。 在新的 r ( https://js.stripe.com/v3/:1:6143 ) 在 re ( https://js.stripe.com/v3/:1:15579 ) 在 pe ( https://js. stripe.com/v3/:1:16063 ) 在新 dc ( https://js.stripe.com/v3/:1:184471 ) 在 fc ( https://js.stripe.com/v3/:1 ： 185726 ) 在 HTMLAnchorElement.CheckoutStripe ( https://webmd.netlify.app/assets/js/checkout.js:12:24 )

和 netlify 函数出现以下错误：

下午 5:30:30：2020-10-20T12:30:30.285Z 未定义错误未捕获异常 {"errorType":"Runtime.UserCodeSyntaxError","errorMessage":"SyntaxError: 意外标记 ':'","stack": ["Runtime.UserCodeSyntaxError: SyntaxError: Unexpected token ':'"," at _loadUserApp (/var/runtime/UserFunction.js:98:13)"," at Object.module.exports.load (/var/runtime/UserFunction .js:140:17)"," 在 Object. (/var/runtime/index.js:43:30)"," 在 Module._compile (internal/modules/cjs/loader.js:1137:30)" ," 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)"," 在 Module.load (internal/modules/cjs/loader.js:985:32)", " at Function.Module._load (internal/modules/cjs/loader.js:878:14)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)"," at内部/main/run_main_module.js:17:47"]}

Answer 1

我看到你使用了event.preventDefault(); 在CheckoutStripe.js但您尚未定义事件参数。