Квадратный платеж со средним стеком - PullRequest
Новая
       41

Квадратный платеж со средним стеком

0 голосов
/ 14 июня 2019

Ищете руководство по использованию Квадратной формы оплаты с угловым и узлом.Форма работает, но когда я нажимаю кнопку отправить, она, очевидно, не может получить post / process-payment.Я просто не совсем уверен, с чего начать, я новичок в использовании стека MEAN.Там просто не могу найти ничего о том, как использовать angular и node вместе для создания формы оплаты с квадратом.Любая помощь будет принята с благодарностью.Спасибо.

Вот здесь 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}`)
);

Вот часть платежа. 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>

1 Ответ

1 голос
/ 14 июня 2019

В разработке ваше угловое приложение, скорее всего, работает на 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>

EDIT:

Если вы хотите использовать эти квадратные фрагменты прямо из коробки, вы, конечно, можете изменить атрибут действия вашей формы, чтобы он указывал на бэкэнд-EP. 

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

** Предполагается, что сервер вашего узла использует данный протокол, хост и порт

...