# Wordpress

There are three ways to integrate XanPay with a Wordpress website.

# 1. JS Injection

After injecting the following line into your header section

<script src="https://cdn.xanpay.com/sdk/xanpay-sdk-1.0.0.js"></script>

You can construct checkout urls and then redirect users to XanPay checkout website.

    async function checkout() {
      const orders = [{
        id: 'kun1Ja2',
        name: "iPhone",
        quantity: 1,
        amount: 151
      const options = {
        apiKey: 'a04668f6e299280a7485e0002ce9729c',
        apiKeySecret: '0f37463afff161028ef495d9035ccdc053a036f5e57fee7a720c89dfedc55131',
        currency: 'HKD',
        amount: 151,
        environment: XanPaySDK.Environment.Sandbox,
        redirectUrl: 'https://xanpay.com/',
        notifyUrl: 'https://webhook.site/7f014519-30dc-4f0f-9fd8-d03798e69ff7',
        notifyPayload: 'Some payload',
        customer: {
          email: "test@test.test",
          firstName: "Test",
          lastName: "Tester",
          phone: {
            code: "+65",
            phone: "12345678901"
      const url = await XanPaySDK.constructCheckoutUrl(options);
      window.open(url, '_blank');

# 2. Plugin

You can install XanPay plugin into your wordpress instance and then inject checkout buttons. Please follow the instructions from here(opens new window)

# 3. WooCommerce

WooCommerce is a customizable, open-source eCommerce platform built on WordPress. You can accept payments on your WooCommerce website with XanPay. Download XanPay WooCommerce plugin

# Capabilities

  • Use XanPay payment gateway to accept payments.
  • A custom callback URL can be provided. It will be called each time a charge is completed.
  • Choose between redirecting users to XanPay checkout page, or displaying our widget directly on the Thank You page.
  • Customize payment methods available for customers

# Installation

  1. Create directory xanpay-wc-widget in wp-app/wp-content/plugins
  2. Unzip contents of the archive into xanpay-wc-widget directory.
  3. Activate XanPay plugin in the WordPress admin dashboard (Plugins ⟶ Installed plugin)

# Configuration

  • Go to WooCommerce ⟶ Settings
  • Switch to the Payments tab and activate XanPay payment gateway
  • Go to XanPay Payment settings and add production and test api keys that can be generated in your merchant XanPay Dashboard
  • Optional. Specify payment methods available for customers.
    • Specify payment methods and other settings in your merchant dashboard and get generated link - https://dashboard.xanpay.com/link-generator. Then copy encoded payment methods (&paymentMethods={encodedPart}). Example: paymentMethods=eyJTRyI6WyJwYXlub3ciXSwiSEsiOlsiZnBzIl0sIk1ZIjpbImR1aXQtbm93Il19 (copy bold part) and insert it in "Payment methods widget restriction" field in WooCommerce plugin settings.
  • Optional. Specify payment methods that are displayed in the checkout (1-5 methods).
    • Generate a methods string (described above) and insert it into "Payment methods displayed in checkout" field in WooCommerce plugin settings.
  • Optional. Configure Redirect URL.
    Customers will be able to return to the specified URL after they complete their payment.
  • Optional. Configure Notify URL.
    A POST request containing the order ID signed with your certificate's private key will be sent to the provided URL.
    Your certificate's public key can be used to ensure the authenticity of the request.
    Important: a certificate has to be generated in XanPay dashboard for this functionality to work.

  • Currency can be configured in general WooCommerce settings tab

# Changelog

# 1.1.0

  • Customer information (email and phone) are prefilled in the widget after redirect/injection.

# 1.2.1

  • Added an option to manually specify 1-5 methods to display their icons in checkout
  • Added description to checkout
  • Description can be modified in settings

# 1.2.2

  • Fixed some api calls

# 1.2.3

  • Moved redirection mode to backend to support custom thank you pages