Embedded checkout

Allow your application origin#

Add your site’s exact origin in the store settings before embedding. HTTPS is required outside test loopback development.

Create the session on your server. Pass only its public payment.payToken to the browser.

The iframe stays on Forwend’s origin. Browser packages check message origin and source, but messages remain display hints.

Use the React components#

Checkout includes the order summary. PaymentElement shows only the payment panel, for use beside your own summary. PayButton opens the hosted page.

import { Checkout, PaymentElement, PayButton } from "@forwend/react";

export function OrderPayment({ payToken }: { payToken: string }) {
  return <Checkout payToken={payToken} />;
}

// Use PaymentElement beside your own order summary instead.
export function PaymentPanel({ payToken }: { payToken: string }) {
  return <PaymentElement payToken={payToken} />;
}

// Or link to the hosted page, without an embedded checkout.
export function HostedPayment({ payToken }: { payToken: string }) {
  return <PayButton payToken={payToken}>Pay with Forwend</PayButton>;
}

Keep fulfillment on your server#

An onStatus callback can refresh your interface. It must never mark an order paid by itself.

Verify a signed invoice.paid event and read the session again through the API. Validate its store, order reference, mode and amount before fulfilling once.