Hosted Checkout Form

This is the simplest and most popular approach. From your pricing page, a customer can click a “Pay” button and be directed to our hosted checkout form - we will handle everything from there.

This is the simplest and most popular approach. From your pricing page, a customer can click a “pay button” and be directed to our hosted checkout form - we will handle everything from there:

The form can be fully customized to fit your branding
All of your enabled payment options (ex: credit card/apple pay/ACH/crypto/etc.) will be shown
You will receive the appropriate webhook events on success/failure

Once a customer has submitted the checkout form, this will automatically sync into our system and you will see the customer in your OpenPay admin console with the subscription or one-time price that they purchased.

Install and import our clientCopied!

For this recipe, we will use the TypeScript SDK, which you can install using

npm install @getopenpay/client

Then, import and configure the client:

import { Configuration } from '@getopenpay/client';
import OpenPayClient from '@getopenpay/client/client';

// Configure the OpenPay client
const config = new Configuration({
  basePath: 'https://connto.getopenpay.com', // Production environment
  apiKey: 'YOUR_PUBLISHABLE_KEY',
  accessToken: 'YOUR_SECRET_KEY',
});

const client = new OpenPayClient(config);

Create customerCopied!

const createCustomerRequest = {
  email: 'john.smith@example.com',
  firstName: 'John',
  lastName: 'Smith',
  line1: '123 Main St',
  city: 'San Francisco',
  state: 'CA',
  country: 'US',
  zipCode: '94105',
};

const customer = await client.customersApi.createCustomer({ createCustomerRequest });
console.log('Created customer:', customer.id);

Create a checkout sessionCopied!

const checkoutSession = await client.checkoutApi.createCheckoutSession({
  createCheckoutSessionRequest: {
    customerId: customer.id, // previously created customer
    lineItems: [
      { priceId: 'PRICE_ID_1', quantity: 2 },
      { priceId: 'PRICE_ID_2', quantity: 1 },
    ],
    mode: 'subscription',
    currency: 'usd',
    returnUrl: 'https://your_return_url.com',
    successUrl: 'https://your_success_url.com',
  },
});

console.log('Redirect user to:', checkoutSession.url);

Full Working Example:Copied!

import { Configuration } from '@getopenpay/client';
import OpenPayClient from '@getopenpay/client/client';
import bodyParser from 'body-parser';
import cors from 'cors';
import express from 'express';

const app = express();
app.use(cors());
app.use(bodyParser.json());

// Configure OpenPay SDK
const config = new Configuration({
  basePath: 'https://connto.getopenpay.com', // Production endpoint
  apiKey: '', //publishable key
  accessToken: '', //secret key
});

const client = new OpenPayClient(config);

// In-memory map to associate your app's users to OpenPay customer IDs
const usersDB = new Map<string, string>();

// Serve a simple front-end page
app.get('/', (_, res) => {
  res.send(`
    <h1>OpenPay Hosted Checkout Demo</h1>
    <button id="checkout">Subscribe</button>
    <script>
      document.getElementById('checkout').onclick = async () => {
        const res = await fetch('/subscribe', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ yourUserId: 'user_123' })
        });
        const data = await res.json();
        if (data.url) {
          window.location.href = data.url;
        } else {
          alert('Error: ' + (data.error || 'Unknown'));
        }
      };
    </script>
  `);
});

// API endpoint to create a checkout session
app.post('/subscribe', async (req, response) => {
  try {
    const { yourUserId } = req.body;
    if (!yourUserId) {
       response.status(400).json({ error: 'Missing yourUserId' });
    }

    let customerId = usersDB.get(yourUserId);

    if (!customerId) {
      // Step 1: Create customer
      const createCustomerRequest = {
        email: `${yourUserId}@example.com`,
        firstName: 'Test',
        lastName: 'User',
        line1: '123 Main St',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
        zipCode: '94105',
      };

      const customer = await client.customersApi.createCustomer({ createCustomerRequest });
      customerId = customer.id;
      usersDB.set(yourUserId, customerId);
      console.log(`Created OpenPay customer ${customerId} for user ${yourUserId}`);
    }

    // Step 2: Create hosted checkout session
    const checkoutSession = await client.checkoutApi.createCheckoutSession({
      createCheckoutSessionRequest: {
        customerId,
        lineItems: [
          {
            priceId: '', // Replace with your actual price ID
            quantity: 1,
          }
        ],
        mode: 'subscription',
        currency: 'usd',
        returnUrl: 'http://localhost:3000/',
        successUrl: 'http://localhost:3000/success',
      }
    });

     response.json({ url: checkoutSession.url });

  } catch (err: any) {
    console.error('Error creating checkout session:', err.response?.data || err.message);
     response.status(500).json({ error: 'Internal server error' });
  }
});

// Handle success redirect
app.get('/success', (_, res) => {
  res.send('<h1>Subscription successful!</h1>');
});

// Start the server
const PORT = 4000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});