GuideReference
  • GETTING STARTED

    • Go live checklist

    • Integrating 101

      • API Keys

      • Collecting payments

        • Hosted checkout form

        • Embedded checkout form

        • Setup payment method and checkout later

        • One-off invoices

      • Customer billing management

        • Hosted billing portal

        • Programmatically manage customer profiles

      • Webhooks

    • Migration

      • PGP Encryption

      • Migrating from Stripe

      • Migrating from HubSpot

    • Settings

  • PAYMENT ORCHESTRATION

    • Payment service providers

      • Stripe

      • Airwallex

      • Authorize.net

      • Adyen

      • Pockyt

      • Loop

      • Checkout.com

      • Cybersource

      • PayPal

      • NMI

    • Payment routing

  • PRODUCTS & PRICES

    • Overview

    • Pricing models

      • Standard

      • Package

      • Volume

      • Graduated

    • Metered billing

    • Add-ons

    • Product families

    • Examples

  • SUBSCRIPTION MANAGEMENT

    • Create subscription

    • Update subscription

      • Pause subscription

    • Payment links

  • ANALYTICS & REPORTING

    • MRR

    • Retention

    • Churn

    • Committed MRR

  • OPENPAY.JS

    • Installation

    • Guide (.js)

      • Create subscriptions via checkout

      • Set up payment method

      • Setup payment method and create subscriptions

  • OPENPAY REACT

    • Installation

    • Guide (React)

      • Create subscriptions via checkout

      • Set up payment method

      • Setup payment method and create subscriptions

    • Examples

      • Quick start (unstyled)

      • Separate elements with styled containers

      • CardElement with styled container

Examples

You can find our example repository here.

Quick start (unstyled)

Here's how a basic checkout form can be implemented using OpenPay Elements.

Separate elements with styled containers

The following example uses TailwindCSS to style containers wrapping OpenPay Elements.

CardElement with styled container

The following example uses TailwindCSS to style containers wrapping OpenPay Elements.

On This Page

  • Examples

OpenPay is a done-for-you growth platform that offers subscription management, analytics, and optimization, all in one place.

For help, questions or feedback don't hesitate to email our support.


Features Pricing
Privacy Policy Terms of Service