#Playground

Experiment with checkout customization options in real-time. Use the interactive configurator to adjust colors, styles, and options, and see how your checkout will look before integrating it.

#Interactive Configurator

Modify the values in the left panel and click "Update Checkout" to see the changes reflected in the preview.

import { BloqueCheckout } from '@bloque/payments-react';

function CheckoutPage({ checkoutId }: { checkoutId: string }) {
  return (
    <BloqueCheckout
      checkoutId={checkoutId}
      lang="en"
      appearance={{
        primaryColor: '#4f46e5',
        borderRadius: '8px',
      }}
      onSuccess={(data) => {
        console.log('Payment successful!', data.payment_id);
      }}
      onError={(error) => {
        console.error('Payment error:', error);
      }}
    />
  );
}

#Available Options

#Amount and Currency

Configure the amount to charge and the currency. Available currencies are:

• USD - US Dollar
• COP - Colombian Peso

#Language

The checkout supports multiple languages:

• Spanish - Spanish interface
• English - English interface

#Visual Customization

#Form Options

#Integration in Your Project

Once you've found the ideal configuration, you can apply it in your React component:

import { BloqueCheckout } from '@bloque/payments-react';

function CheckoutPage({ checkoutId }: { checkoutId: string }) {
  return (
    <BloqueCheckout
      checkoutId={checkoutId}
      appearance={{
        primaryColor: '#4f46e5',  // Your chosen color
        borderRadius: '8px',      // Your chosen border radius
      }}
      onSuccess={(data) => {
        console.log('Payment successful!', data.payment_id);
      }}
      onError={(error) => {
        console.error('Payment error:', error);
      }}
    />
  );
}

#Checkout Events

The checkout emits events that you can capture:

In the playground, these events are shown in the "Payment Result" panel below the configurator.

#Next Steps

• Basic Setup - Learn how to integrate the component in your application
• Customization - Advanced customization options