3.3 Events

Wallet events provide callbacks to events that happened on the wallet site. Some of the events are required or the full payment flow to work.

Supported events

name	Description
onInit	will be triggered when the wallet first initiates (the init function starts), onInit: () => console.log('Initiating wallet')
onReady	will be triggered when the wallet is been fully loaded, onReady: () => console.log('wallet is loaded')
onInitFailure	will be triggered when the wallet is not loaded, onInitFailure: (error) => console.log('onInitFailure: ' + error)
afterSelectCreditCard	Returns users credit card token, you will use this token with the billing system to make payments on the card, this callback fires when user adds a new credit card, selecting card from the list, or using an alternative payment method	Required
afterDeleteCreditCard	This event will occur in case the user deleted any payment method
afterFormIsReady	will return { isValid: true} if the credit card form been filled but the card hasn't been added yet, Also may return { isValid: false} In case the user deletes characters
after3DsComplete	Used for 3DS transactions, will return {status: "SUCCESS", transaction_id: "d86ca.....6520df06c2"}, status FAILURE also possible
userData	Will return user data received from alternative payment methods. supported for MasterPass and Visa Checkout
exitedManagePaymentMethod	This event will occur when the user closed the "manage payment methods" section / modal
afterAlternativePaymentComplete	Will return the transaction information after complete, example: {method: "SALE", status: "SUCCESS", transaction_id: "ALIPAY-Ir5JEqV0mcQiVg-1561985422"}
giftCardTrigger	will be triggered when the gift card checkbox is marked
alternativePaymentSelected	will be triggered when an alternative payment has been selected, example: alternativePaymentSelected: (data) => ({ console.log(data.serviceName); }) possible values: alipay / applepay / PayPal / Masterpass / GooglePay / AmexCheckout / AmazonPay / AdyenIdeal

3.3.1 Receiving the credit card token

Using the afterSelectCreditCard callback, you can receive and store the credit card token.

 mycheckWallet.init("mywalletSdk", {
    ...
    events: {
      afterSelectCreditCard: (token) => console.log('the token is', token)
    }
  });

3.3.2 requesting the current credit card token explicitly

Use case: Sometimes, you want to bind this event to a custom "complete order" button for example this function can be usefull in this case.

After the user fills his credit card details in the form, He clicks the 'Apply' button to add the card.

1. Register to the afterFormIsReady callback to know when the form is Ready

2. Add the card and get its token using:

mycheckWallet.getCardToken().then(function(token) {
    //logic
    console.log("token:"+ token);

}, function(error) {

    //handle error
    console.log("error:"+ error);
});

OR

mycheckWallet.getCard().then(function(card) {
    //logic
    console.log("card:"+ card);

}, function(error) {

    //handle error
    console.log("error:"+ error);
});

The getCard function will return not just the token, it will return more information about the credit card, example of the card object:

{
  credit_type: "VI",
  exp_month: "12",
  exp_year4: 2019,
  first_6_digits : "411111",
  last_4_digits: "1111",
  source: "MCPCI",
  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ..."
}

Credit types

Issuer	Code
American express	AX
Diners	DC
Visa	VI
Master Card	MC
Discover	DS
Jcb	JB
Maestro	TO
UnionPay	CU

• If the user filled the credit card form, this call will add the credit card and return the token
• If the user already has a credit card, it will return its token
• If neither of those apply, you will receive one of those errors:

Error codes

1. In case the card type not supported
   {status:"ERROR", code: 1, message: "Card type not supported"}

2. When adding wrong details to the card form
   {status:"ERROR", code: 2, message: "Card form invalid"}

3. When card validation failed in the PCI
   {status: "ERROR", code: 3, message: "Credit card validation failed!"}

3.3.3 Retrieve user data

When the user chooses to use Masterpass or Visa Checkout (MP/VC), The userData callback will return user information provided by MP/VC in a unified format.

 mycheckWallet.init("mywalletSdk", {
    ...
    events: {
       ...
      userData: (data) => console.log('user data is:', data)
    }
  });

Example of payload for userData

{
   "userData":{
      "userFirstName":"Frank",
      "userLastName":"Sinatra",
      "userFullName":"Sinatra Frank",
      "userName":"Sinatra Frank",
      "userEmail":"franks@gmail.com"
   },
   "paymentInstrument":{
      "billingAddress":{
         "personName":"Frank Sinatra",
         "firstName":"Frank",
         "lastName":"Sinatra",
         "line1":"Hoboken 120",
         "city":"New Jersey",
         "stateProvinceCode":"NJ",
         "postalCode":"10016",
         "countryCode":"US",
         "phone":"9172875780"
      },
      "nameOnCard":"Sinatra Frank",
      "cardFirstName":"Frank",
      "cardLastName":"Sinatra",
      "lastFourDigits":"1111",
      "binSixDigits":"372722"
   }
}

3.3.4 Session identifier

Using this method, you can know what is the exist sessionId, In case no session ID is provided in the beginning (using setSessionId), this will generate a session ID once and return it.

 mycheckWallet.getSessionId()

Sets a session id (String) to the wallet, should be used before the init function, This will add a "Session-Id" header to all requests going to Shiji, this way we can find all session requests in our logs system.

 mycheckWallet.setSessionId("custom-session-id")

NOTE: These session functions can be useful for Analytics/Logging services to allow you using the same sessionId for your requests