Add to Chrome
x
Add to Chrome
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.
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.
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.
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.
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.
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
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.