Skip to main content

PG Token Flow

Merchants can get access to the secure, one-time use card payment token that is approved for this transaction in the form of a PG Token (which their card-processing PG has provided for this card).

This is ideal for merchants that do not want to deal with PCI-compliance and merchants using any of the supported PGs below:

  • Stripe name: stripe
  • Xendit name: xendit
  • PayMaya name: paymaya
  • PayMongo name: paymongo
  • Checkout.com name: checkout
  • Omise name: omise

Integration Steps​

1. Request access token (Server-side) as described earlier​

2. Initialize OpenFabric SDK (Client-side)​

Merchant will now initialize OpenFabric SDK for PG Token Flow. For getting a PG Token, they should also furnish required information about their Payment Gateway (name of the PG, Sharable Public Key).

2.1 Add dependency​

Merchant to include OpenFabric Merchant SDK js as a dependency to their payment application.

<script type="module" src="https://unpkg.com/@openfabric/[email protected]/dist/index.umd.min.js"></script>
2.2 Add a placeholder for BillEase's button​

Merchant to define where they want OpenFabric's SDK to present BillEase button on their payment page.

<div id="bnpl-button"></div>
2.3 Initialize SDK​

Merchant will now initialize the OpenFabric SDK.

Initializing OpenFabric SDK for PG Token Flow will require:

  • Access token (generated in step 1)
  • Order details (purchase context, customer billing/shipping info, etc.)
  • Callback URLs (success and failure URLs, etc.)
  • Payment Gateway account information (name of supported PG, Shareable Public Key, etc.)

Sample of initializing SDK:

const { OpenFabric } = OpenFabricMerchantSDK;

const initializeOrder = () => {
    // Get order details
}

// Pass order related information to SDK. 
const {
  shipping_address,
  billing_address,
  customer_info,
  item,
  pg_info
} = initializeOrder();

// Payment Gateway access token handler 
const tokenHandler = (token: string) => {
  // Process your token here
};

// Initialize OpenFabric SDK with all configurations
const openFabric = OpenFabric(ACCESS_TOKEN, // access token from backend
    "https://example-shop.ph/of/result", // optional callback url for a successful transaction
    "https://example-shop.ph/of/cancel", // optional callback url for a cancelled transaction
  )
  .setDebug(true) // log diagnostic messages during integration
  .setEnvironment(Environment.sandbox) // dev, sandbox, production
  .setPaymentMethods(["billease"]);

// Payment context and order information
openFabric.createOrder(
  {
    customer_info,
    amount: 2300,
    currency: "PHP",
    merchant_reference_id,
    transaction_details: {
      shipping_address,
      billing_address,
      items: [item],
      tax_amount_percent: 10,
      shipping_amount: 10,
      original_amount: 130
    },
    pg_name: pg_info.payment_gateway_name,
    pg_publishable_key: pg_info.payment_gateway_publish_key
  }
)
// Button presentment and redirect handling instructions
openFabric.renderButton("bnpl-button"); // id of the placeholder div where openfabric button gets rendered
// Final call to apply all the settings above
openFabric.initialize();

Once OpenFabric SDK is initialized, the SDK will now present BillEase's button in the section that was configured.

When a customer clicks on it, OpenFabric SDK will redirect to BillEase's payment flow.

3. Fetch and process card with PG​

When BillEase successfully approves a transaction, a one-time use card, PG token, is generated specifically for this transaction by using merchant's PG credentials submitted in Step #2.

This token is passed back to the merchant as part of the redirect querystring as txn_pg_token.

The merchant should simply use the PG Token to charge the card with their PG.