CryptoPay
Documentation
Payments

Custom Checkout

Build a fully customized checkout experience that seamlessly integrates with your website design.

Last updated: June 22, 2023

Overview

CryptoPay Custom Checkout provides a complete, customizable checkout solution that integrates directly into your website. Unlike payment buttons or checkout links, Custom Checkout gives you full control over the payment experience while maintaining security and ease of use.

Seamless Experience

Keep customers on your website throughout the payment process.

  • • No redirects to external pages
  • • Consistent brand experience
  • • Higher conversion rates

Complete Customization

Tailor the checkout UI to match your website design.

  • • Custom styling options
  • • Configurable UI components
  • • Flexible layout options

Developer-Friendly

Built with developers in mind for easy integration.

  • • Comprehensive SDK
  • • React, Vue, and Angular support
  • • Detailed documentation

Secure By Design

Security built in at every layer.

  • • PCI compliant infrastructure
  • • No cryptocurrency data stored on your server
  • • End-to-end encryption

Integration Options

CryptoPay Custom Checkout offers two main integration approaches to suit different development needs:

Drop-in Checkout

The fastest way to integrate CryptoPay's Custom Checkout

This option provides a pre-built checkout UI that you can customize with your colors and branding.

Use When:

  • You need a quick integration with minimal development effort
  • Customizing colors and text is sufficient for your needs
  • You prefer a solution that works out of the box

Custom UI Integration

Complete control over the checkout experience

For developers who want complete control over the checkout experience using CryptoPay's SDK components.

Use When:

  • You need complete control over the checkout UI
  • Your checkout flow requires custom steps or validation
  • You want to build a native-feeling experience within your application

Drop-in Checkout Example

Here's how to quickly integrate CryptoPay's Drop-in Checkout:

JavaScript Integration

JavaScript
// 1. Include CryptoPay.js on your page
<script src="https://js.CryptoPay.io/v1/CryptoPay.js"></script>

// 2. Configure your checkout
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const CryptoPay = new CryptoPay('pk_test_YourPublicKey');
    
    document.getElementById('pay-button').addEventListener('click', async () => {
      try {
        // Create a checkout session
        const session = await CryptoPay.createCheckoutSession({
          amount: 99.99,
          currency: 'USD',
          product_name: 'Premium Membership',
          customer_email: 'customer@example.com',
          success_url: window.location.origin + '/thank-you',
          cancel_url: window.location.origin + '/cart'
        });
        
        // Launch the checkout modal
        CryptoPay.showCheckout(session.id, {
          theme: {
            colorPrimary: '#4F46E5',
            colorBackground: '#FFFFFF',
            colorText: '#1F2937',
            borderRadius: '8px',
            fontFamily: 'Inter, sans-serif'
          }
        });
      } catch (error) {
        console.error('Error creating checkout session:', error);
      }
    });
  });
</script>

// 3. Add a button to trigger checkout
<button id="pay-button" class="payment-button">Pay with Crypto</button>

React Custom UI Integration

For complete control over the checkout experience using React:

React SDK Example

React
// First, install the CryptoPay React SDK
// npm install @CryptoPay/react

import React, { useState } from 'react';
import { 
  CryptoPayProvider, 
  useCryptoPay,
  CryptoPaymentForm,
  CryptoMethodSelector,
  CheckoutSummary,
  PaymentStatus
} from '@CryptoPay/react';

// Your checkout component
function CustomCheckout({ amount, currency, productName }) {
  const [paymentStatus, setPaymentStatus] = useState('idle');
  const [selectedMethod, setSelectedMethod] = useState(null);
  const { createPayment, getPaymentStatus } = useCryptoPay();
  
  const handleSubmit = async () => {
    try {
      setPaymentStatus('processing');
      
      // Create a payment with CryptoPay
      const payment = await createPayment({
        amount,
        currency,
        product_name: productName,
        payment_method: selectedMethod,
        metadata: {
          customer_id: 'cust_123456', // Your internal customer ID
          order_id: 'ord_789012'      // Your internal order ID
        }
      });
      
      // Poll for payment status
      const statusInterval = setInterval(async () => {
        const status = await getPaymentStatus(payment.id);
        
        if (status === 'completed') {
          setPaymentStatus('success');
          clearInterval(statusInterval);
        } else if (status === 'failed') {
          setPaymentStatus('error');
          clearInterval(statusInterval);
        }
      }, 5000);
      
    } catch (error) {
      console.error('Payment error:', error);
      setPaymentStatus('error');
    }
  };
  
  return (
    <div className="checkout-container">
      <CheckoutSummary 
        amount={amount} 
        currency={currency} 
        productName={productName} 
      />
      
      <CryptoMethodSelector 
        onChange={method => setSelectedMethod(method)} 
        selectedMethod={selectedMethod}
      />
      
      {selectedMethod && (
        <CryptoPaymentForm 
          method={selectedMethod} 
          onSubmit={handleSubmit}
        />
      )}
      
      {paymentStatus !== 'idle' && (
        <PaymentStatus status={paymentStatus} />
      )}
    </div>
  );
}

// Wrap your app with the provider
function App() {
  return (
    <CryptoPayProvider apiKey="pk_test_YourPublicKey">
      <CustomCheckout 
        amount={99.99}
        currency="USD"
        productName="Premium Membership"
      />
    </CryptoPayProvider>
  );
}