Meta Pay Integration

JavaScript SDK for Meta Payments

Meta provides a Software Development Kit (SDK) for JavaScript to help you integrate Meta payment experiences into your online store more easily. If you are using a Payment Processor, Payment Gateway or Commerce Platform for processing your transactions, you may have to reach out to them to obtain details about how to incorporate Meta payment experiences into your existing integration. For more information, see Overview of Meta Pay Integration.

Determine your integration pattern

  1. You determine the party that has integrated with Meta Pay API and Payment Processing.
    This may be you or your partner acting as the payments partner as defined in Overview of Meta Pay Integration.
  2. You determine the details of your checkout integration.
    Are you using any external JS SDK to render checkout?
  3. You determine your integration pattern based upon #1 and #2:
    1. If you have not integrated with Meta Pay API and Payment Processing and are using a Javascript SDK provided by your payment partner, you will need to reach out to your payment partner to determine how to enable Meta Pay. This may be as simple as enabling Meta Pay in your merchant portal.
    2. If you have not integrated with Meta Pay API and Payment Processing and are using an API integration with your payment partner, you will integrate with Meta Pay Javascript SDK and pass the returned payment container to your Payment Partner for processing.
    3. If you have integrated with Meta Pay API and Payment Processing and you provide a Javascript SDK for your merchants, you will integrate with Meta Pay Javascript SDK.
      Additionally, if you expose an API for your merchants to integrate with for payment processing, your merchants will integrate with Meta Pay Javascript SDK and pass the returned container to an endpoint you expose for payment processing / accepting payment methods.

Follow the decision graph to determine your integration pattern:

Integrating with Meta payments Javascript SDK

Before proceeding with this section, make sure you have read through Determine your integration pattern

To install the Meta payments Javascript SDK, we highly recommend that you add its base code between the opening and closing head tags on every page where you intend to display Meta Pay button. The SDK is available at:

https://static.xx.fbcdn.net/payments_sdk/v1/metapay_sdk.js

Example integration:

<head>
...
<script src="https://static.xx.fbcdn.net/payments_sdk/v1/metapay_sdk.js"></script>
...
</head>

Please set the HTTP response headers within your server's configuration file as detailed below:

Content-Security-Policy: default-src ‘self’ static.xx.fbcdn.net graph.facebook.com;
  1. You can now implement the integration. Start by going to PaymentClient. Once this integration is complete, you will receive a Meta Pay container.
  2. Pass the Meta Pay container for processing with your payment partner. Depending on integration this may be done directly from checkout page or routed through your backend integration.

Enabling Meta Pay through Payment Partner Javascript SDK

Before proceeding with this section, make sure you have read through Determine your integration pattern

  1. Work with your Payment Partner to determine how to enable Meta Pay.

The following is the reference for the JavaScript SDK for Meta payments.

Miscellaneous

Classes

Interfaces