Hosted checkout forms

Use Rebilly hosted checkout forms to provide secure and compliant checkouts, that are quick to set up and don't require developer experience.

Checkout forms are:

  • Customizable
  • Mobile ready — with fully responsive design.
  • Conversion focused — with built-in error messaging, validation, and expedited checkout for returning customers.

example checkout form

For an interactive example, see Example checkout.

Create a hosted checkout form

  1. Log in or sign up.
  2. Select an environment: In the left navigation bar, click your username, and select an environment.

    • For a live environment:

      1. In the left navigation bar, click settings icon, then click Gateway accounts.
      2. Select a gateway account or click Add Gateway Account.
    • For a sandbox environment, no action is required. A test gateway account is already applied.
  3. Create a product and pricing plan:

    1. In the left navigation bar, click settings icon, then click Products & pricing plans.
    2. Click Add Product.
    3. Add product details and click Create Pricing Plan.
    4. Fill out the form and click Add Pricing Plan.
  4. Build a Rebilly checkout form:

    1. In the left navigation bar, click settings icon, then click Checkout forms.
    2. Click Add Checkout form.
    3. Fill out the form and click Save Checkout form.
    4. At the top of the screen, in the green notification box, click Preview.
  5. Test the checkout form: Fill out the form and use the following card details to execute a test transaction. Note: This card will not generate a real charge.

    • Card number: 4111 1111 1111 1111
    • Expiration date: any future date.
    • CVV: any 3 digits.
  6. Obtain the Rebilly checkout form redirect URL:

    1. In the left navigation bar, click settings icon, then click Checkout forms.
    2. On the right of your form, click preview icon.
    3. In the new browser window, copy the URL in the address bar.
  7. Create a checkout button and add it to your web page.

    Example:

    HTMLCSS
    <a class="button" href="link-to-checkout-form">Buy now</a>
    a.button {
       -webkit-appearance: button;
       -moz-appearance: button;
       appearance: button;
    
       display: inline-block;
       background: #0044d4;
       color: #ffffff;
       padding: 10px 20px;
       border-radius: 6px;
       text-decoration: none;
       color: initial;
    }
  8. Perform test transactions.