Using Insert Checkout Form for remote checkout

eCart ships with the Insert Checkout Form feature. This feature provides a simple interface for configuring a checkout form specific to your needs.

Once you have configured your form, it is inserted into the page, and can then be further customized using Dreamweaver's WYSIWYG design capabilities.

This feature provides checkout configurations for 6 merchant providers, and enables you to create and retain custom configurations as well.

To access Insert Checkout Form:

The Insert Checkout Form feature is accessible in the following locations in Dreamweaver:
  • eCart Insert panel/toolbar
  • Insert > WebAssist > eCart > Insert Checkout Form

To configure and insert a checkout form:

  1. In Design View, place your cursor in the location that the checkout form is to be inserted.
  2. In the Insert panel, click the Insert Checkout Form icon.

    The eCart Insert Checkout Form dialog opens.
  3. Select the eCart Object specific to this shopping cart checkout.
  4. Select Remote checkout for the Form type.
  5. From the payment gateway list, select one of the available checkout form configurations, or select Custom > New to create a new one. Custom configurations can also be saved from modifications made to provided configurations.
  6. Click the Edit button.

    The Configure Checkout Form dialog opens.

    The figure above shows the PayPal With Line Items configuration.

    The Form action: field at the bottom configures the action attribute of the form and establishes the http:// location that the form should POST the information to.

    Within the display window are the variables that need to be passed to the merchant gateway to complete the transaction. Each variable is passed through the form POST using form elements specific to each. Each has four parameters that require configuration:
    • Label: specifies a visible text label associated to the form element submitted to the gateway. If this form element is visible to the customer and configured by their entry or selection, this label is inserted in the form to the left of the form element to identify it within the form.
    • Name: specifies the name of the variable being passed to the gateway. This applies to the name attribute of the form element that corresponds to the variable, and identifies it within the form POST.
    • Default: provides the default value of a form field for a given variable. The value can be defined statically for unchanging information (e.g. account id), but can also use server-side code to dynamically retrieve information (e.g. cart total)
    • Display as: selects the type of form element inserted in the checkout form for a given variable. Options are hidden fields, text fields, or select lists. Keep in mind that select lists allow you to select from multiple values accepted for a variable, but the individual options are not configured in this interface. You will need to update the list directly in Design View with any necessary options.
  7. To add a variable to the configuration, enter the necessary parameters for a variable within the form as described above, and click the Add (+) button. the variable will be updated within the display pane.
  8. To remove a variable, select it within the display panel and click the Delete button.
  9. To update an existing variable, select it within the display pane. ITs configuration populates the parameters at the top of the interface. Make any necessary changes and click the display pane to update them.
  10. Use the methods outlined in steps 5-7 to configure your checkout form to your needs. You should note that at a minimum, you will need to update the variable specific to your merchant account id to be sure that you identify your account to the merchant gateway.
  11. Once you have completed configuration, click OK. You are prompted to save the customized configuration.
  12. Enter a name for the configuration and click OK. The new configuration is now available to insert as a checkout form on your page.
  13. Select the configuration to be inserted on the page, the cart name specific to the eCart object for your shopping cart implementation, and click OK.

    The checkout form is inserted on the page.

    Note: You cannot re-inspect a checkout form once it has been inserted, but can easily update variables and form elements to your needs by updating the form directly in Dreamweaver's WYSIWYG.