The attachToForm( )
function replaces the selected card fields with the corresponding proxy fields, which are hosted by Mastercard Gateway and rendered within an iFrame. The proxy fields will have the same look and feel as the replaced fields.
PaymentSession.attachToForm(configuration, attachToFormCallback)
// 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); } })
The object parameter to specify the configuration for the hosted fields rendered in an iFrame.
{ 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)
HostedSession.attachToForm( )
request.
"ok" // string value of "ok" returned if successful else the error message
None