AngularJS(5.0.3)/C#集成PayMill支付网关技术求助

Hey there! I get it – integrating PayMill with Angular 5 (quick note: you mentioned AngularJS 5.0.3, but that’s actually Angular 5 since AngularJS refers to the 1.x branch) and C# can feel tricky when there’s no official Angular 5-specific docs. Let’s break this down step by step using PayMill’s core JavaScript SDK, which works seamlessly with modern frontend frameworks like Angular 5:

1. Add PayMill's JavaScript SDK to your Angular app #

First, include PayMill’s bridge script in your index.html – this is the core tool we’ll use to handle card tokenization:

<!-- Paste this in your index.html <head> or <body> -->
<script type="text/javascript" src="https://bridge.paymill.com"></script>

If you prefer TypeScript, you’ll need to declare the global Paymill object in your component to avoid type errors:

// In your payment component file
declare var Paymill: any;

ngOnInit() {
  // Initialize Paymill with your public key (get this from your PayMill dashboard)
  Paymill.init('YOUR_PUBLIC_PAYMILL_KEY');
}

2. Build a payment form (no raw card data handling!) #

Create a simple form in your component template to collect card details. Critical: Never send raw card numbers/CVC to your backend (it’s a PCI compliance risk) – we’ll use PayMill to turn these details into a safe token instead.

<!-- Template-driven form example -->
<form #paymentForm="ngForm" (ngSubmit)="handlePayment(paymentForm)">
  <div class="form-group">
    <label>Card Number</label>
    <input type="text" ngModel name="cardNumber" required placeholder="4111 1111 1111 1111">
  </div>
  <div class="form-group">
    <label>Expiry (MM/YY)</label>
    <input type="text" ngModel name="expiry" required placeholder="12/28">
  </div>
  <div class="form-group">
    <label>CVC</label>
    <input type="text" ngModel name="cvc" required placeholder="123">
  </div>
  <button type="submit" [disabled]="!paymentForm.valid">Complete Payment</button>
</form>

3. Tokenize card data with PayMill #

In your component, write a function to send the card details to PayMill and get a token. This token is what you’ll pass to your C# backend:

handlePayment(form: NgForm) {
  const cardDetails = {
    number: form.value.cardNumber.replace(/\s/g, ''), // Remove spaces from card number
    exp_month: form.value.expiry.split('/')[0],
    exp_year: `20${form.value.expiry.split('/')[1]}`, // Convert YY to full year
    cvc: form.value.cvc
  };

  // Create token via PayMill
  Paymill.createToken(cardDetails, (error: any, result: any) => {
    if (error) {
      // Handle tokenization errors (e.g., invalid card, expired card)
      console.error('Token creation failed:', error.message);
      alert(`Oops: ${error.message}`);
    } else {
      // Send the token to your C# API
      this.paymentApiService.processPayment(result.token).subscribe({
        next: (response) => {
          alert('Payment successful! 🎉');
          // Redirect to confirmation page or update UI
        },
        error: (apiError) => {
          console.error('Backend payment error:', apiError);
          alert('Payment failed. Please try again later.');
        }
      });
    }
  });
}

4. Create the C# backend endpoint #

Now build an API endpoint in your C# project (ASP.NET Core/MVC) to use the token and process the payment via PayMill’s REST API. You’ll need your private PayMill key here:

// Example ASP.NET Core Web API endpoint
[HttpPost("api/payments/process")]
public async Task<IActionResult> ProcessPayment([FromBody] PaymentRequest request)
{
    using var httpClient = new HttpClient();
    // Authenticate with your private PayMill key (format: "private_key:")
    var authToken = Convert.ToBase64String(Encoding.ASCII.GetBytes("YOUR_PRIVATE_PAYMILL_KEY:"));
    httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", authToken);

    // Prepare payment data (amount in cents: $10.00 = 1000)
    var paymentPayload = new
    {
        amount = 1000,
        currency = "USD", // Adjust to your currency
        token = request.Token,
        description = "Order #1234"
    };

    var response = await httpClient.PostAsJsonAsync(
        "https://api.paymill.com/v2/transactions",
        paymentPayload
    );

    if (response.IsSuccessStatusCode)
    {
        var transactionResult = await response.Content.ReadFromJsonAsync<TransactionResult>();
        return Ok(transactionResult);
    }
    else
    {
        var errorDetails = await response.Content.ReadAsStringAsync();
        return BadRequest(new { message = "Payment failed", details = errorDetails });
    }
}

// Helper classes for request/response
public class PaymentRequest
{
    public string Token { get; set; }
}

public class TransactionResult
{
    public string Id { get; set; }
    public int Amount { get; set; }
    public string Currency { get; set; }
    public string Status { get; set; }
}

Key Things to Remember #

• PCI Compliance: Always use PayMill’s tokenization – never handle raw card data in your backend or frontend beyond sending it to PayMill.
• Testing: Use PayMill’s test keys and test cards (like 4111 1111 1111 1111 with any future expiry and CVC 123) to validate your flow.
• Error Handling: Add more robust validation for form fields (e.g., check expiry date is in the future, card number length) before calling PayMill’s API.

Since there’s no official Angular 5 wrapper, using the core JS SDK is the most straightforward approach – it’s framework-agnostic and works perfectly with Angular 5.

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