Vue.js前端与.NET Web API后端集成Mollie支付问询

核心架构：前后端配合实现 #

支付敏感逻辑（API密钥、订单签名、状态校验）必须放在后端，前端仅负责触发支付、跳转至Mollie托管页面、展示支付结果。完全前端实现会暴露API密钥，存在安全风险；全后端实现则无法提供流畅的用户交互，所以前后端配合是最优解。

具体实现步骤 #

1. 后端配置与开发 #

安装Mollie API包

在.NET项目中安装Viincenttt/MollieApi包：

Install-Package Mollie.Api

或通过.NET CLI：

dotnet add package Mollie.Api

配置API密钥

将Mollie的API密钥（从Mollie后台获取）存入appsettings.json，避免硬编码：

{
  "Mollie": {
    "ApiKey": "test_你的测试密钥"
  }
}

注册Mollie服务

在Program.cs中注册Mollie服务，注入API密钥：

builder.Services.AddMollieApi(options => {
    options.ApiKey = builder.Configuration["Mollie:ApiKey"];
});

新增支付控制器

创建PaymentController，处理支付创建、Mollie回调、支付状态查询：

using Mollie.Api.Models.Payment;
using Mollie.Api.Models.Payment.Request;
using Mollie.Api.Services;
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class PaymentController : ControllerBase {
    private readonly IMollieClient _mollieClient;

    public PaymentController(IMollieClient mollieClient) {
        _mollieClient = mollieClient;
    }

    // 前端调用此接口创建支付，获取Mollie跳转链接
    [HttpPost("create")]
    public async Task<IActionResult> CreatePayment([FromBody] PaymentCreateRequestDto request) {
        var paymentRequest = new PaymentCreateRequest {
            Amount = new Amount(Currency.EUR, request.Amount),
            Description = request.Description,
            RedirectUrl = "https://你的前端域名/payment-result", // 支付完成后跳转回前端页面
            WebhookUrl = "https://你的后端域名/api/payment/webhook" // Mollie异步通知支付状态的地址
        };

        var payment = await _mollieClient.PaymentClient.CreatePaymentAsync(paymentRequest);
        return Ok(new { PaymentUrl = payment.Links.Checkout.Href, PaymentId = payment.Id });
    }

    // Mollie回调接口，处理支付状态变更
    [HttpPost("webhook")]
    public async Task<IActionResult> Webhook() {
        var paymentId = Request.Query["id"].ToString();
        if (string.IsNullOrEmpty(paymentId)) return BadRequest();

        var payment = await _mollieClient.PaymentClient.GetPaymentAsync(paymentId);
        // 根据payment.Status更新你的订单状态（如Paid、Failed、Cancelled等）
        // 注意：需验证回调的真实性（可通过签名校验，参考Mollie文档）

        return Ok(); // 返回200给Mollie，确认收到通知
    }

    // 前端查询支付状态
    [HttpGet("status/{paymentId}")]
    public async Task<IActionResult> GetPaymentStatus(string paymentId) {
        var payment = await _mollieClient.PaymentClient.GetPaymentAsync(paymentId);
        return Ok(new { Status = payment.Status.ToString() });
    }
}

// 前端传递的请求DTO
public class PaymentCreateRequestDto {
    public decimal Amount { get; set; }
    public string Description { get; set; }
}

2. 前端（Vue）交互逻辑 #

触发支付

在Vue组件中调用后端创建支付接口，拿到Mollie链接后跳转：

<template>
  <button @click="initPayment">发起支付</button>
</template>

<script setup>
import axios from 'axios';

const initPayment = async () => {
  try {
    const response = await axios.post('/api/payment/create', {
      amount: 99.99,
      description: "测试订单"
    });
    // 跳转至Mollie托管支付页面
    window.location.href = response.data.paymentUrl;
  } catch (error) {
    console.error('创建支付失败:', error);
  }
};
</script>

支付结果展示

支付完成后，Mollie会跳转回你配置的RedirectUrl（如/payment-result），在该页面调用后端接口查询支付状态：

<template>
  <div>
    <div v-if="status === 'Paid'">支付成功！</div>
    <div v-else-if="status === 'Failed'">支付失败，请重试</div>
    <div v-else>支付处理中，请稍候...</div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const status = ref('Pending');
const paymentId = new URLSearchParams(window.location.search).get('paymentId'); // 可在跳转时携带paymentId

onMounted(async () => {
  if (paymentId) {
    const response = await axios.get(`/api/payment/status/${paymentId}`);
    status.value = response.data.status;
  }
});
</script>

关键注意事项 #

• API密钥安全：绝对不要在前端代码中暴露Mollie API密钥，所有密钥相关操作必须在后端完成。
• 回调校验：务必验证Mollie回调的真实性（通过请求头中的Mollie-Signature校验），防止恶意请求篡改订单状态。
• 环境区分：测试环境用Mollie测试密钥，生产环境切换为正式密钥，确保支付流程在测试环境验证无误后再上线。
• 异常处理：处理支付过程中的各种异常情况（如用户取消支付、网络超时等），给用户清晰的提示。

内容的提问来源于stack exchange，提问作者Ibrahim