Web/WAP

You can use either of the following methods to add an SDK package:

• Use npm: Input the install command in the command line interface.
• Use CDN resources: Use the script tag in a HTML file.

1. Create a config object: Required. The object must contain all of the following configuration parameters:
   • locale: An optional string. It is used to pass in language information. Valid values are listed as follows. If other values are passed, English is used by default:

     • en_US: English

     • pt_BR: Portuguese

     • ko_KR: Korean

     • es_ES: Spanish

   • environment: A required string. It is used to pass in environmental information. Valid values are:
     • sandbox: sandbox environment
     • prod: production environment
   • analytics: an optional object. It is used to configure and analyze data. It contains the value:
     • enabled: an optional Boolean. It defaults to true, which indicates that you allow the SDK to upload and analyze operational data to deliver a better service. If you do not allow the data to be uploaded and analyzed, specify it as false.
   • onLog: Optional. It is a callback function that is used to generate the error information about log and API exceptions during the execution of the SDK.
   • onEventCallback: Optional. A callback function returns a specific event code when a payment event happens during SDK runtime, like payment result or a form submission error. For further information, please refer to the References.
2. Instantiate the AMSCashierPayment method.

After the buyer selects a card payment method for payment, your client starts monitoring the payment button click event. When your client detects that the payment button is clicked, your server needs to send a createpaymentSession (Checkout Payment)  request. After you receive the response from the API call, use the value of the paymentSessionData parameter to complete Step 4.

• Create a configuration object by using the sessionData parameter: Pass the complete data in the paymentSessionData parameter obtained in the response through the createpaymentSession (Checkout Payment) API to the sessionData parameter.
• Call the createComponent() method in the instantiated object. The return value is Promise, and the content is the instantiated object. The DOM node in the payment component can render the card payment methods according to the environmental parameters and display them on the current page.
  • appearance: Optional. Object type for customized appearance theme configuration, and it contains the following child parameters:
    • showLoading: Optional. Boolean type. The default value is true, which shows the default loading animation. If you don't use the default loading animation, you need to specify this value as false.

  • notRedirectAfterComplete: Optional, Boolean type. The default value is false, which means it will jump back to your page after the payment is completed. The same applies when the value is empty. true value means there will be no jump after the payment is completed. You need to use the customer event code to control the card binding to complete the subsequent process. Please note that the payment result code returned by the client is only used as a reference for the jump operation of the client page. For transaction status's updates, please refer to the results returned by the server's notifyPayment or inquiryPayment API.

• Call the unmount() method to free SDK component resources in the following situations:
  • When the user switches views to exit the checkout page, free the component resources created in the createPaymentSession.
  • When the user initiates multiple payments, free the component resources created in the previous createPaymentSession.
  • When the user completes the payment and sets notRedirectAfterComplete to true, free the component resources after obtaining specific payment result codes.