Custom Checkout Integration

If you prefer to create a custom implementation for integrating Coinsub subscription payments without using the provided widget, you can directly create a form that posts to the Coinsub server. Below is a guide on how to achieve this.

1. Creating a Custom Form

You can create a custom HTML form that collects the necessary data and posts it to the Coinsub server. Here’s an example of how to set up such a form:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Subscription Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .subscription-button {
            padding: 10px 15px;
            background-color: #0085FF; /* Custom button color */
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            color: white; /* Button text color */
        }
    </style>
</head>
<body>
    <h1>Custom Subscription Form</h1>
    <p>Subscribe to our service using the form below:</p>

    <form id="subscriptionForm" method="POST" action="https://buy.coinsub.io/YOUR_PRODUCT_CODE">
        <input type="hidden" name="customerData" id="customerData" value='{"customerId": "bc0378f4-db8e-44f9-91bc-056662fec3c6", "customerName": "James White"}'>
        <button type="submit" class="subscription-button">Pay with Crypto</button>
    </form>

    <script>
        // Customize the customer data as needed
        const customerData = {
            customerId: "bc0378f4-db8e-44f9-91bc-056662fec3c6",
            customerName: "James White"
        };

        // Set the customer data in the hidden field
        document.getElementById('customerData').value = JSON.stringify(customerData);

        // Optionally, add event listener for form submission
        document.getElementById('subscriptionForm').addEventListener('submit', function(event) {
            // Perform any additional logic before form submission if necessary
        });
    </script>
</body>
</html>

2. Explanation of the Code

Form Structure:
- The form uses the POST method and points to the URL for creating a subscription payment: https://buy.coinsub.io/YOUR_PRODUCT_CODE.
- Replace YOUR_PRODUCT_CODE with your actual product code found on the product's widget page obtained from the Coinsub Merchant UI.
Hidden Input Field:
- The form includes a hidden input field to pass customer data. This field is populated with a JSON string containing customer information.
Submit Button:
- A styled submit button is provided for users to initiate the payment process. You can customize its appearance using CSS.
JavaScript:
- JavaScript is used to set the customer data in the hidden field dynamically. You can customize the customer data object as needed.
- An optional event listener is added to perform any additional logic before the form is submitted.

3. Customizing the Form

Button Customization:
- You can customize the button's appearance using CSS. Modify the .subscription-button class to change colors, padding, font size, etc.
Customer Data:
- Customize the customerData object to include the relevant customer information required for the transaction.
Additional Fields:
- If you need to collect more data from the user, you can add additional input fields to the form.

4. Example Use Case

Here’s an example use case for integrating a custom subscription form on your website:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Product Subscription</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .subscription-button {
            padding: 10px 15px;
            background-color: #260a80; /* Custom button color */
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            color: white; /* Button text color */
        }
    </style>
</head>
<body>
    <h1>Subscribe to Our Product</h1>
    <p>Complete the form below to subscribe to our product:</p>

    <form id="subscriptionForm" method="POST" action="https://buy.coinsub.io/801c072d0b">
        <input type="hidden" name="customerData" id="customerData" value='{"customerId": "customer-id", "customerName": "Customer Name"}'>
        <button type="submit" class="subscription-button">Subscribe Now</button>
    </form>

    <script>
        // Customize the customer data as needed
        const customerData = {
            customerId: "bc0378f4-db8e-44f9-91bc-056662fec3c6",
            customerName: "James White"
        };

        // Set the customer data in the hidden field
        document.getElementById('customerData').value = JSON.stringify(customerData);

        // Optionally, add event listener for form submission
        document.getElementById('subscriptionForm').addEventListener('submit', function(event) {
            // Perform any additional logic before form submission if necessary
        });
    </script>
</body>
</html>

With this approach, you have full control over the form and its submission process, allowing for greater flexibility and customization to suit your specific needs. For further integration details, refer to the Coinsub API documentation or contact our support team.

PreviousIntegrating Coinsub Checkout Button NextWebhook Documentation

Last updated 5 months ago

htmlCopy code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Subscription Form</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .subscription-button { padding: 10px 15px; background-color: #0085FF; /* Custom button color */ border: none; border-radius: 25px; cursor: pointer; font-size: 18px; font-weight: bold; color: white; /* Button text color */ } </style> </head> <body> <h1>Custom Subscription Form</h1> <p>Subscribe to our service using the form below:</p> <form id="subscriptionForm" method="POST" action="https://buy.coinsub.io/YOUR_PRODUCT_CODE"> <input type="hidden" name="customerData" id="customerData" value='{"customerId": "bc0378f4-db8e-44f9-91bc-056662fec3c6", "customerName": "James White"}'> <button type="submit" class="subscription-button">Pay with Crypto</button> </form> <script> // Customize the customer data as needed const customerData = { customerId: "bc0378f4-db8e-44f9-91bc-056662fec3c6", customerName: "James White" }; // Set the customer data in the hidden field document.getElementById('customerData').value = JSON.stringify(customerData); // Optionally, add event listener for form submission document.getElementById('subscriptionForm').addEventListener('submit', function(event) { // Perform any additional logic before form submission if necessary }); </script> </body> </html>

htmlCopy code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Product Subscription</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .subscription-button { padding: 10px 15px; background-color: #260a80; /* Custom button color */ border: none; border-radius: 25px; cursor: pointer; font-size: 18px; font-weight: bold; color: white; /* Button text color */ } </style> </head> <body> <h1>Subscribe to Our Product</h1> <p>Complete the form below to subscribe to our product:</p> <form id="subscriptionForm" method="POST" action="https://buy.coinsub.io/801c072d0b"> <input type="hidden" name="customerData" id="customerData" value='{"customerId": "customer-id", "customerName": "Customer Name"}'> <button type="submit" class="subscription-button">Subscribe Now</button> </form> <script> // Customize the customer data as needed const customerData = { customerId: "bc0378f4-db8e-44f9-91bc-056662fec3c6", customerName: "James White" }; // Set the customer data in the hidden field document.getElementById('customerData').value = JSON.stringify(customerData); // Optionally, add event listener for form submission document.getElementById('subscriptionForm').addEventListener('submit', function(event) { // Perform any additional logic before form submission if necessary }); </script> </body> </html>