# Payment button

The payment button opens [checkout](https://developers.intasend.com/guides/collections/checkout/) on your own page, either as a popup or inline,
using only your **publishable key**. Use it when your payment flow runs in the browser. If you
control a backend, you can also create the checkout there and redirect to its `url`.

## 1. Add the SDK

```html
<script src="https://unpkg.com/intasend-checkout-sdk"></script>
```

Or, for React, Vue and other bundlers:

```bash
npm install intasend-checkout-sdk
```

```javascript

```

The SDK used to be published as `intasend-inlinejs-sdk`. It still works, but new integrations should use `intasend-checkout-sdk`.

## 2. Add a button

Any element with the class `intaSendPayButton` opens checkout when clicked:

```html
<button class="intaSendPayButton" data-amount="1500" data-currency="KES"
        data-email="jane@example.com" data-api_ref="order-123">Pay now</button>
```

Each `data-*` attribute is sent as a [checkout field](https://developers.intasend.com/guides/collections/checkout/#request). Write field names with
underscores as they are (`data-api_ref`, `data-phone_number`, `data-first_name`), because
`data-phone-number` would be sent as `phoneNumber`. Fields you prefill are skipped on the payment form.

## 3. Initialise

Add this before `</body>`:

```html
<script>
  new window.IntaSend({
    publicAPIKey: "ISPubKey_test_xxxx",
    live: false, // true with a live key
  })
    .on("COMPLETE", (results) => console.log("Paid", results))
    .on("FAILED", (results) => console.log("Failed", results))
    .on("IN-PROGRESS", (results) => console.log("In progress", results));
</script>
```

| Option | Default | Description |
|---|---|---|
| `publicAPIKey` | | Your publishable key |
| `live` | `false` | `true` for live, `false` for sandbox. It must match the key. |
| `redirectURL` | | If set, the customer is sent here on `COMPLETE` |
| `mode` | `popup` | `popup` or `inline` |
| `inlineContainer` | `checkoutElement` | ID of the element that holds the inline checkout |
| `element` | `intaSendPayButton` | Class name of your pay buttons |

In React or Vue, initialise once the button is rendered, for example in `useEffect` or `onMounted`.

## Events

| Event | When |
|---|---|
| `IN-PROGRESS` | The customer has started paying |
| `COMPLETE` | The payment succeeded |
| `FAILED` | The payment failed |

Events are only meant for updating your page. Confirm payment on your server with the
`collection_event` [webhook](https://developers.intasend.com/guides/webhooks/) or [payment status](https://developers.intasend.com/guides/collections/overview/#check-payment-status)
before you fulfil the order.

## Inline mode

To embed checkout in your page instead of a popup, add a container and start checkout with `run()`:

```html
<div id="checkoutElement"></div>

<script>
  new window.IntaSend({publicAPIKey: "ISPubKey_test_xxxx", live: false, mode: "inline"})
    .on("COMPLETE", (results) => console.log("Paid", results))
    .run({amount: 1500, currency: "KES", api_ref: "order-123", email: "jane@example.com"});
</script>
```

`run()` also works in popup mode, if you'd rather start checkout from your own code than with a button.

## Google Pay and Apple Pay

They appear automatically when they're enabled in your payment settings. No extra code is
needed. On iOS, checkout opens in a new tab so that Apple Pay and Google Pay can run.