Skip to content

Checkout JS Integration

Display SafeHaven Checkout Button

Embeds the SafeHaven Checkout JS script into your Laravel application, providing a simple payment button.

html
<div>
  @php $buttonText = "Make Payment"; $customer = ['firstName' => 'John',
  'lastName' => 'Doe', 'emailAddress' => 'johndoe@example.com', 'phoneNumber' =>
  '+2348032273616']; $amount = 100; $settlementAccount = ['bankCode' =>
  '090286', 'accountNumber' => '0113413052']; $redirectUrl =
  'https://example.com/redirect'; $customIconUrl = ''; $webhookUrl = '';
  $metadata = []; @endphp

  <x-safeHaven-checkout
    id="paynow"
    class="btn-primary"
    :$buttonText
    :$customer
    :$amount
    :$settlementAccount
    :$redirectUrl
    :$webhookUrl
    :$customIconUrl
    :$metadata
  />
</div>

Verify Checkout Transaction

Verify the transaction using the reference code provided by Checkout JS.

php
use Eminisolomon\SafeHaven\SafeHaven;

$referenceCode = "61e985180e69308aa37a7a94";
SafeHaven::checkout()->verifyTransaction($referenceCode);

Events

JavaScript Event Listeners

In JavaScript, listen to safeHavenCheckoutClosed and safeHavenCheckoutCallback events:

javascript
<script>
    document.addEventListener('safeHavenCheckoutClosed', function() {
        console.log("Checkout was closed.");
    });

    document.addEventListener('safeHavenCheckoutCallback', function(e) {
        console.log("Received callback with response:", e.detail);
    });
</script>

Laravel Event Listeners

In Laravel, use event listeners to handle SafeHavenCheckoutCallbackEvent and SafeHavenCheckoutClosedEvent:

php
use Eminisolomon\SafeHaven\Events\SafeHavenCheckoutCallbackEvent;
use Eminisolomon\SafeHaven\Events\SafeHavenCheckoutClosedEvent;

// In your EventServiceProvider, register listeners for these events:
protected $listen = [
    SafeHavenCheckoutClosedEvent::class => [
        // Your CheckoutClosedListener class,
    ],
    SafeHavenCheckoutCallbackEvent::class => [
        // Your CheckoutCallbackListener class,
    ],
];

The JavaScript listeners react to user interactions with the SafeHaven Checkout UI, while the Laravel event listeners are designed to handle backend responses to these events.

For more details, please refer to the SafeHaven Checkout JS documentation.