attachToForm()
The attachToForm( ) function replaces the selected card fields with the corresponding proxy fields, which are hosted by <<paymentGateway>> and rendered within an iFrame. The proxy fields will have the same look and feel as the replaced fields.
Usage
PaymentSession.attachToForm(configuration, attachToFormCallback)
Example
// ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE
PaymentSession.attachToForm({
fields: {
cardNumber: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
},
frameEmbeddingMitigation: ["javascript", "x-frame-options", "csp"]
}, function (response) {
// HANDLE RESPONSE FROM ATTACH TO FORM
if ("ok" == response) {
console.log("Session created or validated.");
// SET THE FOCUS STYLE ON A FIELD AND SET ITS FOCUS
PaymentSession.setFocusStyle(["cardNumber"], {backgroundColor: 'green'});
PaymentSession.setFocus("cardNumber");
} else {
console.log("Failed to create or validate session:" + response);
}
})
Arguments
The object parameter to specify the configuration for the hosted fields rendered in an iFrame.
The unique identifier for the session. If you do not provide a sessionID the client library creates one.
Fields
A selector for the card number field.
A selector for the security code field.
A selector for the expiry month field.
A selector for the expiry year field.
Specifies the mitigation option(s) for clickjacking prevention. For more information, see Best Practices.
Example
{
session : "<sessionId>", // if not provided one is created
fields : { // mandatory for all 4 fields
cardNumber: "#card-number",
securityCode: "#cvv",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
},
frameEmbeddingMitigation: ["javascript", "x-frame-options", "csp"] // mandatory, can be a combination of any of these values
},
The function to handle the response from the HostedSession.attachToForm( ) call. Defined as attachToFormCallback = function(attachToFormResponse)
The overall status of the HostedSession.attachToForm( ) request.
Example
"ok" // string value of "ok" returned if successful else the error message
Return Value
None