SDK references

Callback data

Callback function can return various types of data or values, such as event codes and payment-related information. This part will introduce you event codes, card payment information, and risk control details returned through callback functions.

Event codes

Event codes are returned through different callback functions at different times, mainly including the following three types:

• Status codes
• Error codes
• Payment result codes

Status codes

Returned through the onEventCallback method during the component's runtime lifecycle, and subsequent processing can be done based on the specific event.

• SDK_START_OF_LOADING: The loading animation starts to be shown when the component is created. When configured to hide loading and use a custom animation, the custom animation can be rendered at this time.
• SDK_END_OF_LOADING: The loading animation ends when the component is created. When configured to hide loading and use custom animation, the animation can be hidden at this time.
• SDK_CALL_URL_ERROR: This event code represents one of the following situations in the event information:

• Failed to redirect to merchant page.
• Failed to redirect to the 3D challenge page.
• The paymentRedirectUrl parameter is not specified or is not correctly specified when calling the createPaymentSession request.

In the Web or WAP scenario, redirecting links is usually not abnormal. It is recommended that you verify the redirected link. In the app scenario, if this exception frequently occurs, contact Antom technical support to troubleshoot redirection or calling issues.

• SDK_CALL_URL_SUCCESS: The merchant page is successful.
• SDK_DUPLICATE_SUBMISSION_BEHAVIOR: The form is submitted repeatedly. The merchant can prompt the user through a toast without the need to click submit repeatedly.
• SDK_FORM_VERIFICATION_FAILED: The form verification failed after submitting the form. The SDK will display the form error code on the element collection page, allowing users to resubmit payments.
• SDK_PAYMENT_AUTHORIZATION_SUCCESSFUL: The payment process is completed. If the method of not redirecting after payment is configured, it is recommended to continue listening for the corresponding payment event code to handle the subsequent process. This event code, otherwise, can be ignored and redirected to your payment results page.
• SDK_PAYMENT_CHALLENGE: Triggering a 3D challenge, and the issuing bank needs further interaction with shoppers before payment can be verified. No need to process, the SDK will redirect to the challenge page.

Error codes

Returned through the onEventCallback or onError method during the component initialization phase, and subsequent processing can be done based on the specific event.

• SDK_INTERNAL_ERROR: SDK internal error. Contact Ant Group technical support.
• SDK_CREATEPAYMENT_PARAMETER_ERROR: mountComponent method specified parameter abnormally. Check if the parameters are correct and reinitialize the component.
• SDK_INIT_PARAMETER_ERROR: AMSCashierPayment method specified parameter abnormally. Check if the parameters are correct and re-instantiate the SDK.
• SDK_CREATECOMPONENT_ERROR: Component initialization exception. Contact Ant Group technical support.
• SDK_SUBMIT_NETWORK_ERROR: Interface call failed due to network reasons. It may occur in submit method submission. Try to submit it again.

Payment result codes

Returned through the onEventCallback method at the end of the payment process and subsequent processing can be done based on the specific event.

• SDK_PAYMENT_SUCCESSFUL: Payment is successful. The buyer needs to cancel the SDK for the first-time payment, and the SDK will close in the card token payment mode. Suggest redirecting to the payment result page.
• SDK_PAYMENT_PROCESSING: Payment is being processed. It is recommended that your server check the payment status or wait for the payment result notification.
• SDK_PAYMENT_FAIL: Payment failed. We suggest that you follow the paymentResultCode error code prompt and guide the user to pay it again.
• SDK_PAYMENT_ERROR: The payment status is abnormal. It is recommended that your server check the payment status or wait for the payment result notification.

Description of payment failure or abnormal payment status

The following table provides payment result code and corresponding handling suggestions for payment failure or abnormal payment status. You can take further action based on the received payment result code.

Card payment

In the case of card payment, once the payment processing reaches a final state of success or failure, you will receive the cardPaymentResultInfo parameter in the response after invoking the onEventCallback function. See the table below to explore child parameters of cardPaymentResultInfo:

Note: If the payment flow completes and the user is redirected to the redirection URL, you will not receive the cardPaymentResultInfo parameter.

The sample code of returned card information:

{
    "result": {
        "resultCode": "SUCCESS",
        "resultStatus": "S",
        "resultMessage": "Success"
    },
    "paymentStatus": "SUCCESS",
    "paymentResultCode": "SUCCESS",
    "paymentResultMessage": "success",
    "cardPaymentResultInfo": {
        "avsResultRaw": "4",
        "cardBin": "409280",
        "cardBrand": "VISA",
        "cardNo": "************8888",
        "cvvResultRaw": "1",
        "expiryMonth": "02",
        "expiryYear": "27",
        "fingerprint": "",
        "funding": "DEBIT",
        "holdName": "Tom Jay",
        "issuerName": "BANCO ITAUCARD, S.A.",
        "issuingCountry": "BR",
        "lastFour": "0000"
    }
}

Risk control

In the case of card payment, once the payment processing reaches a final state of success or failure and you have signed the risk control service with Antom, you will receive the popRiskDecisionResultInfo parameter in the response after invoking the onEventCallback function. See the table below to explore child parameters of popRiskDecisionResultInfo:

Note: If the payment flow completes and the user is redirected to the redirection URL, you will not receive the popRiskDecisionResultInfo parameter.

The sample code of returned risk control information:

{
    "result": {
        "resultCode": "SUCCESS",
        "resultStatus": "S",
        "resultMessage": "Success"
    },
    "paymentStatus": "SUCCESS",
    "paymentResultCode": "SUCCESS",
    "paymentResultMessage": "success",
    "popRiskDecisionResultInfo": {
        "riskDecision": "ACCEPT",
        "riskAuthDecision": "NON_3D"
    }
}

Complete sample code for using the client SDK

The following code example illustrates the key steps in the integration process. The code does not include an example of calling the createPaymentSession API. You need to handle the calling of the server-side interface yourself.

Integration process for Web/WAP

The integration solution to support accepting payments from a desktop browser or mobile browser. Here are sample codes for two integration methods:

• Integrate the SDK package using npm
• Integrate the SDK package CDN resources

import { AMSCashierPayment } from "@alipay/ams-checkout";
// Step 1: Instantiate the SDK and handle the callback event.
const onEventCallback = function({ code, result }) {
  switch (code) {
    case code:
      'SDK_PAYMENT_SUCCESSFUL';
      // Payment was successful. Redirect users to the payment result page.
      break;
    case code:
      'SDK_PAYMENT_PROCESSING';
      console.log('Check the payment result data', result);
      // Payment was being processed. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_PAYMENT_FAIL';
      console.log('Check the payment result data', result);
      // Payment failed. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_PAYMENT_CANCEL';
      // Guide the user to retry the payment.
      break;
    case code:
      'SDK_PAYMENT_ERROR';
      console.log('Check the payment result data', result);
      // The payment status was abnormal. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_END_OF_LOADING';
      // End the custom loading animation.
      break;
    default:
      break;
  }
}
const checkoutApp = new AMSCashierPayment({
  environment: "sandbox",
  locale: "en_US",
  onLog: ({code, message}) => {},
  onEventCallback: onEventCallback,
});
// Handle payment button events.
document
  .querySelector("#your form id")
  .addEventListener("submit", handleSubmit);

async function handleSubmit() {
  // Step 2: The server calls createPaymentSession API to obtain paymentSessionData.
  async function getPaymentSessionData() {
    const url = "Fill in the server address";
    const config = {
      // Fill in the request configuration.
    };
    const response = await fetch(url, config);
    // Obtain the value of the paymentSessionData parameter in the response.
    const { paymentSessionData } = await response.json();
    return paymentSessionData;
  }
  const paymentSessionData = await getPaymentSessionData();

  // Step 3: Create rendering components.
  // Best practice
  await checkoutApp.createComponent({ 
    sessionData: paymentSessionData, 
    appearance:{
      showLoading: true, // Set as true by default to enable the default loading pattern.
    },
  });
}

// Step 1: Instantiate the SDK and handle the callback event.
const onEventCallback = function({ code, result }) {
  switch (code) {
    case code:
      'SDK_PAYMENT_SUCCESSFUL';
      // Payment was successful. Redirect users to the payment result page.
      break;
    case code:
      'SDK_PAYMENT_PROCESSING';
      console.log('Check the payment result data', result);
      // Payment was being processed. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_PAYMENT_FAIL';
      console.log('Check the payment result data', result);
      // Payment failed. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_PAYMENT_CANCEL';
      // Guide the user to retry the payment.
      break;
    case code:
      'SDK_PAYMENT_ERROR';
      console.log('Check the payment result data', result);
      // The payment status was abnormal. Guide users to retry the payment based on the provided information.
      break;
    case code:
      'SDK_END_OF_LOADING';
      // End the custom loading animation.
      break;
    default:
      break;
  }
}
const checkoutApp = new window.AMSCashierPayment({
  environment: "sandbox",
  locale: "en_US",
  onLog: ({code, message}) => {},
  onEventCallback: onEventCallback,
});
// Handle payment button events.
document
  .querySelector("#your form id")
  .addEventListener("submit", handleSubmit);

async function handleSubmit() {
  // Step 2: The server calls createPaymentSession API to obtain paymentSessionData.
  async function getPaymentSessionData() {
    const url = "Fill in the server address";
    const config = {
      // Fill in the request configuration.
    };
    const response = await fetch(url, config);
    // Obtain the value of the paymentSessionData parameter in the response.
    const { paymentSessionData } = await response.json();
    return paymentSessionData;
  }
  const paymentSessionData = await getPaymentSessionData();

  // Step 3: Create rendering components.
  // Best practice
  await checkoutApp.createComponent({ 
    sessionData: paymentSessionData, 
    appearance:{
      showLoading: true, // Set as true by default to enable the default loading pattern.
    }, 
  });
}

Integration process for Android device

The following sample code shows how to Integrate the client SDK on an Android device.

AMSCashierPaymentConfiguration configuration = new AMSCashierPaymentConfiguration();
configuration.setLocale(new Locale("en", "US"));
// When the showLoading parameter is set to true (default value), use the internal loading page. When false, the merchant can customize the loading animation through the event in onPaymentEventCallback.
configuration.setOption("showLoading", "true");
// Set the sandbox environment instead of the online production environment.
configuration.setOption("sandbox", "true");
// Configure whether the payment button is rendered by the SDK component.
configuration.setOption("showSubmitButton", "true");
// Set up checkout callback monitoring.
configuration.setOnCheckoutListener(new OnCheckoutListener() {
    @Override
    public void onEventCallback(String eventCode, AMSEventResult eventResult) {
        Log.e(TAG, "onEventCallback eventCode=" + eventCode + " eventResult=" + eventResult.toString());
      
        if (!TextUtils.isEmpty(eventCode)) {
            if ("SDK_PAYMENT_SUCCESSFUL".equals(eventCode)) {
                // Payment was successful. Suggest redirecting to the payment result page.
            } else if ("SDK_PAYMENT_PROCESSING".equals(eventCode)) {
                // Payment is being processed. We suggest that your server check the payment status or wait for the payment result notification.
            } else if ("SDK_PAYMENT_FAIL".equals(eventCode)) {
                // Payment failed. We suggest that you follow the paymentResultCode error code prompt and guide the user to pay it again.
            }else if ("SDK_PAYMENT_CANCEL".equals(eventCode)) {
                // The buyer did not click to pay and closed the payment window. The SDK can be re-called with paymentSessionData within the validity period. If it has expired, paymentSessionData needs to be requested again.
            } else if ("SDK_PAYMENT_ERROR".equals(eventCode)) {
                // The payment status was abnormal. We suggest that your server check the payment status or wait for the payment result notification.
            }
        }
    }
});
// Create the AMSCashierPayment instantiation.
AMSCashierPayment checkout = new AMSCashierPayment.Builder(activity, configuration).build();

checkout.mountComponent(activity, sessionData);

checkout.onDestroy();

Integration process for iOS device

The following sample code shows how to Integrate the client SDK on an iOS device.

#import <AMSComponent/AMSComponent-Swift.h>

AMSCashierPaymentConfiguration *componentConfig = [AMSCashierPaymentConfiguration new];
componentConfig.locale = @"en_US";
// Set sandbox environment instead of online production environment
NSDictionary *options = @{@"showLoading": @"true", @"sandbox": @"true"};
componentConfig.options = options;

[[AMSCashierPayment shared] initConfiguration:componentConfig];

[AMSCashierPayment shared].paymentDelegate = self;
[AMSCashierPayment shared].loggerDelegate = self;
[[AMSCashierPayment shared] createComponent:paymentSessionData];

NSString *dataString = @"{\"billingAddress\":{\"zipCode\":\"310000\",\"region\":\"CN\"}}";
[[AMSCashierPayment shared] submit: dataString];

#pragma AMSPaymentProtocol
- (void)onEventCallback:(NSString *)eventCode eventResult:(AMSEventResult *)eventResult
{
    if ([eventCode isEqualToString:@"SDK_PAYMENT_SUCCESSFUL"]) {
        // Payment was successful. Suggest redirecting to the payment result page.
    } else if ([eventCode isEqualToString:@"SDK_PAYMENT_PROCESSING"]) {
        // Payment is being processed. It is recommended that your server check the payment status or wait for the payment result notification.

    } else if ([eventCode isEqualToString:@"SDK_PAYMENT_FAIL"]) {
        // Payment failed. We suggest that you follow the paymentResultCode error code prompt and guide the user to pay it again.

    } else if ([eventCode isEqualToString:@"SDK_PAYMENT_CANCEL"]) {
        // The buyer did not click to pay and closed the payment window. The SDK can be re-called with paymentSessionData within the validity period. If it has expired, paymentSessionData needs to be requested again.

    } else if ([eventCode isEqualToString:@"SDK_PAYMENT_ERROR"]) {
        // The payment status was abnormal. It is recommended that your server check the payment status or wait for the payment result notification.
    }
    NSLog(@"eventCode%@ eventResult%@", eventCode, eventResult);
}

#pragma AMSLogProtocol
- (void)logWithName:(NSString *)name parameter:(NSDictionary<NSString *,id> *)parameter
{
   NSLog(@"name%@ parameter%@", name, parameter);
}