Angular 4集成支付网关：如何通过HTTP POST向外部API发送数据？

当然可以用Angular 4搞定这个需求！根据支付网关的具体要求，我给你两种常用的实现方案：

方案一：使用Angular HttpClient发送AJAX POST请求 #

如果支付网关支持前端直接发起跨域POST请求（或者你有后端代理），这是最贴合Angular开发模式的方式：

1. 首先在你的模块中导入HttpClientModule
   在app.module.ts（或对应的功能模块）里添加：

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [
       // 其他导入项...
       HttpClientModule
     ]
   })
   export class AppModule { }
   

2. 在组件中注入HttpClient并实现请求逻辑
   完善你的组件代码如下：

   import { Component, OnInit } from '@angular/core';
   import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-payment-form',
     templateUrl: './payment-form.component.html'
   })
   export class PaymentFormComponent implements OnInit {
     form: FormGroup;
     private paymentGatewayUrl = 'https://你的支付网关API地址';
   
     constructor(private fb: FormBuilder, private http: HttpClient) { }
   
     ngOnInit() {
       // 初始化表单，补充完整所需控件
       this.form = this.fb.group({
         card_number: ['', Validators.required],
         expiry_date: ['', Validators.required],
         card_security_code: ['', Validators.required]
         // 其他支付必填字段...
       });
     }
   
     redirect(formValue: any) {
       // 发送POST请求到支付网关
       this.http.post(this.paymentGatewayUrl, formValue)
         .subscribe({
           next: (response) => {
             // 处理网关返回的响应，比如跳转支付结果页
             console.log('支付请求响应:', response);
             // 示例：window.location.href = response['redirect_url'];
           },
           error: (error) => {
             // 处理请求错误，提示用户重试
             console.error('支付请求失败:', error);
           }
         });
     }
   }
   

方案二：动态创建表单提交（适配需要跳转的网关） #

有些支付网关要求表单直接提交到他们的页面（而非AJAX请求），这时候可以通过动态创建隐藏表单来实现：

修改你的redirect方法如下：

redirect(formValue: any) {
  // 创建隐藏的form元素
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'https://你的支付网关跳转地址';
  form.style.display = 'none';

  // 将表单字段转为hidden input并添加到form中
  Object.keys(formValue).forEach(key => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = formValue[key];
    form.appendChild(input);
  });

  // 添加到页面并自动提交
  document.body.appendChild(form);
  form.submit();
}

关键注意事项 #

• 跨域问题：方案一需要确认支付网关是否允许你的前端域名跨域请求；如果不允许，建议通过后端服务做代理转发（前端请求后端，后端再请求支付网关）。
• 安全问题：确保所有支付请求都使用HTTPS传输，避免敏感数据泄露；同时遵循支付网关的安全规范，尽量不在前端处理核心敏感逻辑。

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