A React component for AfterClearpay and Affirm payment.

Installation

React Native implementation for Afterpay or Clearpay payment.

Description

The library allows you to use AfterClearpay Checkout and Affirm Checkout with react-native without ejecting. You can use it with both server-side implementations and client-side implementations. Simply ensure you follow the url structure guidelines below.

Prequisites

• This library relies on React Native Webview. Please follow this guide to install in your project first.

Installation

• Ensure you've completed the setps in prequisites.

• Install package via npm or yarn:

npm install @alliance-software-development/asdpay

or

yarn add @alliance-software-development/asdpay

• Import in your project

import ASDPay from "@alliance-software-development/asdpay";

Usage

import ASDPay from "@alliance-software-development/asdpay";

const App = () => (
  <ASDPay
    paymentType="Affirm" // ['AfterClearPay', 'Affirm']
    publicKey={PUBLIC_KEY}
    client_secret={CLIENT_SECRET} // required only for AfterClearPay
    checkoutSessionInput={{}}
    onComplete={(res) => {
      console.log(`Checkout session succeeded. session id: ${res}.`);
    }}
  />
);

export default App;

Affirm Usage

<ASDPay
  paymentType="Affirm"
  publicKey="{PUBLC_KEY}"
  checkoutSessionInput={{
    merchant: {
      user_cancel_url: "https://www.affirm.com/?status=cancel",
      user_confirmation_url: "https://www.affirm.com/?status=complete",
      user_confirmation_url_action: "GET",
      merchant: "Affirm Demo Inc."
    },

    shipping: {
      name: {
        first: "John",
        last: "Doe"
      },
      address: {
        line1: "225 Bush Street.'",
        line2: "Floor 16",
        city: "San Francisco",
        state: "CA",
        country: "US",
        zipcode: "94104"
      },
      email: "[email protected]",
      phone_number: "4155555555"
    },
    billing: {
      name: {
        first: "John",
        last: "Doe"
      },
      address: {
        line1: "225 Bush Street.'",
        line2: "Floor 16",
        city: "Beckley",
        state: "CA",
        country: "US",
        zipcode: "24801"
      },
      email: "[email protected]",
      phone_number: "4155555555"
    },
    items: [
      {
        sku: "123456789",
        display_name: "Affirm Scarf",
        unit_price: 60000,
        qty: 1
      }
    ],
    order_id: "JKLMO4322",
    currency: "USD",
    financing_program: "flyus_3z6r13r",
    shipping_amount: 1000,
    tax_amount: 500,
    total: 100000
  }}
  onComplete={(res) => {
    alert(JSON.stringify(res));
  }}
/>

AfterClearpay Usage

<ASDPay
  paymentType="AfterClearPay"
  publicKey="{PUBLIC_KEY}"
  client_secret="{CLIENT_SECRET}"
  checkoutSessionInput={{
    payment_method: {
      billing_details: {
        email: "[email protected]",
        name: "Jenny Rosen",
        address: {
          line1: "1234 Main Street",
          city: "San Francisco",
          state: "CA",
          country: "US",
          postal_code: "94111"
        }
      }
    },
    return_url: "https://imaginationeverywhere.info/?status=complete"
  }}
  onComplete={(res) => {
    alert(JSON.stringify(res));
  }}
/>

To get client_secret for AfterClearPay payment click here

Important Notes about checkoutSessionInput

• checkoutSessionInput Sample for AfterClearPay Payment. Check here for more info

checkoutSessionInput: {
          payment_method: {
            billing_details: {
              email: '[email protected]',
              name: 'Jenny Rosen',
              address: {
                line1: '1234 Main Street',
                city: 'San Francisco',
                state: 'CA',
                country: 'US',
                postal_code: '94111',
              },
            },
          },
          return_url: 'https://imaginationeverywhere.info/?status=complete',
        }

• checkoutSessionInput Sample for Affirm Payment. Check here for more info

checkoutSessionInput: {
          merchant: {
            user_cancel_url: 'https://www.affirm.com/?status=cancel',
            user_confirmation_url: 'https://www.affirm.com/?status=complete',
            user_confirmation_url_action: 'GET',
            merchant: 'Affirm Demo Inc.'
          },

          shipping: {
            name: {
              first: 'John',
              last: 'Doe'
            },
            address: {
              line1: "225 Bush Street.'",
              line2: 'Floor 16',
              city: 'San Francisco',
              state: 'CA',
              country: 'US',
              zipcode: '94104'
            },
            email: '[email protected]',
            phone_number: '4155555555'
          },
          billing: {
            name: {
              first: 'John',
              last: 'Doe'
            },
            address: {
              line1: "225 Bush Street.'",
              line2: 'Floor 16',
              city: 'Beckley',
              state: 'CA',
              country: 'US',
              zipcode: '24801'
            },
            email: '[email protected]',
            phone_number: '4155555555'
          },
          items: [
            {
              sku: '123456789',
              display_name: 'Affirm Scarf',
              unit_price: 60000,
              qty: 1
            }
          ],
          order_id: 'JKLMO4322',
          currency: 'USD',
          financing_program: 'flyus_3z6r13r',
          shipping_amount: 1000,
          tax_amount: 500,
          total: 100000
        }

Important Notes about URLs

• For AfterClearPay return_url must have the query string params ?status=complete

• For Affirm:

  • user_cancel_url must have the query string params ?status=cancel

  • user_confirmation_url must have the query string params ?status=complete

Component props

• publicKey (String) - Stripe public key of your project.

• client_secret (String) - for AfterClearPay only; client secret from the paymentIntent Doc here

• checkoutSessionInput (Object) - Object to be passed to Stripe's redirectToCheckout function Docs. or Affirm's redirect checkoutObject. Docs.

• onComplete (?Function) - Called upon success or failure of the checkout session with { ...props }

• webViewProps (?Object) - WebView Component props, spread on the WebView Component.

Implementation on Web

For AffirmPay

• Affirm Payment With SPA
• Affirm Checkout Web

For AfterClearpay

• Accept Afterpay/ClearPay with React
• Accept an Afterpay or Clearpay payment