Embeds #

The PayMeNow embed is a single script that turns data- attributes on your page into payment buttons, add-to-cart buttons and a cart. Payment details are entered in a PayMeNow modal backed by Stripe Elements; card data never touches your page.

<script src="https://paymenow.dev/embed/paymenow.js"></script>

Load the script once, after the embed elements. It reads the elements present when it loads.

Use the dashboard Test tab to try every embed type below against your own products.

Embed types #

Use id="paymenow-form" for a single button, or class="paymenow-form" for several buttons on one page.

Product #

Recommended. The buyer cannot change the price, because PayMeNow looks up the product amount and currency at checkout.

<div class="paymenow-form"
  data-api-key="pmn_live_..."
  data-product-id="550e8400-e29b-41d4-a716-446655440000">
</div>

Create products in the dashboard or with the Merchant API.

Fixed amount #

Charges the amount on the page. Use it for simple pages without products; anyone editing the page can change the amount.

<div class="paymenow-form"
  data-api-key="pmn_live_..."
  data-amount="2500"
  data-currency="usd"
  data-description="Consultation">
</div>

Tip jar #

The modal asks the buyer for an amount before showing the card form. The minimum is 0.50.

<div class="paymenow-form"
  data-api-key="pmn_live_..."
  data-mode="tipjar"
  data-currency="usd"
  data-default-amount="500"
  data-description="Support the team">
</div>

Backend-driven #

Your server creates the payment with POST /api/payments/intent (header X-API-Key) and renders the returned client_secret and stripe_account. No API key is needed on the page.

<div class="paymenow-form"
  data-client-secret="pi_..._secret_..."
  data-stripe-account="acct_...">
</div>

Omit data-stripe-account when the response does not include stripe_account.

Cart #

Add-to-cart buttons store items in the browser; the cart icon shows the count and opens a dropdown with quantities, removal and checkout. Prices are resolved server-side from your products at checkout.

<div id="paymenow-cart" data-api-key="pmn_live_..." data-email="required"></div>

<div class="paymenow-add"
  data-api-key="pmn_live_..."
  data-product-id="550e8400-e29b-41d4-a716-446655440000"
  data-name="T-shirt"
  data-amount="2500"
  data-currency="usd">
</div>

• data-name, data-amount and data-currency on .paymenow-add are display values for the cart; the charge uses the product's stored price.
• A cart holds one currency. Adding an item in another currency is refused.
• Place the cart where a shop header would have it. The dropdown opens below the icon and closes when the buyer clicks elsewhere on the page.
• The cart is stored per API key in the browser's localStorage and cleared after a successful payment.
• After you edit a product, carts already holding it show the old price until the item is added again; checkout always charges the current price.

Attributes #

Payment buttons #

Applies to #paymenow-form and .paymenow-form.

Default button labels: Pay and the amount for a fixed amount, Leave a tip for a tip jar, and the description or Pay otherwise.

Add-to-cart buttons #

Applies to .paymenow-add.

Cart #

Applies to #paymenow-cart. Only one cart per page.

Label placeholders #

data-label and data-pay-label accept:

On add-to-cart buttons and the cart they use the item or cart total. On payment buttons they use data-amount or the tip jar default; a product button does not know its price in the browser, so avoid placeholders in product labels.

Delivery address #

Add data-address to a payment button or the cart to collect where to ship the order.

<div class="paymenow-form"
  data-api-key="pmn_live_..."
  data-product-id="550e8400-e29b-41d4-a716-446655440000"
  data-address="required"
  data-address-countries="GB,IE,FR">
</div>

• The payment modal shows name, address lines, city, postal code, region and a country list above the card field.
• Name, address line 1, city, postal code and country are required. Address line 2 and region are optional.
• With optional, the buyer can leave every field empty. Once they start filling it in, the required fields must be completed.
• data-address-countries limits the country list. With a single country it is preselected. An unknown code is a configuration error: the embed logs it to the browser console and does not render.

The address is attached to the Stripe payment and appears in Payments → Payment history, your sale notification email, the buyer's receipt, and the shipping field of the API and webhook payloads.

After payment #

On success the card form is replaced by Payment accepted and the modal closes after 5 seconds, returning the buyer to your page. Close now closes it immediately. A cart is emptied as soon as the payment succeeds.

Declined cards and other errors stay on screen with the card form so the buyer can correct the details and select Retry. The modal never closes on its own after an error.

Styling #

Button background and text color are set with the attributes above. The payment modal is PayMeNow's and keeps its own styling apart from the pay button background.

Buttons are rendered in your page, so your stylesheet can also target .pmn-trigger (payment and add-to-cart buttons) and .pmn-cart-icon. The embed's stylesheet loads after the script runs, so use a more specific selector, for example #shop .pmn-trigger.

Cart events #

#paymenow-cart dispatches paymenow:cart-changed whenever the cart renders. event.detail.items lists the items with product_id, name, amount, currency and quantity.

document.getElementById("paymenow-cart").addEventListener("paymenow:cart-changed", (event) => {
  console.log(event.detail.items);
});