Click to Pay

Updated on 14 Nov 2024
3 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

Click to Pay

Click to Pay is a digital payment method that allows users to make online purchases quickly and securely without the need to manually enter card details. It uses a simplified payment experience and is supported by major card networks, such as Visa, Mastercard, American Express, and Discover, facilitating one-click transactions on supported websites and apps.

Supported operations

Operation	Description
✅ Payment Authorization	Block funds on the customer's card.
✅ Payment capture	Complete the transaction and transfer the funds.
✅ Direct payment	Combine authorization and capture in one step.
✅ Refund	Return the full amount of a transaction.
✅ Partial refund	It returns part of the captured amount.
✅ Cancellation of authorization	Reverts an authorization that was not captured.

Integration

1. Set up Click to Pay as your payment method

To integrate Click to Pay, you must first make a series of configurations from the OrkestaPay portal. Visit our Providers setup guide and search for the Click to Pay payment method.

2. Tokenize Click to Pay payment data

To tokenize payment data, follow the following steps:

Include OrkestaPay scripts: Use OrkestaPay scripts in your web application.
Initialize parameters: Here the OrkestaPay credentials are defined, as well as data regarding the payment to be processed.
Render the payment button: Place the Click to Pay button on your frontend.

Resources needed:

CSS

https://checkout.orkestapay.com/web/components/payment-methods/styles.css

https://checkout.orkestapay.com/script/orkestapay.js
https://checkout.orkestapay.com/web/components/payment-methods/main.js

Code Example

In the following code snippet there are certain parameters that need to be replaced:

public_key : Public key, these credentials can be obtained in the OrkestaPay portal.
merchant_id: Merchant ID, these credentials can be obtained on the OrkestaPay portal.
is_sandbox: Define whether the credentials you're about to operate are testing or productive.
email: Customer email.

INFORMATION
To check OrkestaPay's credentials, you can visit our API keys guide.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <title>Click2Pay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://checkout.orkestapay.com/web/components/payment-methods/styles.css" />
    <style>
      .code {
        color: inherit;
        overflow-wrap: break-word;
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="row mt-5">
        <h1 id="card-title" class="col-12 text-center">OrkestaPay - Click2Pay Web Component</h1>
      </section>

      <section class="row">
        <article id="button-container" class="col-12 col-md-6 offset-md-3"></article>
        <article class="pt-3 col-12">
          <div id="payment-method-details" class="w-100 alert" role="alert"></div>
        </article>
      </section>
    </main>

    <noscript> Please enable JavaScript to continue using this application. </noscript>

    <script type="text/javascript" src="https://checkout.orkestapay.com/script/orkestapay.js"></script>
    <script type="text/javascript" src="https://checkout.orkestapay.com/web/components/payment-methods/main.js"></script>
    <script type="text/javascript">
      const { public_key, merchant_id, is_sandbox, email } = initValues();

      (async function main() {
        initOrkestaPay({ is_sandbox, merchant_id, public_key });

        const click2PayButton = document.createElement("orkestapay-click2pay-button");
        await customElements.whenDefined("orkestapay-click2pay-button");

        click2PayButton.params = {
          consumer: { email },
          theme: { button_color: "dark" },
        };
        click2PayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);

        const container = document.getElementById("button-container");
        container.appendChild(click2PayButton);
      })();

      function handlePaymentMethodCreated({ detail }) {
        const code = document.createElement("code");
        code.innerHTML = JSON.stringify(detail, null, 2);
        code.classList.add("code");

        const paymentMethodDetails = document.getElementById("payment-method-details");
        paymentMethodDetails.classList.remove("alert-danger");
        paymentMethodDetails.classList.add("alert-success");
        paymentMethodDetails.replaceChildren(code);
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          email: "<REPLACE_WITH_CUSTOMER_EMAIL>",
        };
      }
    </script>
  </body>
</html>

Note
This code is a basic example that you should adapt to your real environment.

Sample Response (handlePaymentMethodCreated)

{
  "payment_method_id": "pym_d1c61b939db04b1d9aee207aae5d97da",
  "type": "CLICK_TO_PAY",
  "card": {
    "bin": "518600",
    "last_four": "8785",
    "brand": "MASTERCARD",
    "card_type": "CREDIT",
    "holder_name": "Federico Balderas",
    "holder_last_name": "",
    "expiration_month": "12",
    "expiration_year": "2028",
    "one_time_use": true
  },
  "status": "ACTIVE",
  "created_at": "1731621376182",
  "updated_at": "1731621376182"
}

3. Request payment

With the payment_method_id one in the answer, you can continue with the regular payment process with OrkestaPay from the backend.

Information
To learn more about the direct payment integration, visit our Payment integration guide.

Testing cards

You can test your integration in Sandbox using the test cards listed below.

Mastercard

Card number	Expiry date	CVV
5186001700008785	Any future date	Any 3 digits
5186001700009908	Any future date	Any 3 digits
5186001700009726	Any future date	Any 3 digits
5186001700008876	Any future date	Any 3 digits
5186001700001434	Any future date	Any 3 digits

Official documentation
For more information on testing with Click to Pay, please refer to their official documentation: https://developer.mastercard.com/unified-checkout-solutions/documentation/testing/test_cases/click_to_pay_case/

Was this article helpful?

What's Next

Google Pay™

Table of contents

Click to Pay
Supported operations
Integration
Mastercard