Accept payments on your website in minutes using one of our two Checkout options:

Widget	Web Checkout
Allow your customers to complete a payment without leaving your website, by simply including a `<script>` tag within our widget de pagos. You can see an example below	Let your customers complete a payment outside of your website, by using or Checkout using a standard HTML form.

Both integration methods offer a fast and safe payments experience for your customers.

Step by step

Step 1 — Have your merchant public key.
Step 2 — Generate a unique payment reference
Step 3 — Prepare the redirection URL where the user will go to after paying
Step 4 — Take into account the required and optional parameters for a transaction
Step 5 — Choose an integration method

Use HTTPS

We strongly recommend using **HTTPS** on your website, since it will make your website feel safer for your cuastomers and you will avoing being marked as an insecure site by Google.

Step 1: Prepare your public account key

For any Wompi integration you need to have a merchant public key that looks like the following:

pub_prod_Kw4aC0rZVgLZQn209NbEKPuXLzBD28Zx

Get your Wompi keys

To obtain your Wompi account keys, plese register on our Merchants Dashboard if you haven't yet. It's that easy!

This allows us to identify your account each time a payment is processed thoguh Wompi. Click here to understand how merchant public and private keys work.

Rembember that there are keys for both production and sabdbox environments

The sandbox keys (test environment) have the prefix pub_test_, while the production keys have the prefix pub_prod_. For real transactions usea the production keys and for test transactions while you are integrating and testing the service, use the sandbox keys.

Step 2: Generate a unique payment reference

For each purchase that your customers do on your website, you should generate a unique payment reference. This way it will be possible to identify and track each transaction that is completed on Wompi and it will also avoid accidental duplicate transactions. This means that once a reference is used for a payment on your account, it will not be possible to use it again.

We recommend using numeric or alphanumeric references, that can or cannot include dashes (-) or underscores (_). The following are valid reference examples:

3b4393bafed398ba2
54937
10384200283
58e281-177ab976cbf9-d162d2
38932_3293298
0f760951ed_a0086f

Step 3: Redirection URL

After finalizing a transacion Wompi will redirect the user to a URL (which should belong to your website), on which he can see the end result (status) of the transaction, which will be available as a URL parameter.

For example, if your URL is:

https://mystore.com.co/payments/result

The URL to which Wompi will redirect will be similar to the following:

https://mystore.com.co/payments/result?id=01-1531231271-19365

That way you can use the parameter id available on the URL to verify the transaction using our API pointing to https://production.wompi.co/v1/transactions/<TRANSACTION_ID>. For instance: https://production.wompi.co/v1/transactions/01-1531231271-19365

Step 4: Transaction parameters

You can provide parameters for each transaction like the amount to be charged and the currency in which you wan to charge for example. Some of these parameters are required while others are optional.

Required parameters

The following are the required parameters for creating a transaction:

public-key (Public account key): Public account key.
currency (Currency): Currency in which you will charge. The only currency currently available is COP (colombian pesos).
amount-in-cents (Amount in cents): Amount to be charged, in cents. For example if you wish to charge $95.000 COP, you should enter: 9500000
reference (Unique payment reference): Unique payment reference.

Optional parameters

redirect-url (redirectin URL): This is the URL to which the user will be redirected after competing a payment process, contained in the respective transaction id

Step 5: Choose an integration method

Choose one of the following two integration options:

Widget: Allows your customers to complete a payment within your website using the Widget.
Web: Your customers complete the payment on our Web Checkout.

Widget Checkout

This is the most simple method to get your customers to complete a payment without leaving your website. With only a few HTML lines, a payment button will be showed automatically.

By clicking on the button, the client will continue the payment process within our widget, without leaving your website. If you want a personalized payment button, head over to the custom button section.

Next you will see an example of the button generated with the same code that you can see below:

<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH"
    data-currency="COP"
    data-amount-in-cents="4950000"
    data-reference="4XMPGKWWPKWQ"
    >
  </script>
</form>

The code above has the minimum neccessary parameters to generate a payment button that allows your customers to pay on our widget. That to generate a button you only need to include a <script> with the transaction parameters within a <form> tag in your code.

You only need to take into account two things to generate the button:

Include the parameter data-render="button", that indicates that you want to generate an automatic payment button.
For the parameters listed above you should use the data- prefix on each one, and to specify it (i.e. data-reference, data-currency, data-amount-in-cents)

Web Checkout

This is the fastest method for integrating Wompi on your website, using only a standard HTML form:

<form action="https://checkout.wompi.co/p/" method="GET">
  <!-- REQUIRED -->
  <input type="hidden" name="public-key" value="MERCHANT_PUBLIC_KEY" />
  <input type="hidden" name="currency" value="CURRENCY" />
  <input type="hidden" name="amount-in-cents" value="AMOUNT_IN_CENTS" />
  <input type="hidden" name="reference" value="UNIQUE_PAYMENT_REFERENCE" />
  <!-- OPTIONAL -->
  <input type="hidden" name="redirect-url" value="REDIRECT_URL" />
  <button type="submit">Pay with Wompi</button>
</form>

This way you only need to make sure to fill out the required parameters and include this code wherever you need your customers to see the button to complete a payment. Once they click it, they will be taken to our Web Checkout where they will be able to quickly and securely complete the payment.

Test transactions

This information was moved

Find all Sandbox transactions test data in:
Test Data for Sandbox.

Custom button (optional)

If you want to offer a personalized integration for your customers, for example a button with your own styles or open the widget for a given user action, you simply need to follow the next steps:

Step 1: Include the script inside the widget

Add this tag prefrerably within the <head> of your HTML:

<script type="text/javascript" src="https://checkout.wompi.co/widget.js"></script>

Step 2: Test the transaction data

Setup an instance of the Checkout with the configuration object. Next we show the fields for this with sample values. All are required except redirectUrl.

var checkout = new WidgetCheckout({
  currency: 'COP',
  amountInCents: 2490000,
  reference: 'AD002901221',
  publicKey: 'pub_fENJ3hdTJxdzs3hd35PxDBSMB4f85VrgiY3b6s1',
  redirectUrl: 'https://transaction-redirect.wompi.co/check' // Optional
})

Step 3: Open the widget

Finally, when you want to open the widget that you previously setup, you only need to call the open function with a callback function as the only parameter. For example:

checkout.open(function ( result ) {
  var transaction = result.transaction
  console.log('Transaction ID: ', transaction.id)
  console.log('Transaction object: ', transaction)
})

Wompi Docs

Widget & Web Checkout