# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.northcommerce.com/north-commerce/sales-pages/single-page-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.