This guide will walk you through the process of integrating the Coinsub checkout button into your website to enable subscription payments using our widget. You can customize the button's appearance and behavior using various data attributes.
1. Basic Integration
To integrate the Coinsub subscription button, you need to include the following script tag in your HTML:
Copy <script
class="coinsub-button-script"
data-id="YOUR_PRODUCT_CODE"
src="https://app.coinsub.io/js/library/button.js">
</script> Replace YOUR_BUTTON_ID with the unique identifier for your subscription button, which you can obtain from your Coinsub account.
2. Customizing the Button
You can customize the appearance and behavior of the button using additional data attributes. Below are some examples:
Example 1: Custom Color and Customer Data
Copy <script
class="coinsub-button-script"
data-id="YOUR_PRODUCT_CODE"
data-color="#260a80"
data-customer='{"customerId": "customer-id", "customerName": "Customer Name"}'
src="https://app.coinsub.io/js/library/button.js">
</script> data-color: Sets the color of the button.
data-customer: Passes custom customer data as a JSON string.
Example 2: Dark Mode and Custom Background Color
Copy <div style="background-color: darkslateblue; margin: 1rem; padding: 1rem;">
<script
class="coinsub-button-script"
data-id="YOUR_PRODUCT_CODE"
data-color="#1E90FF"
data-mode="dark"
src="https://app.coinsub.io/js/library/button.js">
</script>
</div> data-mode: Sets the button mode. Available options are dark and light.
Example 3: Basic Button
Copy <div style="background-color: whitesmoke; margin: 1rem; padding: 1rem;">
<script
class="coinsub-button-script"
data-id="YOUR_PRODUCT_CODE"
src="https://app.coinsub.io/js/library/button.js">
</script>
</div> This example demonstrates the basic integration without any additional customization.
3. Full Example
Here is a full example of an HTML page integrating multiple Coinsub buttons with different customization options:
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscription Button Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h1>Subscription Button Test</h1>
<p>Testing the Coinsub subscription buttons:</p>
<!-- Subscription Button 1 -->
<div>
<script
class="coinsub-button-script"
data-id="801c072d0b"
data-color="#260a80"
data-customer='{"customerId": "bc0378f4-db8e-44f9-91bc-056662fec3c6", "customerName": "Tomcake"}'
src="https://app.coinsub.io/js/library/button.js">
</script>
</div>
<!-- Subscription Button 2 -->
<div style="background-color: darkslateblue; margin: 1rem; padding: 1rem;">
<script
class="coinsub-button-script"
data-id="801c072d0b"
data-color="#1E90FF"
data-mode="dark"
src="https://app.coinsub.io/js/library/button.js">
</script>
</div>
<!-- Subscription Button 3 -->
<div style="background-color: black; margin: 1rem; padding: 1rem;">
<script
class="coinsub-button-script"
data-id="801c072d0b"
data-color="rgb(0,255,0)"
data-mode="dark"
src="https://app.coinsub.io/js/library/button.js">
</script>
</div>
<!-- Subscription Button 4 -->
<div style="background-color: whitesmoke; margin: 1rem; padding: 1rem;">
<script
class="coinsub-button-script"
data-id="801c072d0b"
src="https://app.coinsub.io/js/library/button.js">
</script>
</div>
</body>
</html> 4. Data Attributes Reference
data-id (required): The unique identifier for your subscription button.
data-color (optional): Hex code or RGB value to set the button color.
data-mode (optional): Set to dark or light to choose the button mode.
data-customer (optional): JSON string containing customer data, e.g., {"customerId": "customer-id", "customerName": "Customer Name"}.
5. Additional Styling
You can add additional CSS styles to customize the appearance of the button container or surrounding elements. Use standard CSS techniques within your <style> tags or external stylesheets.
By following these steps and examples, you can easily integrate and customize the Coinsub subscription button to fit your website's checkout process. For further customization or advanced integration, refer to the Coinsub API documentation or contact our support team.
