IOPAY→Payment buttons
Payment buttons

Direct payment, right 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

Documentation —

One click to the checkout.

The customer goes on to the payment without losing the context of the page.

Page Button Checkout Confirmation of the
Conversion with fewer steps

A little button.
A full trip.

The button connects campaign pages, institutional websites, product pages and one-time offers to a transparent checkout. The interface can reflect the visual identity of the transaction and the payment confirmation remains connected to the IOPAY technical flow.

01

Payment in the right context.

Take the customer of the content or offer directly to the charge without creating a complete store for each campaign.

02

Customized checkout.

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

03

Pix, card and boleto.

Enable the payment methods enabled for the operation on the same checkout day.

04

Events for your operation.

Use webhooks to update an order, CRM, ERP, automation or any system after changes in status.

From intention to payment

Less of a way between wanting and paying.

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

campaignsCTA → checkoutTurn a business call into a direct payment trip.
markColours + logoCustomize the experience to maintain visual continuity during the purchase.
integrationHTML + JavaScriptThe button is rendered from a simple form and the transparent checkout script.
operationsWebhooksUse events to confirm and sync the actual status of payment on your systems.
Integration

An HTML form and the checkout is connected.

The following structure follows the model documented by IOPAY for the payment button. The credential values and the integration identifier shall be replaced by 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 it's still integrated into 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.Report transparent integration, reference to the request, value and other data you wish to pre-fill.
03
Customize the experience.Colors can be set in the form itself; the logo is set up in the Online Payments area of the account.
04
Confirm by webhook.The return URL guides the navigation of the client. Confirmation of payment shall be made by events sent via webhook.
Open up the full documentation —
Where to use

Put the payment at the point of highest intent.

The same mechanism can support very different business journeys provided there is a page capable of loading the form and the JavaScript of the checkout.

01

Landing pages.

Campaigns, launches, webinars, subscriptions, pre-sales and performance offers.

02

Product pages.

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

03

Campaigns and media.

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

Payment buttons IOPAY

A small integration to open up a new conversion route.

Open your account, enable the product, and add the charge directly to the pages your customers are already on.

Open your account ↗Speaking to a Specialist