> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/sales-pages/single-page-checkout.md).

# Single Page Checkout

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

1. [Create a product](https://www.youtube.com/watch?v=IhZprMvvlHo) <-- 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

<figure><img src="/files/NwJJDxLqXlUPaMvrxJXJ" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
`[commerce-checkout-form product="product-id" redirect="URL-TO-THANKYOU-PAGE"]`
{% endhint %}

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:

{% hint style="success" %}
`[commerce-checkout-form product="7" redirect="https://my-awesome-website.com/thank-you"]`
{% endhint %}

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.

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

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