ZyPayDocs
Web Integration

Integrate Payments into Your Web Application

Add payment processing to your web application with our JavaScript SDK, payment forms, and checkout components. Get started in minutes.

Choose Your Integration Method

JavaScript SDK

Full control and customization

Use our JavaScript SDK for complete control over the payment flow and UI

Get Started

Payment Forms

Pre-built, secure forms

Use our pre-built payment forms for quick integration with minimal code

Get Started

Checkout

Hosted checkout page

Redirect customers to our hosted checkout page for a seamless experience

Get Started

JavaScript SDK

Installation

Install the ZyPay JavaScript SDK via npm or include via CDN

npm install @zypay/sdk

Basic Usage

Initialize the SDK and create your first payment

Initialize SDK
import { ZyPay } from '@zypay/sdk';

// Initialize the SDK
const zypay = new ZyPay({
  publicKey: 'pk_test_1234567890abcdef',
  environment: 'sandbox' // or 'production'
});

// Create a payment
const payment = await zypay.payments.create({
  amount: {
    value: 1000, // $10.00 in cents
    currency: 'USD'
  },
  customer: {
    email: 'customer@example.com',
    firstName: 'John',
    lastName: 'Doe'
  },
  description: 'Test payment'
});

console.log('Payment created:', payment.id);

Payment Form Integration

Create a secure payment form with our SDK

HTML Form
<form id="payment-form">
  <div class="form-group">
    <label for="card-number">Card Number</label>
    <div id="card-number-element"></div>
  </div>
  
  <div class="form-group">
    <label for="card-expiry">Expiry Date</label>
    <div id="card-expiry-element"></div>
  </div>
  
  <div class="form-group">
    <label for="card-cvc">CVC</label>
    <div id="card-cvc-element"></div>
  </div>
  
  <button type="submit">Pay $10.00</button>
</form>
JavaScript Integration
// Create payment form elements
const cardNumberElement = zypay.elements.create('cardNumber');
const cardExpiryElement = zypay.elements.create('cardExpiry');
const cardCvcElement = zypay.elements.create('cardCvc');

// Mount elements to the DOM
cardNumberElement.mount('#card-number-element');
cardExpiryElement.mount('#card-expiry-element');
cardCvcElement.mount('#card-cvc-element');

// Handle form submission
document.getElementById('payment-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  
  try {
    // Create payment method
    const { paymentMethod, error } = await zypay.createPaymentMethod({
      type: 'card',
      card: {
        number: cardNumberElement,
        expiry: cardExpiryElement,
        cvc: cardCvcElement
      }
    });
    
    if (error) {
      console.error('Error creating payment method:', error);
      return;
    }
    
    // Create payment
    const payment = await zypay.payments.create({
      amount: { value: 1000, currency: 'USD' },
      paymentMethod: paymentMethod.id,
      customer: {
        email: 'customer@example.com'
      }
    });
    
    console.log('Payment successful:', payment.id);
  } catch (error) {
    console.error('Payment failed:', error);
  }
});

Payment Forms

Pre-built Payment Forms

Use our pre-built, secure payment forms for quick integration

Embed Payment Form
<!-- Include ZyPay form script -->
<script src="https://cdn.zypay.com/forms/v2/zypay-forms.min.js"></script>

<!-- Create payment form -->
<div id="zypay-payment-form"></div>

<script>
  ZyPayForms.create({
    container: '#zypay-payment-form',
    publicKey: 'pk_test_1234567890abcdef',
    amount: {
      value: 1000,
      currency: 'USD'
    },
    onSuccess: function(payment) {
      console.log('Payment successful:', payment.id);
      // Redirect to success page
      window.location.href = '/success?payment=' + payment.id;
    },
    onError: function(error) {
      console.error('Payment failed:', error);
      // Show error message
      alert('Payment failed: ' + error.message);
    }
  });
</script>

Hosted Checkout

Redirect to Checkout

Redirect customers to our hosted checkout page

Create Checkout Session
// Create checkout session
const checkoutSession = await zypay.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [
    {
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-Shirt',
          description: 'Comfortable cotton t-shirt'
        },
        unit_amount: 2000, // $20.00
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  success_url: 'https://your-website.com/success',
  cancel_url: 'https://your-website.com/cancel',
});

// Redirect to checkout
window.location.href = checkoutSession.url;

Security Features

PCI Compliance

Our payment forms are PCI DSS Level 1 compliant, so you don't need to handle sensitive card data

  • Card data never touches your servers
  • Automatic fraud detection
  • 3D Secure authentication

Real-time Validation

Get instant feedback on card validity and payment status

  • Card number validation
  • Expiry date checking
  • CVC verification

Best Practices

Do

  • Always use HTTPS in production
  • Validate amounts on the server
  • Handle errors gracefully
  • Test with different card types
  • Implement proper loading states

Don't

  • Store card data on your servers
  • Trust client-side validation only
  • Ignore webhook events
  • Use test keys in production
  • Skip error handling

Integration Examples

E-commerce Checkout

Complete e-commerce checkout flow with cart and payment

E-commerce Integration
// E-commerce checkout example
const cart = [
  { id: 'item1', name: 'T-Shirt', price: 2000, quantity: 2 },
  { id: 'item2', name: 'Jeans', price: 5000, quantity: 1 }
];

const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

const payment = await zypay.payments.create({
  amount: { value: total, currency: 'USD' },
  customer: {
    email: customerEmail,
    firstName: customerFirstName,
    lastName: customerLastName
  },
  metadata: {
    cart: JSON.stringify(cart),
    orderId: generateOrderId()
  }
});

Ready to Integrate Payments?

Start accepting payments on your website today. Choose the integration method that best fits your needs and get started in minutes.

Get StartedView Examples