IOPAY→Payment buttons
Payment buttons

Direct payment, at the point of purchase.

Add a button to your website, landing page or campaign and open the checkout without turning the page into an e-commerce store.

Documentation ↗

One click to checkout.

The customer proceeds to payment without losing the context of the page.

Page Button Checkout Confirmation
Conversion with fewer steps

One small button.
A complete journey.

The button connects campaign pages, corporate websites, product pages and one-off offers to a transparent checkout. The interface can reflect the operation's visual identity and the payment confirmation stays connected to IOPAY's technical flow.

01

Payment in the right context.

Take the customer from the content or offer straight to the charge, without building a full store for each campaign.

02

Customizable checkout.

Define primary and secondary colors and associate the company logo with the payment experience.

03

Pix, card and boleto.

Activate the payment methods enabled for the operation in a single checkout journey.

04

Events for your operation.

Use webhooks to update the order, CRM, ERP, automations or any system after status changes.

From intent to payment

Less distance between wanting and paying.

Payment buttons are especially useful when the purchase starts outside a traditional checkout: campaigns, launches, promotional pages, subscriptions, events, commercial content and journeys that need a clear charging point.

campaignsCTA → checkoutTurn a commercial call to action into a direct path to payment.
brandColors + logoCustomize the experience to keep visual continuity throughout the purchase.
integrationHTML + JavaScriptThe button is rendered from a simple form and the transparent checkout script.
operationsWebhooksUse events to confirm and synchronize the real payment state in your systems.
Integration

One HTML form and the checkout is connected.

The structure below follows the model documented by IOPAY for the payment button. The credential values and the integration identifier must be replaced with the data of your account and environment.

<!-- Botão de Pagamento IOPAY -->
<form id="_iopay_checkout"
      action="https://checkout.iopay.dev/app/pay/SEU_ID"
      method="post"
      target="_iopay_frame"
      onsubmit="return false;">

  <input type="hidden" name="integration" value="transparent">
  <input type="hidden" name="business" value="SEU_EMAIL">
  <input type="hidden" name="reference_id" value="PEDIDO_1024">
  <input type="hidden" name="amount" value="199.00">

  <!-- Personalização opcional -->
  <input type="hidden" name="io_config_primary_color" value="#111111">
  <input type="hidden" name="io_config_secondary_color" value="#6547ff">

  <button onclick="iopay()" name="payWithIO">
    Pagar agora
  </button>
</form>

<link href="https://checkout.iopay.dev/checkout/assets/css/front.checkout.transparent.iopay.css" rel="stylesheet">
<script src="https://checkout.iopay.dev/checkout/assets/js/front.checkout.transparent.iopay.min.js"></script>
How it works

From HTML to confirmed payment.

The button is simple on the page, but remains integrated with IOPAY's payments and events infrastructure.

01
Enable the operation.The account must be enabled for Payment Buttons and receive the applicable integration data.
02
Set up the form.Provide the transparent integration, order reference, amount and any other data you want to pre-fill.
03
Customize the experience.Colors can be set in the form itself; the logo is configured in the account's Online Payments area.
04
Confirm by webhook.The return URL guides the customer's navigation. Payment confirmation must be done through the events sent via webhook.
Open full documentation ↗
Where to use

Place the payment at the point of greatest intent.

The same mechanism can support very different commercial journeys, as long as there is a page able to load the checkout form and JavaScript.

01

Landing pages.

Campaigns, launches, webinars, sign-ups, pre-sales and performance offers.

02

Product pages.

Create a direct route to payment even when there is no full catalog or traditional cart.

03

Campaigns and media.

Connect ads, content, influencers and promotional pages to a specific, measurable charge.

IOPAY payment buttons

A small integration to open a new conversion route.

Open your account, enable the product and embed the charge directly into the pages where your customers already are.

Open your account ↗Talk to an expert