Note: This page has been deprecated and is no longer maintained or updated. Visit https://docs.antom.com/ for the latest content. 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 are returned through different callback functions at different times, mainly including the following three types:
- Status codes
- Error codes
- Payment result 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_PAYMENT_CANCEL
: Indicates that the user canceled the payment (the user exited the payment page without submitting the order). You can re-invoke the SDK using the paymentSessionData within its validity period. If it has expired, you need to initiate a new createPaymentSession request.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 payment method app or 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. If an exception does occur, it is recommended that you verify the redirected link. In the app scenario, if the exception frequently occurs, contact Antom Technical Support to troubleshoot redirection or calling issues.
SDK_CALL_URL_SUCCESS
: Successfully redirected to the payment method/merchant page.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.
Returned through the onEventCallback
or onError
method during the component initialization phase, and subsequent processing can be done based on the specific event. 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_FAIL
: Payment failed. We suggest that you follow the paymentResultCode error code prompt and guide the user to pay again.SDK_PAYMENT_PROCESSING
: Payment is being processed. It is recommended to check the payment status on your server or wait for the payment result notification.SDK_PAYMENT_ERROR
: The payment status is abnormal. It is recommended to check the payment status on your server or wait for the payment result notification.SDK_PAYMENT_RETRY
: Retry after payment failure. When you enable the option to retry after payment failure, guide the buyer to modify the information and pay again.
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.
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"
}
}
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 API yourself.
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 'SDK_PAYMENT_SUCCESSFUL':
// Payment was successful. Redirect users to the payment result page.
break;
case 'SDK_PAYMENT_PROCESSING':
console.log('Check the payment result data', result);
// Payment is being processed. Query the payment status through the server or wait for the payment result notification. At the same time, you can check whether the user has completed the payment. If the payment is not completed, guide the user to pay again.
break;
case 'SDK_PAYMENT_FAIL':
console.log('Check the payment result data', result);
// Payment failed. Please refer to the processing suggestions in the Event codes and guide the user to pay again.
break;
case 'SDK_PAYMENT_CANCEL':
// The user exits the payment page without submitting the order. You can re-invoke the SDK with paymentSessionData that is still valid. If it has expired, you need to re-request paymentSessionData.
break;
case 'SDK_PAYMENT_ERROR':
console.log('Check the payment result data', result);
// The payment status is abnormal. Query the payment status through the server or wait for the payment result notification, or guide the user to pay again.
break;
case '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 'SDK_PAYMENT_SUCCESSFUL':
// Payment was successful. Redirect users to the payment result page.
break;
case 'SDK_PAYMENT_PROCESSING':
console.log('Check the payment result data', result);
// Payment is being processed. Query the payment status through the server or wait for the payment result notification. At the same time, you can check whether the user has completed the payment. If the payment is not completed, guide the user to pay again.
break;
case 'SDK_PAYMENT_FAIL':
console.log('Check the payment result data', result);
// Payment failed. Please refer to the processing suggestions in the Event codes and guide the user to pay again.
break;
case 'SDK_PAYMENT_CANCEL':
// The user exits the payment page without submitting the order. You can re-invoke the SDK with paymentSessionData that is still valid. If it has expired, you need to re-request paymentSessionData.
break;
case 'SDK_PAYMENT_ERROR':
console.log('Check the payment result data', result);
// The payment status is abnormal. Query the payment status through the server or wait for the payment result notification, or guide the user to pay again.
break;
case '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.
},
});
}
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();
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);
}
