iykekings/svelte-paystack

A svelte library for implementing Paystack payment gateway

Svelte-paystack

A svelte library for implementing paystack payment gateway

Getting started

Install

  npm i svelte-paystack

Use

Import Paystack component as the default export from svelte-paystack and pass in your paystack configuration to it as config prop. This configuration can be found in your paystack dashboard.

<script>
  import Paystack from 'svelte-paystack';

  //import your custom-component
  import Button from 'your-path'

  let config = {
    key: "pk_test_or_public_key",
    email: "[email protected]",
    amount: 10000, 
    currency: "NGN",
    withSlot:true, // If you need to render a custom component to replace default button
    embed: false,
    disabled: false,
    callback: function(response) {
      console.log(
        "successfully subscribed. transaction ref is " + response.reference
      );
    },
    onClose: function() {
      console.log("window closed");
    }
  }
</script>
<Paystack {config} />

//Pass custom component to paystack
<Paystack let:usePayInline {config}>

  //action props from your custom-component will receive func to invoke paystack inline, which you can attach to any event inside your custom-component.
<Button action={usePayInline}  />
  </Paystack action>

Configuration Options

• For embed: true all Configuration options specified here by paystack embed can be specified.

• For embed: false all Configuration options specified here by paystack inline can be specified.

• For withSlot: true works in conjunction with embed: false, which gives you the option of using custom component to trigger paystack inline can be specified.

• More configs:

    embed: boolean // specifies if the payment form should be embedded. Defaults to false
    value: string // textContent of the button tag when embed == false. Defaults to "Pay with Paystack"

Examples

• Inline (using custom-component) to trigger paystack inline

  • Inline

  • Embed