Credit card checkout example

2 min

This example shows a full credit card payment flow using hosted tokenization. It covers creating a contact, creating a debit, generating the card collection URL, and completing payment through the secure iframe.

Unlike EFT, the debit is paid as part of the card collection flow. Use this as a reference for implementing a complete card checkout experience.

Flow diagram

sequenceDiagram
    participant Backend as Platform Backend
    participant Frontend as Platform Frontend
    actor Customer
    participant Jetpay as Jetpay API

    Backend->>Jetpay: Create contact
    Jetpay-->>Backend: contact_id

    Backend->>Jetpay: Create debit
    Jetpay-->>Backend: debit_transaction_id

    Backend->>Jetpay: Request payment URL
    Jetpay-->>Backend: payment_url

    Backend-->>Frontend: payment_url

    Frontend->>Customer: Render hosted iframe
    Customer->>Jetpay: Enter card details and submit

    Jetpay-->>Backend: Webhook (payment result)

Code sample

# --------------------------------------------
# Configuration
# --------------------------------------------

BASE_URL="https://extapi.demo.jetpay.baselinepayments.com"
API_TOKEN="<YOUR_API_TOKEN>"

# --------------------------------------------
# 1. Create Contact
# --------------------------------------------

curl -X PUT "$BASE_URL/contact" \
  -H "Authorization: Bearer $API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "[email protected]",
    "name": "Jane Doe",
    "tags": [],
    "language": "en"
  }'

# → Save the returned contact_id (e.g., contact_123)


# --------------------------------------------
# 2. Create Debit
# --------------------------------------------

curl -X PUT "$BASE_URL/debit" \
  -H "Authorization: Bearer $API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 10000,
    "statement": "Test Statement",
    "note": "Test Note",
    "to_bank_account": "platform_bank_abc",
    "contact_id": "contact_123",
    "preauthorize": false
  }'

# → Save the returned debit_transaction_id (e.g., debit_456)


# --------------------------------------------
# 3. Get Hosted Credit Card Payment URL
# --------------------------------------------

# IMPORTANT:
# You must request a hosted payment URL from Jetpay.
# This URL must be rendered in an iframe on your frontend.
# The customer will enter their card details securely within that iframe.

curl -X POST "$BASE_URL/transaction/debit_456/pay-debit/url" \
  -H "Authorization: Bearer $API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "allow_credit_card_tokenization": false
  }'

# → Save the returned payment_url


# --------------------------------------------
# 4. Display Hosted Payment Page (Frontend)
# --------------------------------------------

# Your backend sends the payment_url to your frontend.
# Your frontend renders it in an iframe.
# The customer enters their credit card details.
# The debit is paid immediately upon successful authorization.
#
# There is NO separate /pay-debit call for credit cards.


# --------------------------------------------
# 5. Listen for Webhook
# --------------------------------------------

# Implement webhooks to receive confirmation of:
# - successful payment
# - failed payment
# - authorization errors
#
# The webhook event confirms the final transaction state.