> 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

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](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="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FZ7cTCChic6JZexaXj7Dz%2Fproduct%20id.png?alt=media&amp;token=4cdf290e-6c0a-4a88-9000-0bc99f2fbe8f" 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>
```