Step 3 Bind Payment and Listen Events

Bind Payment Event

pay(method, params)

Description: Call this method when clicking the pay button

Method Details

Parameter	Description
method	Payment method, e.g. "CreditCard", "PIX", etc.

Params Details

Parameter	Type	Required	Description
billingAddress	Object	Required	Note: Country field is required Billing information (BillingAddress Details)
shippingAddress	Object	Optional	Shipping information (ShippingAddress Details)

Usage Example

element.addEventListener("click", () => {
  loading = true;
  testPayment.pay("CreditCard", {
    billingAddress: {
      firstName: "Pinkie",
      lastName: "Olson",
      country: "US",
      email: "[email protected]",
      city: "Lake Kacie",
      address: "3986 Grimes Islands",
      phone: "+919876543210",
      zipCode: "36000",
    },
    shippingAddress: {
      firstName: "Cecil",
      lastName: "McDermott",
      country: "US",
      email: "[email protected]",
      city: "New Mylenemouth",
      address: "350 Bradtke Courts",
      phone: "+919876543210",
      state: "AL",
      zipCode: "36000",
    },
  });
});

---

onPaymentCompleted(response)

Description: This method is called when the payment is complete

Use Cases

testPayment.onPaymentCompleted = response => {
  loading = false;
  if (response.code === 301) {
    window.location.href = response.redirectUrl;
    return;
  }
  // TODO: Handle the case of payment success and failure prompts
};

Response Details

Parameter	Type	Description
code	Number(3)	Response code, see Appendix for details
uniqueId	String(32)	Unique transaction ID returned by the system
redirectUrl	String(255)	URL to redirect to the checkout page
message	String(255)	System return message

Request Success

{
  "message": "Approved",
  "code": 100,
  "uniqueId": "2051934696534740993"
}

Once the request is successful, use the redirectUrl to jump to the 3D or local payment page

{
  "message": "Redirect",
  "redirectUrl": "https://test.cc/redirect/test/3d/81d4cbd6ef504558b73318466d26d1a2",
  "code": 301,
  "uniqueId": "2051940804829646849"
}

The request failed

{
  "message": "transaction failed",
  "code": 101,
  "uniqueId": "2051943610370334721"
}

---

Bind Other Events

onInitCompleted(event)

Description: This method is called after payment initialization is completed

Event Details

Parameter	Description
event	Fixed value "initialization_completed"
methods	Used to view supported payment methods, e.g. ["CreditCard","PIX"]

Usage Example

testPayment.onInitCompleted = event => {
  // TODO: Handles the Loading state
  loading = false;
};

---

onError(error)

Note: This method is called when an error occurs during payment initialization

Error Details

Parameter	Description
event	Fixed value "error"
message	Error cause description

Usage Example

testPayment.onError = error => {
  // TODO: Used to view details of errors that occurred during initialization to adjust payment configurations
  console.error(error);
};