angular - 方形连接节点/角度
问题描述
我正在尝试将 Square Online 支付集成到我的网络应用程序中。这是我得到的错误:
未捕获的 FormNotReadyError:在 SqPaymentForm 准备好之前无法调用 SqPaymentForm#requestCardNonce。
我无法真正找到将 Square 在线支付集成到 Angular 中的任何东西,而且我对 angular/node 还是很陌生。谢谢
付款.html
<div id="form-container">
<div id="sq-ccbox">
<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>
</div> <!-- end #sq-ccbox -->
</div> <!-- end #form-container -->
付款组件
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 {
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
// tslint:disable-next-line: no-use-before-declare
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}');
}
}
});
}
}
解决方案
推荐阅读
- python - 将数据框中的一项功能应用于所有其他项
- mysql - 为什么以下 MySQL 查询有语法错误?
- prolog - 如何在 Windows 上的 Prolog swipl REPL 上发送 EOF 以关闭伪用户文件?
- javascript - 从深度嵌套的对象数组创建过滤和简化的数据
- html - Google 脚本 - HTML 样式
- python - 无法执行脚本 docker-compose Laravel
- c# - 在 WPF 中更改主题,主题不变
- c - 如何读取字符直到一个字符?
- nlp - 如何正确构建prolog解析器?
- javascript - 如何从控制台 nodejs 获取多个输入值