Click to Pay onStateChange

onStateChange Callback

Triggered when the payer email changes it changes if the payer's device is recognized.

It informs you about the interactions with the Click to Pay system that are being triggered, e.g. card list display, One Time Password or enrollment interactions.


Usage Copied to clipboard

You can use this information to determine which component is visible and at what stage the payer is at in the flow.

You may want to use this information to change the interaction.


Example Copied to clipboard


onStateChange(state){

     console.log('State %s', state)

     // See example below on the state object that's printed

{

oldState : {
            payerState: {
                deviceRecognized: true,
                email: '[email protected]', //masked email if not supplied in payer.email field
            },
            elementState: {
                cardList: {selector: 'cardListContainer', visible: true},
                otp: {selector:'otpContainer', visible: false},
                dcf: {selector:'dcfContainer', visible: false}
            }
},
newState: {
            payerState: {
                deviceRecognized: true,
                email: '[email protected]', //masked email
            },
            elementState: {
                cardList: {selector: 'cardListContainer', visible: false},
                otp: {selector:'otpContainer', visible: false},
                dcf: {selector:'dcfContainer', visible: true}
            }
},
diff: {
            elementState: {
                dcf: {selector:'dcfContainer', visible: true}
            }
      }
}

}

Arguments Copied to clipboard

state Copied to clipboard Object
oldState Copied to clipboard Object

Provides details about the status prior to the triggering change.

payerState Copied to clipboard Object

Indicates if the payer and/or the device are recognized. The payer may be recognized via the email they entered or via a cookie.

deviceRecognized Copied to clipboard Boolean

Indicates if a cookie is present in the browser that is associated with Click to Pay for one of the participating schemes.

email Copied to clipboard String

The payer's email address.

emailEnrolled Copied to clipboard Boolean

Indicates if the payer's email address is enrolled for Click to Pay. The payer is being asked to enter a one time password.

emailVerified Copied to clipboard Boolean

Indicates if the payer's email address is verified for Click to Pay. The payer has provided a valid one time password.

elementState Copied to clipboard Object

The state of the Click to Pay UI component.

cardList Copied to clipboard Boolean

Indicates if the list of cards the payer has enrolled with Click to Pay is being displayed.

otp Copied to clipboard Boolean

Indicates if the prompt for a one time password (OTP) is being displayed.

dcf Copied to clipboard Boolean

Indicates if the form provided by Click to Pay that allows the payer to enroll, enroll a new card and/or confirm the payment (called DCF and provided by the respective scheme) is being displayed.

newState Copied to clipboard Object

Provides details about the status after the triggering change.

payerState Copied to clipboard Object

Indicates if the payer and/or the device are recognized. The payer may be recognized via the email they entered or via a cookie.

deviceRecognized Copied to clipboard Boolean

Indicates if a cookie is present in the browser that is associated with Click to Pay for one of the participating schemes.

email Copied to clipboard String

The payer's email address.

emailEnrolled Copied to clipboard Boolean

Indicates if the payer's email address is enrolled for Click to Pay. The payer is being asked to enter a one time password.

emailVerified Copied to clipboard Boolean

Indicates if the payer's email address is verified for Click to Pay. The payer has provided a valid one time password.

elementState Copied to clipboard Object

The state of the Click to Pay UI component.

cardList Copied to clipboard Boolean

Indicates if the list of cards the payer has enrolled with Click to Pay is being displayed.

otp Copied to clipboard Boolean

Indicates if the prompt for a one time password (OTP) is being displayed.

dcf Copied to clipboard Boolean

Indicates if the form provided by Click to Pay that allows the payer to enroll, enroll a new card and/or confirm the payment (called DCF and provided by the respective scheme) is being displayed.

diff Copied to clipboard Object

Provides details about the difference between the state prior to the triggering change. and the state after the triggering change.

payerState Copied to clipboard Object

Indicates if the payer and/or the device are recognized. The payer may be recognized via the email they entered or via a cookie.

deviceRecognized Copied to clipboard Boolean

Indicates if a cookie is present in the browser that is associated with Click to Pay for one of the participating schemes.

email Copied to clipboard String

The payer's email address.

emailEnrolled Copied to clipboard Boolean

Indicates if the payer's email address is enrolled for Click to Pay. The payer is being asked to enter a one time password.

emailVerified Copied to clipboard Boolean

Indicates if the payer's email address is verified for Click to Pay. The payer has provided a valid one time password.

elementState Copied to clipboard Object

The state of the Click to Pay UI component.

cardList Copied to clipboard Boolean

Indicates if the list of cards the payer has enrolled with Click to Pay is being displayed.

otp Copied to clipboard Boolean

Indicates if the prompt for a one time password (OTP) is being displayed.

dcf Copied to clipboard Boolean

Indicates if the form provided by Click to Pay that allows the payer to enroll, enroll a new card and/or confirm the payment (called DCF and provided by the respective scheme) is being displayed.


Return Value Copied to clipboard

None