Problems with initializing Square iframes in Angular 6 form
0
I'm having a problem with loading Square iframes to my form. When I navigate from navbar to payment form iframes are not loading in my inputs fields. The only way to load them is to hit refresh of my payment form. Here is my payment.ts:
import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
import {AppService} from '../app.service';
declare var SqPaymentForm: any;
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, AfterViewInit {
constructor(private appService: AppService) { }
paymentForm: any ;
ngOnInit() {
this.squarePaymentFunction();
}
ngAfterViewInit(): void {}
squarePaymentFunction() {
let vm;
vm = this;
// this.calculatePayment();
const applicationId = '********';
// Set the location ID
const locationId = '*********';
this.paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '.9em'
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: methodsSupported
* Triggered when: the page is loaded.
*/
methodsSupported: function (methods) {
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
let paymentRequestJson;
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log('Encountered errors:');
errors.forEach(function(error) {
console.log(' ' + error.message);
});
return;
}
alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
// Assign the nonce value to the hidden form field
// document.getElementById('card-nonce').value = nonce;
// needs to be extracted from the
(<HTMLInputElement>document.getElementById('card-nonce')).value = nonce; // casting so .value will work
let amount = (<HTMLInputElement>document.getElementById('amountToPay')).value;
// POST the nonce form to the payment processing page
// (<HTMLFormElement>document.getElementById('nonce-form')).submit();
vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function() {
alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function(inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
document.getElementById('error').style.display = 'none';
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function() {
/* HANDLE AS DESIRED */
console.log('The form loaded!');
}
}
});
}
requestCardNonce(event) {
// Request a nonce from the SqPaymentForm object
this.paymentForm.requestCardNonce();
}
sendSqPayment(data) {
this.appService.sendPayment(data).subscribe((data) => {
if (data.success) {
console.log('Data success');
}
// console.log('data', data);
},
);
}
}
I have setup routing in my app.routing.ts using Routes and RouterModlue
angular typescript square
asked Nov 20 at 21:57
pooh098
81111
add a comment |
0
I'm having a problem with loading Square iframes to my form. When I navigate from navbar to payment form iframes are not loading in my inputs fields. The only way to load them is to hit refresh of my payment form. Here is my payment.ts:
import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
import {AppService} from '../app.service';
declare var SqPaymentForm: any;
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, AfterViewInit {
constructor(private appService: AppService) { }
paymentForm: any ;
ngOnInit() {
this.squarePaymentFunction();
}
ngAfterViewInit(): void {}
squarePaymentFunction() {
let vm;
vm = this;
// this.calculatePayment();
const applicationId = '********';
// Set the location ID
const locationId = '*********';
this.paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '.9em'
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: methodsSupported
* Triggered when: the page is loaded.
*/
methodsSupported: function (methods) {
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
let paymentRequestJson;
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log('Encountered errors:');
errors.forEach(function(error) {
console.log(' ' + error.message);
});
return;
}
alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
// Assign the nonce value to the hidden form field
// document.getElementById('card-nonce').value = nonce;
// needs to be extracted from the
(<HTMLInputElement>document.getElementById('card-nonce')).value = nonce; // casting so .value will work
let amount = (<HTMLInputElement>document.getElementById('amountToPay')).value;
// POST the nonce form to the payment processing page
// (<HTMLFormElement>document.getElementById('nonce-form')).submit();
vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function() {
alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function(inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
document.getElementById('error').style.display = 'none';
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function() {
/* HANDLE AS DESIRED */
console.log('The form loaded!');
}
}
});
}
requestCardNonce(event) {
// Request a nonce from the SqPaymentForm object
this.paymentForm.requestCardNonce();
}
sendSqPayment(data) {
this.appService.sendPayment(data).subscribe((data) => {
if (data.success) {
console.log('Data success');
}
// console.log('data', data);
},
);
}
}
I have setup routing in my app.routing.ts using Routes and RouterModlue
angular typescript square
asked Nov 20 at 21:57
pooh098
81111
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize theautoBuildparameter of theSqPaymentForm. Can you try addingautoBuild: false, and then callingthis.paymentForm.build()when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build
– sjosey
Nov 20 at 22:19
add a comment |
0
0
0
I'm having a problem with loading Square iframes to my form. When I navigate from navbar to payment form iframes are not loading in my inputs fields. The only way to load them is to hit refresh of my payment form. Here is my payment.ts:
import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
import {AppService} from '../app.service';
declare var SqPaymentForm: any;
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, AfterViewInit {
constructor(private appService: AppService) { }
paymentForm: any ;
ngOnInit() {
this.squarePaymentFunction();
}
ngAfterViewInit(): void {}
squarePaymentFunction() {
let vm;
vm = this;
// this.calculatePayment();
const applicationId = '********';
// Set the location ID
const locationId = '*********';
this.paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '.9em'
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: methodsSupported
* Triggered when: the page is loaded.
*/
methodsSupported: function (methods) {
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
let paymentRequestJson;
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log('Encountered errors:');
errors.forEach(function(error) {
console.log(' ' + error.message);
});
return;
}
alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
// Assign the nonce value to the hidden form field
// document.getElementById('card-nonce').value = nonce;
// needs to be extracted from the
(<HTMLInputElement>document.getElementById('card-nonce')).value = nonce; // casting so .value will work
let amount = (<HTMLInputElement>document.getElementById('amountToPay')).value;
// POST the nonce form to the payment processing page
// (<HTMLFormElement>document.getElementById('nonce-form')).submit();
vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function() {
alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function(inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
document.getElementById('error').style.display = 'none';
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function() {
/* HANDLE AS DESIRED */
console.log('The form loaded!');
}
}
});
}
requestCardNonce(event) {
// Request a nonce from the SqPaymentForm object
this.paymentForm.requestCardNonce();
}
sendSqPayment(data) {
this.appService.sendPayment(data).subscribe((data) => {
if (data.success) {
console.log('Data success');
}
// console.log('data', data);
},
);
}
}
I have setup routing in my app.routing.ts using Routes and RouterModlue
angular typescript square
asked Nov 20 at 21:57
pooh098
81111
I'm having a problem with loading Square iframes to my form. When I navigate from navbar to payment form iframes are not loading in my inputs fields. The only way to load them is to hit refresh of my payment form. Here is my payment.ts:
import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
import {AppService} from '../app.service';
declare var SqPaymentForm: any;
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, AfterViewInit {
constructor(private appService: AppService) { }
paymentForm: any ;
ngOnInit() {
this.squarePaymentFunction();
}
ngAfterViewInit(): void {}
squarePaymentFunction() {
let vm;
vm = this;
// this.calculatePayment();
const applicationId = '********';
// Set the location ID
const locationId = '*********';
this.paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '.9em'
}],
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '•••• •••• •••• ••••'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: methodsSupported
* Triggered when: the page is loaded.
*/
methodsSupported: function (methods) {
},
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
*/
createPaymentRequest: function () {
let paymentRequestJson;
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log('Encountered errors:');
errors.forEach(function(error) {
console.log(' ' + error.message);
});
return;
}
alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
// Assign the nonce value to the hidden form field
// document.getElementById('card-nonce').value = nonce;
// needs to be extracted from the
(<HTMLInputElement>document.getElementById('card-nonce')).value = nonce; // casting so .value will work
let amount = (<HTMLInputElement>document.getElementById('amountToPay')).value;
// POST the nonce form to the payment processing page
// (<HTMLFormElement>document.getElementById('nonce-form')).submit();
vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function() {
alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function(inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
document.getElementById('error').style.display = 'none';
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function() {
/* HANDLE AS DESIRED */
console.log('The form loaded!');
}
}
});
}
requestCardNonce(event) {
// Request a nonce from the SqPaymentForm object
this.paymentForm.requestCardNonce();
}
sendSqPayment(data) {
this.appService.sendPayment(data).subscribe((data) => {
if (data.success) {
console.log('Data success');
}
// console.log('data', data);
},
);
}
}
I have setup routing in my app.routing.ts using Routes and RouterModlue
angular typescript square
angular typescript square
asked Nov 20 at 21:57
pooh098
81111
asked Nov 20 at 21:57
pooh098
81111
asked Nov 20 at 21:57
pooh098
81111
asked Nov 20 at 21:57
pooh098
81111
asked Nov 20 at 21:57
pooh098
81111
81111
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize theautoBuildparameter of theSqPaymentForm. Can you try addingautoBuild: false, and then callingthis.paymentForm.build()when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build
– sjosey
Nov 20 at 22:19
add a comment |
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize theautoBuildparameter of theSqPaymentForm. Can you try addingautoBuild: false, and then callingthis.paymentForm.build()when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build
– sjosey
Nov 20 at 22:19
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize the
autoBuild parameter of the SqPaymentForm. Can you try adding autoBuild: false, and then calling this.paymentForm.build() when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build– sjosey
Nov 20 at 22:19
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize the
autoBuild parameter of the SqPaymentForm. Can you try adding autoBuild: false, and then calling this.paymentForm.build() when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build– sjosey
Nov 20 at 22:19
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402215%2fproblems-with-initializing-square-iframes-in-angular-6-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402215%2fproblems-with-initializing-square-iframes-in-angular-6-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"The only way to load them is to hit refresh of my payment form." Sounds to me like you should utilize the
autoBuildparameter of theSqPaymentForm. Can you try addingautoBuild: false, and then callingthis.paymentForm.build()when your page is loaded? See more info here: docs.connect.squareup.com/api/paymentform#build– sjosey
Nov 20 at 22:19