It looks like you're using Google Chrome - try our powerful extension! Find out more. Add to Chrome
x
Help Center SettingsSelf Support PortalEmbeddable Components

Embeddable Components

ChargeDesk enables you to embed a number of billing components in your own site. These components can help you collect payments and reduce your support workload. Click on a component below to find out how it works.

Allows your customers to sign in to their billing support pages using their email address.

"Sign In Page" under Landing Page must be enabled for this component to work.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the support sign in embed.

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-embed="sign-in">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page.

<div id="support-sign-in-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "support-sign-in-1", // Unique ID of the HTML div
        company: "{company_id}",
        embed: "sign-in",
        options: {
            email: "customer@example.com"
        }
    });
</script>

The following options are available for embedded product pages.

An embedded payment page is available for any product you create on ChargeDesk.

You can add the following script to your site anywhere you would like to embed the product payment embed. Just replace {product_id} with the product's ID which you would like to embed.

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-product="{product_id}"
    data-embed="pay">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful payment. more info

<div id="product-payment-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "product-payment-1", // Unique ID of the HTML div
        company: "{company_id}",
        product: "{product_id}",
        embed: "pay",
        /*
        // Redirect on completed payment
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed payment programmatically
        onSuccess: function(response) {
            console.log("Completed payment", response);
            alert(response.msg);
        },
        */
        options: {
            themeColor: "#bb002f",
            showExtraInformation: true
        }
    });
</script>

The following options are available for embedded product pages.

After creating a payment request either manually or via the API, you can then embed that request on your website.

You can add the following script to your site anywhere you would like to embed the payment request embed. Just replace {charge_id} with the charge's ID

Please note: this component requires a signature when high security mode is enabled. more info

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-charge="{charge_id}"
    data-embed="charge"
    data-signature="{signature of 'https://chargedesk.com/{company_id}/{charge_id}/embed'}">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful payment. more info

<div id="payment-request-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "payment-request-1", // Unique ID of the HTML div
        company: "{company_id}",
        charge: "{charge_id}",
        embed: "charge",
        signature: "{signature of 'https://chargedesk.com/{company_id}/{charge_id}/embed'}", // See https://chargedesk.com/docs/security-signature#generate-embed for more information
        /*
        // Redirect on completed payment
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed payment programmatically
        onSuccess: function(response) {
            console.log("Completed payment", response);
            alert(response.msg);
        }
        */
    });
</script>

The following options are available for embedded payment request.

This component lets you easily collect payments from customers without creating individual products.

"Generic Payment" under Payment Pages must be enabled for this component to work.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the generic payment embed.

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-embed="pay">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful payment. more info

<div id="generic-payment-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "generic-payment-1", // Unique ID of the HTML div
        company: "{company_id}",
        embed: "pay",
        /*
        // Redirect on completed payment
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed payment programmatically
        onSuccess: function(response) {
            console.log("Completed payment", response);
            alert(response.msg);
        },
        */
        options: {
            amount: 10,
            currency: "USD",
            description: "Service fee"
        }
    });
</script>

The following options are available for generic payment components.

You can use this component to save cards from your customers for future payments.

"Card Collection" under Payment Pages must be enabled for this component to work.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the generic card collection embed.

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-embed="card">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful card save. more info

<div id="generic-card-collection-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "generic-card-collection-1", // Unique ID of the HTML div
        company: "{company_id}",
        embed: "card",
        /*
        // Redirect on completed card save
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed card save programmatically
        onSuccess: function(response) {
            console.log("Completed card save", response);
            alert(response.msg);
        }
        */
    });
</script>

The following options are available for the card collection pages.

You can use this component to enable your customers to update their default card on file.

"Update Card" under Customer Self-Support must be enabled for this component to work.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the customer card update embed. Just replace {customer_id} with the customer's ID from your payment gateway. more info

Please note: this component requires a signature when high security mode is enabled. more info

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-customer="{customer_id}"
    data-embed="card"
    data-signature="{signature of 'https://chargedesk.com/{company_id}/customer/{customer_id}/card/embed'}">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful card save. more info

<div id="customer-card-update-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "customer-card-update-1", // Unique ID of the HTML div
        company: "{company_id}",
        customer: "{customer_id}",
        embed: "card",
        signature: "{signature of 'https://chargedesk.com/{company_id}/customer/{customer_id}/card/embed'}", // See https://chargedesk.com/docs/security-signature#generate-embed for more information
        /*
        // Redirect on completed card save
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed card save programmatically
        onSuccess: function(response) {
            console.log("Completed card save", response);
            alert(response.msg);
        }
        */
    });
</script>

The following options are available for customer card update components.

You can use this component to show your customers the status of their subscription and to allow them to easily cancel the subscription.

The settings for "Subscription Self-Support" define how this component works.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the manage subscription embed. Just replace {subscription_id} with the subscription's ID

Please note: this component requires a signature when high security mode is enabled. more info

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-subscription="{subscription_id}"
    data-embed="subscription"
    data-signature="{signature of 'https://chargedesk.com/{company_id}/subscription/{subscription_id}/embed'}">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page. You can use successURL or onSuccess to control what happens with a successful card save. more info

<div id="manage-subscription-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "manage-subscription-1", // Unique ID of the HTML div
        company: "{company_id}",
        subscription: "{subscription_id}",
        embed: "subscription",
        signature: "{signature of 'https://chargedesk.com/{company_id}/subscription/{subscription_id}/embed'}", // See https://chargedesk.com/docs/security-signature#generate-embed for more information
        /*
        // Redirect on completed card save
        successURL: "https://yourdomain.com/success?msg={msg}",
        // OR Handle a completed card save programmatically
        onSuccess: function(response) {
            console.log("Completed card save", response);
            alert(response.msg);
        }
        */
    });
</script>

You can add the following script to your site anywhere you would like your customer's billing history to show. As above, just replace {customer_id} with the customer's ID from your payment gateway. more info

"Billing History" under Customer Self-Support must be enabled for this component to work.
Sign in to show your company settings here.

You can add the following script to your site anywhere you would like to embed the billing history embed. Just replace {customer_id} with the customer's ID from your payment gateway. more info

Please note: this component requires a signature when high security mode is enabled. more info

<script src="https://chargedesk.com/client.js"
    crossorigin="anonymous"
    data-company="{company_id}"
    data-customer="{customer_id}"
    data-embed="history"
    data-signature="{signature of 'https://chargedesk.com/{company_id}/customer/{customer_id}/history/embed'}">
</script>

Alternatively you can use the following more complex code if you would like more control over the embedded page.

<div id="billing-history-1"></div>
<script src="https://chargedesk.com/client.js" crossorigin="anonymous"></script>
<script>
    ChargeDesk.embed({
        id: "billing-history-1", // Unique ID of the HTML div
        company: "{company_id}",
        customer: "{customer_id}",
        embed: "history",
        signature: "{signature of 'https://chargedesk.com/{company_id}/customer/{customer_id}/history/embed'}", // See https://chargedesk.com/docs/security-signature#generate-embed for more information
        options: {
            noneText: "No payments found",
            supportLinks: true,
            showSubscriptions: "active"
        }
    });
</script>

The embedded billing history will intelligently match the existing font styling on your page. The following additional options are available;

This is an admin component which allows you embed the entire ChargeDesk customer support app inside your own admin pages, CRM or helpdesk.

Your agents only need to login once with their ChargeDesk account. The app will then automatically show them relevant payment information wherever it is embedded.

The app works by finding payment records which match the context in which it is being viewed. For example, if you have an admin page for a customer, the context would include information such as the customer's ID and email address.

You just need to include the script https://chargedesk.com/client-app.js then call the method ChargeDeskApp.embed() as shown in the example below.

<div id="chargedesk-app"></div>
<script src="https://chargedesk.com/client-app.js" crossorigin="anonymous"></script>
<script>
    ChargeDeskApp.embed({
        id: "chargedesk-app", // ID of the HTML div to place the app
        style: {
            height: "auto", // Resizes the app to match the height of the content
            maxHeight: "800px"
        },
        context: {
            customer: { // Include as much info about the customer as you can
                id: "cus_1234689abcdefg",
                email: "mike@customer.com",
                name: "Mike Smith",
                username: "mikesmith",
                phone: "+1 (555) 555-5555",
                country: "US" 
            },
            log: { // Log where actions using the app are performed
                url: window.location.href
            }		
        }
    });
</script>

If you embed the app in a dynamic environment and need to update the context, you can use the following method which efficiently updates the context without reloading the entire app.

<script>
    ChargeDeskApp.context({
        customer: {
            id: "cus_98764321gfedcba"
        }
    });
</script>

You can change the style of the app using the following attributes on the style object;

All context fields are optional, but we recommend you include as many as you have available to improve the accuracy of matches. The customer.email or customer.id fields in particular are highly recommended. The following attributes can be used on the context object;

If you have any problems embedding this app on your site please get in touch! We'd also love to hear from you if you are a service provider and would like your helpdesk or CRM listed on our site.