Integrating Cordarium with Tebex Themes

Last updated: June 28, 2024 at 12 AM

Step 1: Include Cordarium Scripts in `layout.html`

In your layout.html file, add the following code to the <head> tag. This will ensure that the necessary Cordarium scripts and styles are included on the checkout page.

{% if page.category == "checkout" and config("cordarium") == "enabled" %}
    <script src="https://app.cordarium.com/cdn/tebex-widget/index.js" crossorigin type="module" defer></script>
    <link href="https://app.cordarium.com/cdn/tebex-widget/style.css" rel="stylesheet">
{% endif %}

Step 2: Add Configuration in Schema

Navigate to your schema and add the following configuration. If you already have a schema, only copy the objects inside the config array.

{
  "author": "Cordarium",
  "support_email": "[email protected]",
  "config": [
    {
      "header": "Cordarium Payments",
      "options": [
        {
          "id": "cordarium",
          "name": "Cordarium Crypto Payments (PAID)",
          "description": "Enable cryptocurrency payments for your store by registering at cordarium.com.",
          "default": "disabled",
          "type": "select",
          "values": [
            "disabled",
            "enabled"
          ]
        },
        {
          "id": "cordarium-server-id",
          "name": "Tebex Project ID",
          "default": "",
          "description": "Find the ID here: Integrations > API Keys > Project ID",
          "type": "textarea"
        },
        {
          "id": "cordarium-server-platform",
          "name": "Game Server Platform",
          "description": "Select the platform of your game server.",
          "default": "minecraft",
          "type": "select",
          "values": [
            "minecraft",
            "fivem",
            "steam"
          ]
        },
        {
          "id": "cordarium-button-style",
          "name": "Button Style",
          "description": "Select the style of the payment button.",
          "default": "simple",
          "type": "select",
          "values": [
            "simple",
            "icon"
          ]
        },
        {
          "id": "cordarium-primary-color",
          "name": "Primary Color",
          "default": "#7b3be9",
          "description": "Select your primary color.",
          "type": "colour-picker"
        },
        {
          "id": "cordarium-secondary-color",
          "name": "Secondary Color",
          "default": "#884fec",
          "description": "Select your secondary color.",
          "type": "colour-picker"
        },
        {
          "id": "cordarium-box-shadow",
          "name": "Box Shadow",
          "default": "#6334b5",
          "description": "Select your box shadow color.",
          "type": "colour-picker"
        },
        {
          "id": "cordarium-text-color",
          "name": "Text Color",
          "default": "#ffffff",
          "description": "Select your text color.",
          "type": "colour-picker"
        },
        {
          "id": "cordarium-button-text",
          "name": "Button Text",
          "default": "Pay with Crypto",
          "description": "Set the text for the payment button.",
          "type": "textarea"
        }
      ]
    }
  ]
}

Step 3: Add Cordarium Configuration in `checkout.html`

In your checkout.html file, add the following code to configure the Cordarium cart. This will pass the necessary data to Cordarium for processing payments. You can paste it at the beginning of the code block in the file.

{% if config("cordarium") == "enabled" %}
    <script>
        window.cordariumCart = {
            platform: "Tebex",
            server_id: "{{ config("cordarium-server-id") }}",
            username: "{{ basket.ign }}",
            coupons: {
                {% for coupon in basket.coupons %}
                {% if coupon.description|lower starts with "gift card" %}
                card_number: "{{ coupon.code }}"
                {% else %}
                coupon_code: "{{ coupon.code }}"
                {% endif %}
                {% if not loop.last %},{% endif %}
                {% endfor %}
            },
            basket_packages: [
                {% for package in basket.packages %}
                {
                    id: {{ package.id }},
                    quantity: {{ package.quantity }},
                    {% if package.options|length > 0 %}
                    variable_data: {
                        {% for option in package.options %}
                        {% if option.value != "" and option.name|lower != "gift username" %}
                        "{{ option.name|lower == "discord id" ? "discord_id" : option.name|lower == "server" ? "server" : option.name|lower == "giftcard to" ? "giftcard_to" : option.name }}": "{{ option.value }}"
                        {% if not loop.last %},{% endif %}
                        {% endif %}
                        {% endfor %}
                    }
                    {% endif %}
                }
                {% if not loop.last %},{% endif %}
                {% endfor %}
            ]
        };
    </script>
{% endif %}

Step 4: Add the Payment Button

In your checkout page, paste the following button code where you want the payment button to appear.

{% if config("cordarium") == "enabled" %}
    {% if config("cordarium-button-style") == "simple" %}
        <button data-game-type="{{ config("cordarium-server-platform") }}"
                id="pay-with-cordarium"
                style="--cordarium-button-bg: linear-gradient(0deg, {{ config("cordarium-primary-color") }} 0%, {{ config("cordarium-secondary-color") }} 100%); --cordarium-button-text: {{ config("cordarium-text-color") }}; --cordarium-box-shadow: {{ config("cordarium-box-shadow") }};">
            {{ config("cordarium-button-text") }}
        </button>
    {% else %}
        <button data-game-type="{{ config("cordarium-server-platform") }}" id="pay-with-cordarium"
                style="--cordarium-button-bg: linear-gradient(0deg, {{ config("cordarium-primary-color") }} 0%, {{ config("cordarium-secondary-color") }} 100%); --cordarium-button-text: {{ config("cordarium-text-color") }}; --cordarium-box-shadow: {{ config("cordarium-box-shadow") }};">
            <span class="pay-with-cordarium--text">
                Pay by <img src="https://app.cordarium.com/images/widget/cordarium.svg" alt="Cordarium Payments"
                    width="24" height="24"/> Pay
            </span>
            <span class="cordarium-divider"></span>
            <img alt="Powered by Cordarium" class="cordarium-currencies"
                 src="https://app.cordarium.com/images/widget/crypto-icons.svg"/>
        </button>
    {% endif %}
{% endif %}

Summary

Step 1: Include the Cordarium scripts in the <head> tag of layout.html to load the necessary JavaScript and CSS.
Step 2: Add the configuration in the schema to set up the Cordarium options.
Step 3: Configure the Cordarium cart in checkout.html with your store and user details.
Step 4: Insert the payment button code in the checkout page where you want it to be displayed.

Following these steps will ensure the Cordarium widget is correctly integrated into your Tebex template, allowing users to make cryptocurrency payments seamlessly.