Apple Pay

Apple Pay is a mobile payment and digital wallet system from Apple that allows users to make secure purchases in physical stores, apps, and websites using Apple devices (iPhone, iPad, Mac, and Apple Watch).

Supported operations

Operation	Description
✅ Payment authorization	Blocks funds on the customer's card.
✅ Payment capture	Completes the transaction and transfers the funds.
✅ Direct payment	Combines authorization and capture in one step.
✅ Refund	Returns the full amount of a transaction.
✅ Partial refund	Returns part of the captured amount.
✅ Authorization cancellation	Reverses an authorization that was not captured.

1. Configure Apple Pay as a payment method

To integrate Apple Pay, you must first perform a series of configurations from the OrkestaPay portal. Visit our Providers configuration guide and find the Apple Pay section.

Additionally, you must configure a supporting payment processor compatible with Apple Pay, e.g. Stripe.

2. Implement payment button

To tokenize the payment data, follow these steps:

Include OrkestaPay scripts: Use the OrkestaPay scripts in your web application.
Initialize parameters: Define the OrkestaPay credentials here, as well as data related to the payment to be processed.
Render the payment button: Place the Apple Pay button in your frontend.

Required resources:

CSS

<link
  rel="stylesheet"
  href="https://checkout.orkestapay.com/web/components/payment-methods/styles.css"
  integrity="sha384-5/NLomvLQk75JVAmEdaNkdkgLavuAlRS256szA++bmuw6Zph/wFYlWFHz9Fss7JF"
  crossorigin="anonymous"
/>

<script
  src="https://checkout.orkestapay.com/script/orkestapay.js"
  integrity="sha384-lQoLMYDY2Cz/Y+8BLiNbhfLVHWawqsA/gE/8WRTpF6ZS3EABNKXhrq/0bBu4M1aI"
  crossorigin="anonymous"
></script>

<script
  src="https://checkout.orkestapay.com/web/components/payment-methods/main.js"
  integrity="sha384-hvoIO7IyazX+Cc2LqBdHXx7Z3tq766248YzywLTN+D6f41Lub/VHUh2Pe5Q7WKfA"
  crossorigin="anonymous"
></script>

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 from the OrkestaPay portal.
merchant_id: Merchant ID; these credentials can be obtained from the OrkestaPay portal.
is_sandbox: Defines whether the credentials you are about to use are for testing or production.
country_code: Country code for your transaction.
currency: Currency code for your payment.
total_amount: Total transaction amount.

📘
Documentation
To consult OrkestaPay credentials, you can visit our guide Get API keys.

<!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>ApplePay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/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 - ApplePay Web Component</h1>
      </section>

      <section class="row">
        <article class="col-12 col-md-6 offset-md-3">
          <div class="form-check my-3">
            <input type="checkbox" id="is-valid2pay" class="form-check-input" />
            <label for="is-valid2pay" class="form-check-label"> Is valid to pay </label>
          </div>
        </article>

        <article class="col-12 col-md-6 offset-md-3">
          <orkestapay-applepay-button id="orkestapay-applepay-button" />
        </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 checkIsValid2Pay = document.getElementById("is-valid2pay");
      checkIsValid2Pay.checked = true;

      const { public_key, merchant_id, is_sandbox, country_code, currency, total_amount } = initValues();

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

        const applepayButton = document.getElementById("orkestapay-applepay-button");
        await customElements.whenDefined("orkestapay-applepay-button");

        applepayButton.params = {
          payment_details: {
            country_code,
            currency,
            total_amount,
            isValid2Pay,
          },
          theme: { button_color: "dark" },
        };
        applepayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);
      })();

      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);
        this.paymentStatus = "COMPLETED";

        // Implementar lógica para enviar el "payment_method_id" al backend y continuar con el proceso de pago
      }

      function isValid2Pay() {
        return checkIsValid2Pay.checked;
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          country_code: "MX",
          currency: "MXN",
          total_amount: "100.00",
        };
      }
    </script>
  </body>
</html>

🚧
NOTE
This code is a basic example that you must adapt to your real environment.

3. Request the payment

With the payment_method_id from the response, you can continue with the regular OrkestaPay payment process from the backend.

📘
Documentation
To learn more about direct payment integration, visit our guide Payment integration.

🚧
IMPORTANT
To perform payment testing, it is necessary to:

Perform tests on Apple devices with Safari so that the payment button is visible.

You must have cards saved on your device.

Run the code under a secure protocol (HTTPS)