Guides

Embedded Quick Start

Get started with embedded fields.

Suggest Edits

Use the instructions below to quickly set up embedded fields for transactions. See Payments to customize and add optional features for payments with this integration method.


Prerequisites


Integrate

Follow the steps below to create a basic web page that opens a payment form when a customer clicks a 'Pay Now' button:

  1. Copy and paste the code below into a text file and save it as an HTML file:
<!doctype html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="https://app.maast.com/hosted/checkout/css/qp-checkout.css">
		</head>
		<body>
			<script src="https://app.maast.com/hosted/checkout/js/qp-checkout-sdk.js"/>
			<div>
				<button id="pay-button">Pay Now</button>
			</div>
			<div id="qp-checkout"/>
			<script>
				//You should have generated a unique checkout_url before the frame is loaded.
				qpCheckoutForm.loadFrame({
				checkout_url: "https://app.maast.com/checkout/{{transient_key}}",
				id: "qp-checkout",
				scrolling: false
				});
				// Get the button that opens the modal
				let btn = document.getElementById("pay-button");
				// When the user clicks on the button, open the modal
				btn.onclick = function () {
				console.log("Open modal");
				qpCheckoutForm.openModal();
				}
			</script>
		</body>
	</html>

  1. Send a request to the API endpoint /platform/embedded to get a transient key. See Get Transient Key in our API reference for details. You will need your sandbox API key to authenticate your request.

  2. Replace {{transient_key}} on line 15 of the sample code with the transient key returned by the API. Save the HTML file.

  3. Open the HTML file in your browser and click the 'Pay Now' button to open the embedded fields modal.

The code above includes the Maast embedded fields stylesheet, which makes it easy to customize the appearance of the payment form, and the Maast Checkout JavaScript, which facilitates the communication between your site and Maast's servers. See the embedded fields Payments guide for details about using the Checkout JavaScript to process transactions.

📘

ACH Payments

NOTE: If your account is set up to receive ACH payments, you must meet ACH consent statement and validation requirements. See ACH Conventionsfor more information.


Test and Go Live

See our Test and Go Live guide to test your embedded fields integration and to start transacting with an active production account.

📘

Change API and JavaScript

When moving to production with an embedded fields integration, don't forget to change both your API request and your JavaScript to production values.

Updated 11 months ago

What’s Next