# Checkout

Kustom Checkout is where your customer pays — one step, embedded in your site or hosted by Kustom, that turns a cart into a paid order. Every other Kustom product works on that order, so this is where your integration starts.

Start with the path that fits how your store is built. Below it are the ways to put the
checkout in front of your customer.

## Start here

Pick the card that matches your store, to make sure you're in the right place. If it runs on a
platform, you may not need to build anything at all.

  Most merchants

My store runs on a platform

Close to thirty platforms already ship a maintained Kustom plugin. Installing it is the integration, and nothing else on this page is work you have to do.

[Find your platform](/partners/)

  <span className="kd-livedot" aria-hidden="true"></span>Live demo

Checkout in 15 minutes

See the whole flow work before you build it. Every call in the tutorial runs against a live Playground merchant beside the text, on credentials these docs hold for you.

[Start the quickstart](/checkout/quickstart/)

  The guide

Build it for production

Five pages, in order: the payload, the create call, the rendered snippet, the callbacks you have to answer and the two ways you learn the customer paid.

[See the sequence](/checkout/how-it-works/)

## Integration models

Embedded is the default: the checkout renders on your own checkout page and the customer never
leaves your site. The hosted payment page is for integrations with no page to embed into, and
sends the customer to a page Kustom hosts. Both run the same order and the same checkout modules,
so switching later is front-end work, not a re-integration.

      <p class="kd-model__where">Your checkout page</p>
        <p class="kd-model__where">Kustom Checkout, in an iframe</p>
        <ul class="kd-model__features">
          <li class="kd-model__feature">Address collection</li>
          <li class="kd-model__feature">Interactive cart</li>
          <li class="kd-model__feature">Gift cards</li>
          <li class="kd-model__feature">Shipping Assistant</li>
          <li class="kd-model__feature">Confirmation page upsell</li>
          <li class="kd-model__feature">Pre-purchase upsell</li>
          <li class="kd-model__feature">Payments</li>
          <li class="kd-model__feature">Loyalty</li>
          <li class="kd-model__feature kd-model__feature--more">And much more</li>
        </ul>
    <p class="kd-model__name"><a href="/checkout/how-it-works/">Embedded checkout <span aria-hidden="true">→</span></a></p>
  <p class="kd-models__or">or</p>
      <p class="kd-model__where">A page Kustom hosts, reached by redirect from your site</p>
        <ul class="kd-model__features">
          <li class="kd-model__feature">Address collection</li>
          <li class="kd-model__feature">Interactive cart</li>
          <li class="kd-model__feature">Gift cards</li>
          <li class="kd-model__feature">Shipping Assistant</li>
          <li class="kd-model__feature">Confirmation page upsell</li>
          <li class="kd-model__feature">Pre-purchase upsell</li>
          <li class="kd-model__feature">Payments</li>
          <li class="kd-model__feature">Loyalty</li>
          <li class="kd-model__feature kd-model__feature--more">And much more</li>
        </ul>
    <p class="kd-model__name"><a href="/checkout/surfaces/hosted-payment-page/">Hosted payment page <span aria-hidden="true">→</span></a></p>

Building a native app? The [Mobile SDK](/checkout/mobile-sdk/) renders the embedded checkout
inside your iOS, Android or React Native app.

## Beyond the checkout

  Elements

Express buttons and payment method displays on pages you already own, such as a product page or the cart, before the checkout opens.

[Explore Elements](/checkout/surfaces/elements-overview/)

  In-person payments

Card payments in your shop, on a phone or a Kustom terminal. A separate API, and the same order in Order Management that an online checkout creates.

[See in-person payments](/in-person/)