💲Collecting Payments

Once you have obtained a payment token through the API endpoint, you can initiate the payment process on your platform. This guide will walk you through the steps to collect payments using the token, showcasing both iframe and standalone page approaches.

Integration Methods

Using an Iframe

To integrate PayPangea's payment process within your application seamlessly, you can use an iframe. This method provides a cohesive user experience, keeping the user within your application environment throughout the payment process.

Steps:

• Embed the Iframe: Insert an iframe into your HTML, setting its src attribute to https://paypangea.com/request/paysdk/?tkn=${TOKEN}, where ${TOKEN} is the payment token you obtained from the API.

<iframe src="https://paypangea.com/request/paysdk/?tkn=${TOKEN}" width="600" height="400"></iframe>

• Listen for Iframe Events: PayPangea's iframe integration emits several events that you can listen to for managing the payment flow:

  • PAYPANGEA_WIDGET_CLOSE: Triggered when the payment widget is closed.

  • PAYPANGEA_WIDGET_OPEN: Triggered when the payment widget is opened.

  • PAYPANGEA_WIDGET_CLOSE_REQUEST: Emitted when a request to close the widget is made. This is crucial for detecting the end of a payment process.

  • PAYPANGEA_WIDGET_INITIALISED: Indicates that the widget has been initialized and is ready to use.

• Handling Payment Confirmation: Monitor the PAYPANGEA_WIDGET_CLOSE_REQUEST event for event.data.outcome = 'SUCCESS' to confirm a successful payment.

window.addEventListener('message', (event) => {
    if (event.data.type === 'PAYPANGEA_WIDGET_CLOSE_REQUEST' && event.data.outcome === 'SUCCESS') {
        // Handle successful payment
    }
});

Standalone Page

Alternatively, you can redirect users to a standalone payment page hosted by PayPangea. This method is straightforward and does not require embedding within your site.

Steps:

• Redirect to PayPangea: Redirect users to https://paypangea.com?tkn=${TOKEN} for payment. Ensure the user's browser navigates to this URL, where ${TOKEN} is your obtained payment token.

• Set a Redirect URL (Optional): If you prefer to redirect users back to your site upon completion, specify a redirect URL during the token generation step in the API. PayPangea will redirect users to this URL after the payment process, allowing you to handle post-payment actions on your site.