SDK

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

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

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.
    }, 
  });
}

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();

#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);
}