Checkout Form

Import of the JavaScript Library

You can find the functionalities of the Checkout form in a JavaScript library, which must be imported into the client’s website directly from a public URL of our platform.

The call to this library must include (as a parameter) the public key of the commerce account (PublicAccountKey) which you will use for calls to the API REST from this library.

<script src="{api_environment}/v1/Scripts/PWCheckout.js?key={PublicAccountKey}" type="text/javascript"></script>

Methods

SetProperties

This method establishes the visual properties (texts and images) used in the Checkout window.

All properties are optional, except for the form_id property. So, the call to the SetProperties method is mandatory at least to establish this property, and you must invoke it before the opening of the Checkout form.

Example:

<script type="text/javascript">
PWCheckout.SetProperties(
{
  "name": "Mi tienda",
  "email": "cliente@gmail.com",
  "image": "http://mitienda.com/images/logocheckout.png",
  "button_label": "Pagar #monto#",
  "description": "Checkout de Mi tienda",
  "currency": "USD",
  "amount": "1843.21",
  "lang": "ES",
  "form_id": "commerce_form",
  "checkout_card": "1",
  "autoSubmit": `true`,
  "email_edit": `false`,
  "country_code" : "UY"
});
</script>

SetStyle

This method sets the colors in the Checkout window. All the properties are optional, so the call to the SetStyle method is optional. The Checkout form will use default colors if you don’t call this method.

Invoke the method before opening the Checkout form to set those properties.

Example:

<script type="text/javascript">
PWCheckout.SetStyle(
{
  "backgroundColor": "f2f2f2",
  "buttonColor": "555555",
  "buttonHoverColor": "777777",
  "buttonTextColor": "ffffff",
  "buttonTextHoverColor": "ffffff",
  "inputBackgroundColor": "ffffff",
  "inputTextColor": "767676",
  "inputErrorColor": "ff0000",
  "inputAddonBackgroundColor": "ffffff",
  "labelColor": "494949"
}
);
</script>

SetStyleForVbV

This method describes configurable parameters when the Verified By Visa page is returned.

All the properties are optional, so the call to the SetStyleForVbV method is optional. If you don’t invoke this method, the page appears full width on the screen.

To set these properties, invoke the method before opening the Checkout form.

Example:

<script type="text/javascript">
PWCheckout.SetStyle(
  {
    "width": "1600px",
    "height": "800px",
    "margin": "auto"
  }
);
</script>

Bind

Use this method to subscribe to the events the PWCheckout library can trigger.

To receive the events generated by this form, invoke the method before opening the Checkout form window.

Example:

<script type="text/javascript">
function WindowIsOpen(){
  console.log("Checkout Window is Open");
}
PWCheckout.Bind("opened", WindowIsOpen);
</script>

Events

The PWCheckout library exposes the following javascript events to which you can subscribe using the Bind method.

Unbind

This method removes the subscription to an event previously made by the Bind method.

Example:

<script type="text/javascript">
PWCheckout.Unbind("opened", WindowIsOpen);
</script>

Invoking the form

The Checkout Form invocation web page must include a hidden input field named PWToken. The JavaScript library will set the field’s value after obtaining the Token.

Create the field in the following way:

    <input type="hidden" name="PWToken" id="PWToken" />

To start the payment process, you must link the page element that will make the call to the Payment Card Capture Form. This element can be a button, image or any active element you want to link.

You must call the AddActionButton method of the PWCheckout library as follows:

<script type="text/javascript">
  PWCheckout.AddActionButton("buttonId");
</script>

The parameter buttonId refers to the identifier of the element that triggers the payment process.

Multiple elements can be associated in the same call, identifying each one by its ID and separating each identifier with a comma.

<script type="text/javascript">
  PWCheckout.AddActionButton("buttonId1", "buttonId2", "buttonId3");
</script>

After performing this step, the payment process is invoked when the customer presses the linked element.

Once this invocation finishes, the JavaScript library manages the process, showing the user the form where the payment card information is requested.

When the customer enters the data of their card, our servers tokenize the information and send the Token to the PWCheckout library

The value of the generated Token is automatically inserted in the hidden field PWToken, and finally, the JavaScript library PWCheckout performs the following actions:

1. Trigger the tokenCreated Event.
2. Submit the form if the property autoSubmit is true.

You need to process payment form data, including the value in the PWToken field, and send the relevant information described in the API’s Purchase section.

Invoking the form with validation filters

If you need to validate the entry of a particular card, either by the brand or the issuing bank, you must proceed to the personalized opening of the Card Capture Form. Use an explicit method for validating data.

The method to be used is the OpenIframeWithPaymentMediaOptions, which receives the following parameters:

• PaymentMediaId: Identifier of the payment method in the gateway (see table Payment method types).
• BankId: Bank identifier on the gateway (see table Issuer Bank).
• PaymentMediaType: Payment method type identifier (see table Payment methods).

Invocation example of OpenIframeWithPaymentMediaOptions:

<script type="text/javascript">
  PWCheckout.Iframe.OpenIframeWithPaymentMediaOptions(paymentMediaId, bankId, paymentMediaType);
</script>

Last modified November 18, 2024

© Bamboo | All rights reserved 2024