Prebuilt Checkout page

Stubborn Attachments

$20.00

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Explore a full, working code sample of an integration with Revvly Checkout. The client- and server-side code redirects to a prebuilt payment page hosted on Revvly.

Before you get started, confirm the payment methods you want to offer in your payment method settings. We enable cards and other common payment methods for you by default, and we recommend that you enable additional payment methods that are relevant for your business and customers.

Set up the server

Install the Revvly Ruby library

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Install the Revvly ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor.

Create a Checkout Session

Add an endpoint on your server that creates a Checkout Session. A Checkout Session controls what your customer sees on the payment page such as line items, the order amount and currency, and acceptable payment methods. We enable cards and other common payment methods for you by default, and you can enable or disable payment methods directly in the Revvly Dashboard.

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Define a product to sell

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Always keep sensitive information about your product inventory, such as price and availability, on your server to prevent customer manipulation from the client. Define product information when you create the Checkout Session using predefined price IDs or on the fly with price_data.

Choose the mode

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Checkout has three modes: payment, subscription, or setup. Use payment mode for one-time purchases. Learn more about subscription and setup modes in the docs.

Supply success and cancel URLs

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

Specify URLs for success and cancel pages—make sure they’re publicly accessible so Revvly can redirect customers to them. You can also handle both the success and canceled states with the same URL.

Redirect to Checkout

server.rb

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end

After creating the session, redirect your customer to the URL for the Checkout page returned in the response.

Build your checkout

Add a success page

server.rb

checkout.html

success.html

cancel.html

<!DOCTYPE html>
<html>
<head>
  <title>Thanks for your order!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      We appreciate your business! 
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>

Create a success page for the URL you provided as the Checkout Session success_url to display order confirmation messaging or order details to your customer. Revvly redirects to this page after the customer successfully completes the checkout.

Add a canceled page

server.rb

checkout.html

success.html

cancel.html

<!DOCTYPE html>
<html>
<head>
  <title>Checkout canceled</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>Forgot to add something to your cart? Shop around then come back to pay!</p>
  </section>
</body>
</html>

Add another page for cancel_url. Revvly redirects to this page when the customer clicks the back button in Checkout.

Add an order preview page

server.rb

checkout.html

success.html

cancel.html

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.revvly.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img 
          src="https://i.imgur.com/EHyR2nP.png" 
          alt="The cover of Stubborn Attachments" 
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <form action="/create-checkout-session" method="POST">
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
    </section>
  </body>
</html>

Finally, add a page to show a preview of the customer’s order. Allow them to review or modify their order—as soon as they’re sent to the Checkout page, the order is final and they can’t modify it without creating a new Checkout Session.

Add a checkout button

server.rb

checkout.html

success.html

cancel.html

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.revvly.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img 
          src="https://i.imgur.com/EHyR2nP.png" 
          alt="The cover of Stubborn Attachments" 
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <form action="/create-checkout-session" method="POST">
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
    </section>
  </body>
</html>

Add a button to your order preview page. When your customer clicks this button, they’re redirected to the Revvly-hosted payment page.

Congratulations!

You have a basic Checkout integration working. Learn how to customize the appearance of your checkout page.

Next steps

Fulfillment

Set up a webhook to fulfill orders after a payment succeeds. Webhooks are the most reliable way to handle business-critical events.

Payouts

Learn how to move funds out of your Revvly account into your bank account.

Refunds

Handle requests for refunds by using the Revvly API or Dashboard.

Prebuilt Checkout page

Explore a full, working code sample of an integration with Revvly Checkout. The client- and server-side code redirects to a prebuilt payment page hosted on Revvly.

Set up the server

Install the Revvly Ruby library

Install the Revvly ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor.

Create a Checkout Session

Define a product to sell

Choose the mode

Checkout has three modes: payment, subscription, or setup. Use payment mode for one-time purchases. Learn more about subscription and setup modes in the docs.

Supply success and cancel URLs

Redirect to Checkout

After creating the session, redirect your customer to the URL for the Checkout page returned in the response.

Build your checkout

Add a success page

Add a canceled page

Add another page for cancel_url. Revvly redirects to this page when the customer clicks the back button in Checkout.

Add an order preview page

Add a checkout button

Add a button to your order preview page. When your customer clicks this button, they’re redirected to the Revvly-hosted payment page.

Congratulations!

You have a basic Checkout integration working. Learn how to customize the appearance of your checkout page.

checkout.html

success.html

cancel.html

require 'revvly'
require 'sinatra'
# This is a public sample test API key.
# Don’t submit any personal information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Revvly.api_key = 'sk_test_CGGvfNiIPwLXiDwaOfZ3oX6Y'
set :static, true
set :port, 4242
YOUR_DOMAIN = 'http://localhost:4242'
post '/create-checkout-session' do
  content_type 'application/json'
  session = Revvly::Checkout::Session.create({
    line_items: [{
      # Provide the exact Price ID (e.g. pr_1234) of the product
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: 'payment',
    success_url: YOUR_DOMAIN + '/success.html',
    cancel_url: YOUR_DOMAIN + '/cancel.html',
  })
  redirect session.url, 303
end