Credit card checkout example

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" "jane\@example com", "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 import requests base url = "https //extapi demo jetpay baselinepayments com" api token = "\<your api token>" headers = { "authorization" f"bearer {api token}", "content type" "application/json" } \# \# 1 create contact \# contact response = requests put( f"{base url}/contact", headers=headers, json={ "email" "jane\@example com", "name" "jane doe", "tags" \[], "language" "en" } ) contact id = contact response json()\["identifier"] \# \# 2 create debit \# debit response = requests put( f"{base url}/debit", headers=headers, json={ "amount" 10000, "statement" "test statement", "note" "test note", "to bank account" "platform bank abc", "contact id" contact id, "preauthorize" false } ) debit id = debit response json()\["identifier"] \# \# 3 get hosted credit card payment url \# payment url response = requests post( f"{base url}/transaction/{debit id}/pay debit/url", headers=headers, json={ "allow credit card tokenization" false } ) payment url = payment url response json()\["url"] print("render this url in an iframe on your frontend ") print(payment url) \# \# important \# \# your frontend must render the payment url in an iframe \# the customer enters their card details securely in that hosted component \# the debit is paid immediately upon successful authorization \# \# there is no separate /pay debit call for credit cards \# implement webhooks to receive final transaction status updates const base url = "https //extapi demo jetpay baselinepayments com"; const api token = "\<your api token>"; const headers = { "authorization" `bearer ${api token}`, "content type" "application/json" }; async function runcreditcardflow() { // // 1 create contact // const contactres = await fetch(`${base url}/contact`, { method "put", headers, body json stringify({ email "jane\@example com", name "jane doe", tags \[], language "en" }) }); const contactdata = await contactres json(); const contactid = contactdata identifier; // // 2 create debit // const debitres = await fetch(`${base url}/debit`, { method "put", headers, body json stringify({ amount 10000, statement "test statement", note "test note", to bank account "platform bank abc", contact id contactid, preauthorize false }) }); const debitdata = await debitres json(); const debitid = debitdata identifier; // // 3 get hosted credit card payment url // const urlres = await fetch( `${base url}/transaction/${debitid}/pay debit/url`, { method "post", headers, body json stringify({ allow credit card tokenization false }) } ); const urldata = await urlres json(); const paymenturl = urldata url; console log("render this url in an iframe on your frontend "); console log(paymenturl); // // important // // your frontend must render the paymenturl in an iframe // the customer enters their card details securely in that hosted component // the debit is paid immediately upon successful authorization // // there is no separate /pay debit call for credit cards // implement webhooks to receive final transaction status updates } runcreditcardflow();