Single Page Checkout

Single page checkout forms are great for those that want to embed a checkout form on a sales page. Single page checkout forms are also great for lead magnets, trip magnets and more.

Below will be a step by step guide to get you started with North Commerce's single page checkout forms.

1. Create a product <-- If you haven't yet please watch our video on how to create a product

2. Find the product id <-- this is the number after the - on the product title. It can also be found in the URL of the product after you have created or saved the product

3. Now you can add the checkout form shortcode to your sales page

[commerce-checkout-form product="product-id" redirect="URL-TO-THANKYOU-PAGE"]

4. Replace the "product-id" with the id of your product and add a complete URL to redirect the customer to after they have completed their purchase. Once you have done that it should look like this:

[commerce-checkout-form product="7" redirect="https://my-awesome-website.com/thank-you"]

Where 7 is the id of the product I want to sell and the url in redirect is where I want the user to end up after they have completed their purchase

Quick Tip - Set a default country for the phone field

Currently with the shortcode you are not able to set a default country. In the meantime while we work on this feature, if you want to set a default country to the phone number field you can add this block of Javascript in a code block directly underneath the checkout form.

<script>
 document.addEventListener('DOMContentLoaded', function () {
    const countryDropdown = document.querySelector('.phoneSelect');
    countryDropdown.value = 'US';

    const phoneInput = document.querySelector('.phoneInput');
    phoneInput.placeholder = 'Phone'
  });
</script>