Embedded Forms with Payments

Prev Next

This article covers how to embed a form with a payment workflow event into your website. To embed a form with a payment you will need to create a payment receipt page on your website that your users will be redirected to after completing a payment.

Instructions

  1. Use the website embed script to embed your form onto your website
    Code snippet for embedding a form with the copy icon highlighted.

    Important Note:

    If you are using an optional URL (such as submissionRedirectURL), you will need to remove the // before those lines in the code in order for it to work in your embed. The following image shows what it should look like with the // removed.
    Highlighted URLs for pet license renewal submission and cancellation in the embed.

  2. You will now need to create a separate payment receipt page on your website. This is the page that your users will be redirected to after completing a payment.

  3. On the Summary tab of the form, click the embed button under the Form Link Embed this form on your webpage icon highlighted next to the form link.

  4. Scroll down and copy the Payment Receipt Embed ScriptCode snippet for embedding a payment receipt script on a website with the copy icon highlighted.

    Note:

    The form must have a payment workflow event for the receipt page script to display.

  5. Add the script to the Payment Receipt page on your website Payment receipt page with script elements for OneBlink integration and user redirection.

  6. Add URLs between the " of the doneRedirectUrl and cancelRedirectURL to direct users to specific pages after they click Done on the receipt or cancel the transaction Payment receipt code snippet with highlighted redirect URLs for user navigation.

  7. Go back to the page with your embedded form and ensure the paymentReceiptUrl in your website script is pointing to your new receipt page
    Code snippet for pet license renewal with highlighted payment receipt URL.

    Note:

    Remove the // before the paymentReceiptURL line of code.

  8. Users will now be able to see the receipt content displayed on your receipt page after they complete a transaction Payment receipt showing transaction details and a warning about browser navigation.