attachToForm()

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.

Usage Copied to clipboard

PaymentSession.attachToForm(configuration, attachToFormCallback)

Example Copied to clipboard

// 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 Copied to clipboard

configuration Object

The object parameter to specify the configuration for the hosted fields rendered in an iFrame.

session String

The unique identifier for the session. If you do not provide a sessionID the client library creates one.

fields Object REQUIRED

Fields

cardNumber String REQUIRED

A selector for the card number field.

securityCode String REQUIRED

A selector for the security code field.

expiryMonth String REQUIRED

A selector for the expiry month field.

expiryYear String REQUIRED

A selector for the expiry year field.

frameEmbeddingMitigation String REQUIRED

Specifies the mitigation option(s) for clickjacking prevention. For more information, see Best Practices.

Example Copied to clipboard

{
    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
},

attachToFormCallback Function

The function to handle the response from the HostedSession.attachToForm( ) call. Defined as attachToFormCallback = function(attachToFormResponse)

status String

The overall status of the HostedSession.attachToForm( ) request.

Example Copied to clipboard

"ok" // string value of "ok" returned if successful else the error message

Return Value Copied to clipboard

None