Get started with payment processing in minutes using this interactive browser-based demo, which uses a mock server to simulate real API requests and responses. Follow along to see how easy it can be to tokenize a payment method and process a transaction with Payabli.
This quickstart uses a mock server for educational purposes only. In your own testing and integration, you must use a PCI-compliant method to handle payment data, such as the Payabli Embedded MethodUI Component or your own secure server-side implementation.
Never handle raw payment data directly in your application. Payment card information (card numbers, CVV codes, and so on) is subject to strict PCI DSS (Payment Card Industry Data Security Standard) compliance requirements. Non-compliant handling of payment data can result in:
Now that the warnings are out of the way, let’s get started! In this quickstart, you’ll complete two main tasks:
You don’t need to download anything, set anything up, or have an API token. Just follow the steps and interact with the mock API requests directly in your browser.
Payment tokenization converts sensitive payment details into a secure, single-use token that can be safely transmitted and stored. Remember that this is a simulated tokenization for learning purposes only, and not PCI-compliant. Refer back to Before you begin for more information.
All required fields are prefilled for you, but feel free to add or change details to see how it works. When you’re ready, click Send Request to simulate tokenizing the card.
This quickstart tokenizes a credit card, but you can also tokenize bank accounts (ACH). Learn more in the Tokenization overview guide.
The mock server simulates the secure tokenization process and returns a secure token instead of storing raw card data.
Copy the value from methodReferenceId in the response to use in the next step.
Now use your token to process a payment. Grab the methodReferenceId returned in Step 1 and enter it in paymentMethod.storedMethodId, along with an amount to charge. When you’re ready, click Send Request to simulate processing the payment.
We’ve simplified the request for this demo, but for a real transaction, you can include additional details like customer info, billing address, and so on.
The mock server simulates the payment using the tokenized payment method, and returns a success response. In a real integration, you would handle the response to confirm the payment status and update your app accordingly.
Now that you’ve seen how easy it can be to tokenize a payment method and process a transaction, you’re ready to explore more advanced resources.
Use this guide to help you choose between using real-time webhooks or polling APIs