条带处理在我的 java 脚本文件中不起作用

Question

我尝试使用 Java 脚本进行付款，但出了点问题，我在浏览器控制台中收到以下错误：

checkout.js:26
POST http://localhost:8080/create-payment-intent 405 (Method Not Allowed)
initialize @ checkout.js:26
        (anonymous) @ checkout.js:13
checkout.js:59  Uncaught (in promise) IntegrationError: In order to create a linkAuthentication element, you must pass a clientSecret or mode when creating the Elements group.
        e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
at $t (v3/:1:279900)
at Vn (v3/:1:327665)
at new t (v3/:1:332993)
at t.<anonymous> (v3/:1:346309)
at t.create (v3/:1:101574)
at initialize (checkout.js:41:48)

HTML和js中的代码不是我的，我在You Tube上找到的，但是当我下载该项目时一切正常但现在，不幸的是，我遇到了这些错误。 Spring安全可能有问题？这是作者项目的链接https://github.com/davidmbochi/stripe-spring-boot 这是我的 gitHub 项目https://github.com/DawidZelezniak420/Courses-App

我的应用程序中的流程如何运作： 1.我的html表单将数据发送到checkout-form.html

package com.zelezniak.project.controller;

import com.zelezniak.project.dto.PaymentInfo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;


@Controller
@Slf4j
public class CheckoutController {
    @Value("${stripe.api.publicKey}")
    private String publicKey;

    @PostMapping({"/checkout"})
    public String showCard(@ModelAttribute PaymentInfo paymentInfo, Model model) {
        model.addAttribute("publicKey", this.publicKey);
        model.addAttribute("amount", paymentInfo.getAmount());
        model.addAttribute("email", paymentInfo.getEmail());
        model.addAttribute("productName", paymentInfo.getProductName());
        return "checkout-form";
    }
}

2.checkout-form.html 检索数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/checkout.css" />
    <script src="https://js.stripe.com/v3/"></script>

    <script th:inline="javascript">

        /*<![CDATA[*/

        var publicKey = /*[[${publicKey}]]*/ null;
        var amount = /*[[${amount}]]*/ null;
        var email = /*[[${email}]]*/ null;
        var productName = /*[[${productName}]]*/ null;

        /*]]>*/
    </script>

    <script src="/checkout.js" defer></script>
</head>
<body>
<!-- Display a payment form -->
<form id="payment-form">
    <span>You are about to make a payment of: </span>
    <span th:text="*{amount}"></span>
    <span>USD</span>
    <div id="link-authentication-element">
        <!--Stripe.js injects the Link Authentication Element-->
    </div>
    <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
    </div>
    <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
    </button>
    <div id="payment-message" class="hidden"></div>
</form>
</body>
</html>

3.数据被发送到checkout.js，在这个文件中我遇到了我之前提到的问题

// This is your test publishable API key.
const stripe = Stripe(publicKey);

// The items the customer wants to buy
const request = {
    amount: amount,
    email: email,
    productName: productName
}

let elements;

initialize();
checkStatus();

document
    .querySelector("#payment-form")
    .addEventListener("submit", handleSubmit);

let emailAddress = '';
// Fetches a payment intent and captures the client secret

let paymentIntentID = '';

async function initialize() {
    const response = await fetch("/create-payment-intent", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(request),
    });

    const { intentID, clientSecret } = await response.json();

    paymentIntentID = intentID;

    const appearance = {
        theme: 'stripe',
    };
    elements = stripe.elements({ appearance, clientSecret });

    const linkAuthenticationElement = elements.create("linkAuthentication");
    linkAuthenticationElement.mount("#link-authentication-element");

    linkAuthenticationElement.on('change', (event) => {
        emailAddress = event.value.email;
    });

    const paymentElementOptions = {
        layout: "tabs",
        defaultValues: {
            billingDetails:{
                email: request.email
            }
        }
    };

    const paymentElement = elements.create("payment", paymentElementOptions);
    paymentElement.mount("#payment-element");
}

console.log(paymentIntentID);

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);

    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: "https://dashboard.stripe.com/test/payments/"+paymentIntentID,
            receipt_email: emailAddress
        },
    });

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
        showMessage(error.message);
    } else {
        showMessage("An unexpected error occurred.");
    }

    setLoading(false);
}

// Fetches the payment intent status after payment submission
async function checkStatus() {
    const clientSecret = new URLSearchParams(window.location.search).get(
        "payment_intent_client_secret"
    );

    if (!clientSecret) {
        return;
    }

    const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

    switch (paymentIntent.status) {
        case "succeeded":
            showMessage("Payment succeeded!");
            break;
        case "processing":
            showMessage("Your payment is processing.");
            break;
        case "requires_payment_method":
            showMessage("Your payment was not successful, please try again.");
            break;
        default:
            showMessage("Something went wrong.");
            break;
    }
}

// ------- UI helpers -------

function showMessage(messageText) {
    const messageContainer = document.querySelector("#payment-message");

    messageContainer.classList.remove("hidden");
    messageContainer.textContent = messageText;

    setTimeout(function () {
        messageContainer.classList.add("hidden");
        messageContainer.textContent = "";
    }, 4000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
    if (isLoading) {
        // Disable the button and show a spinner
        document.querySelector("#submit").disabled = true;
        document.querySelector("#spinner").classList.remove("hidden");
        document.querySelector("#button-text").classList.add("hidden");
    } else {
        document.querySelector("#submit").disabled = false;
        document.querySelector("#spinner").classList.add("hidden");
        document.querySelector("#button-text").classList.remove("hidden");
    }
}

4.checkout.js 尝试调用此方法，但不知道为什么它不起作用

package com.zelezniak.project.controller;

import com.stripe.exception.StripeException;
import com.stripe.model.PaymentIntent;
import com.stripe.param.PaymentIntentCreateParams;
import com.stripe.param.PaymentIntentCreateParams.AutomaticPaymentMethods;
import com.zelezniak.project.dto.PaymentInfo;
import com.zelezniak.project.dto.Response;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@Slf4j
public class PaymentIntentController {

    @PostMapping("/create-payment-intent")
    public Response createPaymentIntent(@RequestBody PaymentInfo paymentInfo)
            throws StripeException {
        PaymentIntentCreateParams params =
                PaymentIntentCreateParams.builder()
                        .setAmount((long) (paymentInfo.getAmount() * 100L))
                        .putMetadata("productName",
                                paymentInfo.getProductName())
                        .setCurrency("usd")
                        .setAutomaticPaymentMethods(
                                PaymentIntentCreateParams
                                        .AutomaticPaymentMethods
                                        .builder()
                                        .setEnabled(true)
                                        .build()
                        )
                        .build();

        PaymentIntent intent =
                PaymentIntent.create(params);

        return new Response(intent.getId(),
                intent.getClientSecret());
    }
}

我试图找到一些解决方案，但没有任何效果:(

Answer 1

您的代码向

POST

发出

http://localhost:8080/create-payment-intent

请求，该请求以

状态进行响应。

由于

响应，Stripe 元素未收到加载所需的正确客户端密钥值。

因此，您可能需要查看服务器日志以了解导致

的原因并首先修复该问题。

条带处理在我的 java 脚本文件中不起作用

问题描述投票：0回答：1

1个回答

最新问题

条带处理在我的 java 脚本文件中不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1