Hosted Checkout

Use Hosted Checkout to accept online payments with a SumUp-hosted payment page and minimal integration effort.

Hosted Checkout lets you accept online payments with a payment page hosted by SumUp. Your integration creates a checkout through the SumUp API, receives a hosted_checkout_url, and sends the customer to that page to complete the payment.

This is the lowest-effort way to launch an online checkout while keeping payment collection, status pages, and wallet support inside a SumUp-hosted flow.

A screenshot of the Hosted Checkout form showing available payment options, including Google Pay, Apple Pay, and card payment

Prerequisites

Ability to create a checkout through the SumUp API.
Authentication via API key or access token. See the Authorization Guide.
A server-side integration to create the checkout and keep credentials secret.

How Hosted Checkout Works

Create a checkout and set hosted_checkout.enabled to true.
Store the returned checkout id and hosted_checkout_url.
Redirect the customer to hosted_checkout_url, or share that URL in the flow you are building.
After the customer completes the payment, verify the final result through the API or with webhooks.

Create a Hosted Checkout

Send a request to the Create a checkout endpoint with hosted_checkout.enabled set to true. If you want the success page to link back to your website, include redirect_url at the same time.

1
curl -X POST https://api.sumup.com/v0.1/checkouts \
2
  -H "Content-Type: application/json" \
3
  -H "Authorization: Bearer $SUMUP_API_KEY" \
4
  -d '{
5
    "amount": 12.00,
6
    "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d",
7
    "currency": "EUR",
8
    "description": "A sample checkout",
9
    "merchant_code": "MCXXXXXX",
10
    "redirect_url": "https://example.com/orders/123/complete",
11
    "hosted_checkout": { "enabled": true }
12
  }'

1
const checkout = await client.checkouts.create({
2
  merchant_code: merchantCode,
3
  amount: 12.0,
4
  currency: "EUR",
5
  checkout_reference: "b50pr914-6k0e-3091-a592-890010285b3d",
6
  description: "A sample checkout",
7
  redirect_url: "https://example.com/orders/123/complete",
8
  hosted_checkout: { enabled: true },
9
});

1
var checkout = await client.Checkouts.CreateAsync(new CheckoutCreateRequest
2
{
3
    MerchantCode = merchantCode,
4
    Amount = 12.0f,
5
    Currency = Currency.Eur,
6
    CheckoutReference = "b50pr914-6k0e-3091-a592-890010285b3d",
7
    Description = "A sample checkout",
8
    RedirectUrl = "https://example.com/orders/123/complete",
9
    HostedCheckout = new CheckoutCreateRequestHostedCheckout
10
    {
11
        Enabled = true,
12
    },
13
});

1
var checkout = client.checkouts().createCheckout(
2
    CheckoutCreateRequest.builder()
3
        .merchantCode(merchantCode)
4
        .amount(12.0f)
5
        .currency(Currency.EUR)
6
        .checkoutReference("b50pr914-6k0e-3091-a592-890010285b3d")
7
        .description("A sample checkout")
8
        .redirectUrl("https://example.com/orders/123/complete")
9
        .hostedCheckout(
10
            CheckoutCreateRequestHostedCheckout.builder()
11
                .enabled(true)
12
                .build()
13
        )
14
        .build()
15
);

1
checkout, err := client.Checkouts.Create(ctx, sumup.CheckoutsCreateParams{
2
  MerchantCode:      merchantCode,
3
  Amount:            12.0,
4
  Currency:          sumup.CurrencyEUR,
5
  CheckoutReference: "b50pr914-6k0e-3091-a592-890010285b3d",
6
  Description:       "A sample checkout",
7
  RedirectURL:       "https://example.com/orders/123/complete",
8
  HostedCheckout: &sumup.CheckoutHostedCheckout{
9
    Enabled: true,
10
  },
11
})

1
checkout = client.checkouts.create(
2
    CreateCheckoutBody(
3
        merchant_code=merchant_code,
4
        amount=12.00,
5
        currency="EUR",
6
        checkout_reference="b50pr914-6k0e-3091-a592-890010285b3d",
7
        description="A sample checkout",
8
        redirect_url="https://example.com/orders/123/complete",
9
        hosted_checkout={"enabled": True},
10
    )
11
)

1
let checkout = client.checkouts().create(Some(CheckoutCreateRequest {
2
    merchant_code,
3
    amount: 12.,
4
    currency: Currency::EUR,
5
    checkout_reference: "b50pr914-6k0e-3091-a592-890010285b3d".into(),
6
    description: Some("A sample checkout".into()),
7
    redirect_url: Some("https://example.com/orders/123/complete".into()),
8
    hosted_checkout: Some(CheckoutCreateRequestHostedCheckout {
9
        enabled: true,
10
    }),
11
    return_url: None,
12
    customer_id: None,
13
    purpose: None,
14
    id: None,
15
    status: None,
16
    date: None,
17
    valid_until: None,
18
    transactions: None,
19
})).await?;

1
$checkout = $sumup->checkouts->create([
2
    'merchant_code' => $merchantCode,
3
    'amount' => 12.00,
4
    'currency' => 'EUR',
5
    'checkout_reference' => 'b50pr914-6k0e-3091-a592-890010285b3d',
6
    'description' => 'A sample checkout',
7
    'redirect_url' => 'https://example.com/orders/123/complete',
8
    'hosted_checkout' => [
9
        'enabled' => true,
10
    ],
11
]);

The response includes the hosted checkout configuration and the URL you send the customer to:

1
{
2
  "amount": 12,
3
  "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d",
4
  "checkout_type": "checkout",
5
  "currency": "EUR",
6
  "date": "2000-01-01T12:49:24.899+00:00",
7
  "description": "A sample checkout",
8
  "hosted_checkout": { "enabled": true },
9
  "hosted_checkout_url": "https://checkout.sumup.com/pay/8f9316a3-cda9-42a9-9771-54d534315676",
10
  "id": "64553e20-3f0e-49e4-8af3-fd0eca86ce91",
11
  "merchant_code": "MCXXXXXX",
12
  "merchant_country": "DE",
13
  "merchant_name": "Sample Shop",
14
  "purpose": "CHECKOUT",
15
  "status": "PENDING",
16
  "transactions": []
17
}

Redirect Customers to the Hosted Page

Use the hosted_checkout_url returned by the API as the payment page URL in your application.

Redirect the customer there immediately after checkout creation.
Or store the URL and present it later in your own flow, for example in an order confirmation page or email.

When the customer opens the Hosted Checkout page, SumUp handles the payment UI and payment confirmation flow.

The business branding shown on Hosted Checkout, such as your business logo and icon, can be configured from the Branding page(Opens in a new tab) in SumUp Dashboard. The business name and other customer-facing information can be configured from the Business profile page(Opens in a new tab).

Configure the Return Flow

If you want the success page to include a button back to your website, set redirect_url when you create the checkout, as shown in the examples above.

If redirect_url is present, the success page shows a button that sends the customer back to your website.

Handle Payment Outcomes

Hosted Checkout covers the customer-facing flow from payment page to final status page. Depending on the outcome, customers see different pages:

Success page after a successful payment.
Failure page when payment authorization or processing fails.
Expired page when the checkout session is no longer valid.
Not found page when the URL does not match an active hosted checkout session.

Success

Failure

Expired Session

A screenshot of the Hosted Checkout session expired page