Payline.js — Quick Start Demo

1

Add Payline.js to your page

Add this single script tag before your closing </head> tag.

HTML

2

Add the checkout form

Paste this HTML where you want the payment form to appear.

HTML

<form id="payment-form">
  <div id="card-number"></div>
  <div id="card-expiry"></div>
  <div id="card-cvc"></div>
  <button type="submit">Pay</button>
</form>

3

Initialize and handle payment

Add this JavaScript. Replace pk_test_... with your public key from the dashboard.

JavaScript

const payline = Payline('pk_test_your_key');

const fields = payline.secureFields({
  locale: 'en',
});

fields.mount('cardNumber', '#card-number');
fields.mount('cardExpiry', '#card-expiry');
fields.mount('cardCvc',    '#card-cvc');

document.getElementById('payment-form')
  .addEventListener('submit', async (e) => {
    e.preventDefault();
    const { token, error } = await fields.tokenize();
    if (error) return alert(error.message);

    // Send token to your server
    await fetch('/api/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token: token.id }),
    });
  });

+

Server-side: process the payment

On your server, use the token to create a payment. Pick your language:

          server.js
          
        
import { Payline } from '@payline/node';

const payline = new Payline('sk_test_your_secret_key');

app.post('/api/pay', async (req, res) => {
  const session = await payline.checkoutSessions.create({
    amount: 29900,          // 299.00 SEK (in minor units)
    currency: 'SEK',
    payment_token: req.body.token,
    success_url: 'https://yoursite.com/success',
    push_url: 'https://yoursite.com/api/webhooks',
  });

  res.json({ payment_id: session.payment_id });
});

          server.py
          
        
import payline

payline.api_key = "sk_test_your_secret_key"

@app.post("/api/pay")
def create_payment():
    session = payline.CheckoutSession.create(
        amount=29900,          # 299.00 SEK (in minor units)
        currency="SEK",
        payment_token=request.json["token"],
        success_url="https://yoursite.com/success",
        push_url="https://yoursite.com/api/webhooks",
    )
    return {"payment_id": session.payment_id}

Terminal

curl -X POST https://api.payline.se/v1/checkout-sessions \
  -H "Authorization: Bearer sk_test_your_secret_key" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 29900,
    "currency": "SEK",
    "payment_token": "pay_tok_xxx",
    "success_url": "https://yoursite.com/success",
    "push_url": "https://yoursite.com/api/webhooks"
  }'

↓

Test cards — click "Fill" to try instantly

Use these test cards in the live demo below. Click Fill to auto-fill all fields.

Test Card Numbers

Test Mode Only

VISA

4242 4242 4242 4242

Exp: 12/28 · CVC: 123

Success

MC

5555 5555 5555 4444

Exp: 12/28 · CVC: 567

Success

AMEX

3782 822463 10005

Exp: 12/28 · CVC: 1234

Success

VISA

4000 0000 0000 0002

Exp: 12/28 · CVC: 123

Decline

VISA

4000 0000 0000 3220

Exp: 12/28 · CVC: 123

3D Secure

▶

Live Demo — Try it now

This is a working simulation of Payline.js Secure Fields. Fill a test card above or type directly.

Checkout

Live

Demo Store

299.00 SEK

Payment Successful

Token:

Payment Declined

Card was declined.

Event Log

Waiting for Payline.js to initialize...

Quick Start Guide

Test Card Numbers

Checkout

Payment Successful

Payment Declined

Event Log