Question

正在寻找有关如何使用带有角和节点的Square付款表单的指南。表单有效，但是当我点击send时，显然无法获得post / process-payment。我只是不太确定从哪里开始，我是使用MEAN堆栈的新手。似乎在如何使用角度和节点一起创建正方形付款表格方面似乎找不到任何东西。任何帮助将不胜感激。谢谢。

这是payment.component.ts

 import { Component, OnInit } from '@angular/core';

 declare var SqPaymentForm: any;

 @Component({
   selector: 'app-payment',
   templateUrl: './payment.component.html',
   styleUrls: ['./payment.component.css']
 })
 export class PaymentComponent implements OnInit {

  paymentForm: any;

  constructor() { }

  ngOnInit() {

  const applicationId = 'sandbox-sq0idp-HgQsUszzlyjKUGnaq6Ps0Q';

   // onGetCardNonce is triggered when the "Pay $1.00" button is clicked
   function onGetCardNonce(event) {
   // Don't submit the form until SqPaymentForm returns with a nonce
   event.preventDefault();
   // Request a nonce from the SqPaymentForm object
   paymentForm.requestCardNonce();
  }

  // Create and initialize a payment form object
  const paymentForm = new SqPaymentForm({
    // Initialize the payment form elements
    applicationId,
    inputClass: 'sq-input',

    // Customize the CSS for SqPaymentForm iframe elements
    inputStyles: [{
    fontSize: '16px',
    lineHeight: '24px',
    padding: '16px',
    placeholderColor: '#a0a0a0',
    backgroundColor: 'transparent',
   }],

   // Initialize the credit card placeholders
   cardNumber: {
    elementId: 'sq-card-number',
    placeholder: 'Card Number'
  },
  cvv: {
   elementId: 'sq-cvv',
   placeholder: 'CVV'
  },
  expirationDate: {
   elementId: 'sq-expiration-date',
   placeholder: 'MM/YY'
  },
  postalCode: {
   elementId: 'sq-postal-code',
   placeholder: 'Postal'
  },

 // SqPaymentForm callback functions
 callbacks: {
   /*
   * callback function: cardNonceResponseReceived
   * Triggered when: SqPaymentForm completes a card nonce request
   */
   cardNonceResponseReceived (errors, nonce, cardData) {
   if (errors) {
    // Log errors from nonce generation to the browser developer console.
    console.error('Encountered errors:');
    // tslint:disable-next-line: only-arrow-functions
    errors.forEach(function(error) {
        console.error('  ' + error.message);
    });
    alert('Encountered errors, check browser developer console for more 
 details');
    return;
  }

  alert(`The generated nonce is:\n${nonce}`);
// Uncomment the following block to
// 1. assign the nonce to a form field and
// 2. post the form to the payment processing handler

  ( document.getElementById('card-nonce') as HTMLInputElement).value = 
  nonce
  ( document.getElementById('nonce-form') as HTMLFormElement).submit();

  alert(`The generated nonce is:\n${nonce}`);
}
}
});

 paymentForm.build();

  }
}

这是index.js文件。

const express = require('express');
const bodyParser = require('body-parser');
const squareConnect = require('square-connect');

const app = express();
const port = 3000;

const accessToken = 'sandbox-sq0idp-HgQsUszzlyjKUGnaq6Ps0Q';
const locationId = 
'EAAAEHpwfQI0yn3DVT49F8TpMTI9SAVm2A3mgL_yQJTcoXXgsvXsHKfONKsXCzjj';

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false }));
app.use(express.static(__dirname));

// Set square connect credentials
const defaultClient = squareConnect.ApiClient.instance;

// Configure OAuth2 access for auth: oauth2
const oauth2 = defaultClient.authentications['oauth2'];
oauth2.accessToken = accessToken;

app.post('/process-payment', function(req, res){
  const request_params = req.body;

  const idempotency_key = 
  require('crypto').randomBytes(64).toString('hex');

  // Charge the customer's card
  const transactions_api = new squareConnect.TransactionsApi();
  const request_body = {
    card_nonce: request_params.nonce,
    amount_money: {
       amount: 100, // $1.00 charge
       currency: 'USD'
     },
     idempotency_key: idempotency_key
  };
  transactions_api.charge(locationId, request_body).then(function(data) {
     const json= JSON.stringify(data);
     res.status(200).json({
      'title': 'Payment Successful',
      'result': json
    });
  }, function(error) {
    res.status(500).json({
      'title': 'Payment Failure',
      'result': error.response.text
    });
  });
});

app.listen(
  port,
  () => console.log(`listening on - http://localhost:${port}`)
);

这是Payment.html的一部分

    <form id="nonce-form" novalidate action="process-payment" 
method="post">
      <fieldset>
        <div id="sq-card-number"></div>
         <div class="third">
          <div id="sq-expiration-date"><input type="text"></div>
        </div>
        <div class="third">
          <div id="sq-cvv"></div>
        </div>
        <div class="third">
          <div id="sq-postal-code"></div>
        </div>
      </fieldset>
      <button id="sq-creditcard" class="button-credit-card" 
    onclick="onGetCardNonce(event)">Pay $1.00</button>
      <!--
        After a nonce is generated it will be assigned to this hidden 
input field.
      -->
      <input type="hidden" id="card-nonce" name="nonce">
    </form>

Answer 1

在开发中，您的角度应用程序很可能在localhost：4200上运行。

您的节点服务器在哪里运行？本地主机：8080？现在，您的表单正在发布到localhost：4200 / process-payment ..这显然不存在。

在payment.component.ts中创建一个提交功能：

public submitMyForm(form: NgForm): void {

if(!form.valid){ // -> check if form is valid!
  return;
}

 onGetCardNonce(event) // capture callback or promise then execute your post

 $http.post('http://localhost:8080/process-payment', formData).subscribe(
   (data) => {
   console.log("success posting form to backend")
    }, // success path
   error => {
     console.log("error posting form to backend");
   }
  );
}

formData是一个包装所有表单字段值的对象。

您将需要修改表单以将输入值绑定到NgModel。

    <form id="myForm" novalidate #myForm (ngSubmit)="submitMyForm(myForm)">
      <fieldset>
        <div id="sq-card-number"></div>
         <div class="third">
          <div id="sq-expiration-date"><input type="text" [(ngModel)]="formData.sqExpirationDate"></div>
        ...
      <button type="submit" id="sq-creditcard" class="button-credit-card">Pay $1.00</button>

      <input type="hidden" id="card-nonce" name="nonce">
    </form>

编辑：

如果您想直接使用这些方形片段，则可以更改表单的action属性，使其指向后端EP。

<form id="myForm" novalidate #myForm action="http://localhost:8080/process-payment"

**假设您的节点服务器位于该给定的协议，主机和端口上

均值堆栈的平方付款

1 个答案: