# give/4.15.3/src/Onboarding/Setup/templates/stories/examples.stories.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.15.3. 75 lines.

- Page: https://pluginprobe.com/plugins/give/4.15.3/code/src/Onboarding/Setup/templates/stories/examples.stories.js
- Raw: https://pluginprobe.com/plugins/give/4.15.3/raw/src/Onboarding/Setup/templates/stories/examples.stories.js
- Modified: 2021-11-23T23:55:18+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.15.3/code/src/Onboarding/Setup/templates/stories/examples.stories.js#L10-L20`.

```javascript
import styles from './src/styles';
import paypal from './src/paypal.js';
import stripe from './src/stripe.js';
import configuration from './src/configuration.js';
import givewp101 from './src/givewp101.js';
import addons from './src/addons.js';

import {withA11y} from '@storybook/addon-a11y';

export default {
    title: 'Setup Page/Examples',
    decorators: [withA11y],
};

const Styles =
    `
<style>
  ` +
    styles +
    `
</style>
`;

export const Configuration = () =>
    Styles +
    `
<section>
  <header>
    <h2>Create your first donation form in minutes</h2>
    <span class="badge badge-complete">Complete</span>
  </header>
  <main>
    ` +
    configuration() +
    `
  </main>
</section>
`;

export const Gateways = () =>
    Styles +
    `
<section>
  <header>
    <h2>Connect a payment gateway to begin accepting donations</h2>
  </header>
  <main>
    ` +
    paypal() +
    stripe() +
    `
  </main>
  <footer>
    Want to use a different gateway? GiveWP has support for many others including Authorize.net, Square, Razorpay and more!
    <a href="#">View all gateways</a>
  </footer>
</section>
`;

export const Resources = () =>
    Styles +
    `
<section>
  <header>
    <h2>Level up your fundraising with these great resources</h2>
  </header>
  <main>
    ` +
    givewp101() +
    addons() +
    `
  </main>
</section>
`;

```