Customers can safely pay for their checkout transactions using an Iframe. On the Pay page of your online store, it will be shown in an iframe. Customers will never have to leave your store page to pay for an order.
.inputFieldContainer {
border: 1px solid #E5E9EC;
height: 40px;
margin-bottom: 10px;
}
3. Set Container with div
< div id="cardNumber_container" class="inputFieldContainer" >
< div id="cardExpiry_container" class="inputFieldContainer" >
< div id="cardCvv_container" class="inputFieldContainer" >
4. Set PayHQ Object with Javascript
START SCRIPT TAG
// 4.1 select the payfirma test environment
// LIVE, TEST, SANDBOX
const environment = 'TEST'
// 4.2 set apiKey for authorization token
const apiKey = "iframe access token";
// 4.3 set options
var options = {
fields: {
cardNumber: {
selector: "#cardNumber_container",
placeholder: "Credit Card *",
},
cardExpiry: {
selector: "#cardExpiry_container",
placeholder: "Expires (MM/YY) *"
},
cardCvv: {
selector: "#cardCvv_container",
placeholder: "CVV *"
}
},
// set the CSS styles to apply to the payment fields
// camelCases instead dash-separated CSS attributes
style: {
input: {
"fontFamily": "robotoregular,Helvetica,Arial,sans-serif",
"fontWeight": "700",
"fontSize": "1em",
"color": "#ff0000",
"backgroundColor": "#a2d157",
}
}
};
// 4.4 init payfirma object
const payfirmaObject= Payfirma.payfirmaInit(environment, apiKey,options);
payfirmaObject.NumberField().render(options.fields.cardNumber.selector);
payfirmaObject.ExpiryField().render(options.fields.cardExpiry.selector);
payfirmaObject.CVVField().render(options.fields.cardCvv.selector);
// 4.5 set button event
document.querySelector('button#payNow').addEventListener('click', () => {
// 4.6 Get Form fields data
const formData = {first_name,last_name,email,amount}
// 4.7 get card token
payfirmaObject.tokenize().then((response)=>{
// Set result
document.querySelector('#cardtoken-result').innerText = response.payment_token;
// If you need to check payment token expiry,
// you need to make a logic with response.expires_in
// console.log('payment token will expire in ',response.expires_in + " seconds")
// 4.8 Make a sale transaction with card token.
makeSaleRequest(response.payment_token, formData);
}).catch(error => {
// There was an error tokenizing your card data
console.log('error from server')
console.log(error);
})
});
END SCRIPT TAG
www.payfirma.com