在Netlify中集成Stripe Checkout

编程问答 2022-06-07

问题描述

我正在尝试在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开机自检 https://webmd.netlify.app/create-checkout-session 404（匿名）@ checkoutstripe.js：7 checkoutstripe.js：25错误：SyntaxError： 意外令牌

还可以删除服务器端代码中的最后一行吗？有app.listen的人？

更新

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

Server.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',});
    
      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',}).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开机自检 https://webmd.netlify.app/.netlify/functions/server 502 CheckoutStripe @ checkout.js：8（索引）：1未捕获（承诺） IntegrationError：Stripe（）的值无效：apiKey应该为 串。您指定了：未定义。 在新的r（https://js.stripe.com/v3/:1:6143） 在重新（https://js.stripe.com/v3/:1:15579） 在pe（https://js.stripe.com/v3/:1:16063） 使用新的直流（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 PM：2020-10-20T12：30：30.285Z undefined ERROR未捕获的异常{“ 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 ）“，”在Function.Module._load（internal / modules / cjs / loader.js：878：14）“，”在Function.executeUserEntryPoint [作为runMain]（内部/modules/run_main.js:71:12）“ ，“在internal / main / run_main_module.js：17：47”]}

解决方法

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

aws-lambdajavascriptnetlifystripe-checkout