Creating Static Forms

There's a few instances where you'll want to create a static form.

1. You are creating a form that you do not wish to be editable by site users.
2. You want to add your own user interface to have your customer create or edit a form.

A common example of this is if you're developing a plugin, and want to use SureCart to power your plugin's checkout solution. You may want to prevent your user from editing a form, or may want to provide more minimal options.

Add A New Checkout Form

We've streamlined creating a custom checkout form through the use of web components. This lets you create a custom form with minimal configuration.

At the minimum, a ce-email, ce-payment and ce-submit component are needed in the form:

<sc-checkout id="my-checkout">
    <sc-customer-email></sc-customer-email>
    <sc-payment></sc-payment>
    <sc-submit><sc-submit>
</sc-checkout>

Pre-Populating Prices

However, in the example above, clicking "submit" won't actually purchase any products. In order to add a product to the form, you must pass an array of prices to the prices attribute of the ce-checkout component.

<sc-checkout id="my-checkout">
    <sc-customer-email></sc-customer-email>
    <sc-payment></sc-payment>
    <sc-submit><sc-submit>
</sc-checkout>

<script>
    var checkout = document.querySelector( '#my-checkout' );
    // set checkout prices
    checkout.prices = [
        {
            price_id: '6b6f10b8-1054-455b-83e5-86be0e6fa74e',
            quantity: 1,
            removeable: false
        },
    ];
</script>

Product Choice Options

There are times when you want to let the user select a specific price or subscription, force the user to purchase all of the pre-selected options, or allow them to pick and choose options. You can set this with the product choices option.

Select a Single Option

<sc-checkout id="my-checkout">
    <sc-price-choices default="6b6f10b8-1054-455b-83e5-86be0e6fa74e">
    </sc-price-choices>
    <sc-payment></sc-payment>
    <sc-customer-email></sc-customer-email>
    <sc-submit><sc-submit>
</sc-checkout>

<script>
    var choiceComponent = document.querySelector("#my-checkout ce-price-choices");

    choiceComponent.choices = [
        {
            price_id: '6b6f10b8-1054-455b-83e5-86be0e6fa74e',
            quantity: 1
        },
        {
            price_id: '6b6f10b8-1054-455b-83e5-86be0e6fa74e',
            quantity: 1
        }
    ];
</script>

Pick and Choose Multiple Options

To have the user select a single option from a list of options, pass the "checkbox" option in the ce-price-choices component.

<sc-checkout id="my-checkout">
    <sc-price-choices
        type="checkbox"
        default="6b6f10b8-1054-455b-83e5-86be0e6fa74e">
    </sc-price-choices>
    <sc-payment></sc-payment>
    <sc-customer-email></sc-customer-email>
    <sc-submit><sc-submit>
</sc-checkout>

<script>
    var choiceComponent = document.querySelector("#my-checkout ce-price-choices");

    choiceComponent.choices = [
        {
            price_id: '6b6f10b8-1054-455b-83e5-86be0e6fa74e',
            quantity: 1
        },
        {
            price_id: '6b6f10b8-1054-455b-83e5-86be0e6fa74e',
            quantity: 1
        }
    ];
</script>

Adding Order Bump Functionality

To add an order-bump type of functionality, where the user can choose to add or remove a specific price from checkout, you can use the addPrice, removePrice or togglePrice methods on the ce-checkout component.

<sc-checkout id="my-checkout">
    <sc-payment></sc-payment>
    <sc-customer-email></sc-customer-email>
    <sc-button class="my-order-bump">Add Something to my order</sc-button>
    <sc-submit><sc-submit>
</sc-checkout>

<script>
    var checkout = document.querySelector("#my-checkout");
    var orderBump = checkout.querySelector(".my-order-bump");

    orderBump.addEventListener("click", function() {
        checkout.togglePrice('6b6f10b8-1054-455b-83e5-86be0e6fa74e')
    });
</script>