# Capturing payment sources

After [registering and signing in](#registering-and-signing-in-a-april-customer) April customers,
Merchants can integrate the [April payment source UI](#integrating-the-april-payment-source-ui)
to capture payment sources and [process card payments](#processing-payments-using-a-card-payment-source).

## Registering and signing in a April customer

IMPORTANT
These instructions are for consumer (B2C) merchants only.
Business to business (B2B) merchants should follow the B2B [customer onboarding](/developer-portal/business-to-business#customer-onboarding) documentation.

### Steps

1. Register a new April customer by calling [Upsert Customer](/openapi/april-public/customers/upsertcustomer) with the `UpsertConsumerCustomer` action to retrieve a `customerId`.
2. Sign in a customer by calling [Sign In Customer](/openapi/april-public/authentication/signincustomer) with the `SignInCustomer` action providing the `customerId` from the previous step. This will provide you with a `customToken`.


## Integrating the April payment source UI

Initialise the April payment source UI with a signed in customer `customToken` and register a `submitCallbackFunction` to retrieve a `cardPaymentSourceId`.

### Load the April checkout script


```HTML
<script src="https://checkout-v3.au.meetapril.io/v3/checkout-v3.0.0.min.js"></script>
```

### Initialise and render the April payment source UI


```javascript
const paymentSourceUI = window.AprilCheckout.createPaymentSource();
paymentSourceUI.init({
    publicKey: 'live_pk_xxxxxxxxxxxxxxxxxxxxx', // required, merchant public key
    customerToken: customToken, // signed in customer token
    isB2B: false, // B2B only
    hideB2BUsageScopeOptions: false, // B2B only, hide "Save card for" options
    submitCallbackFunction: (paymentSource) => {
        if(paymentSource.cardPaymentSource) {
            // retrieve cardPaymentSourceId
            const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
        }
    },
    errorCallbackFunction: (error) => {
        // handle errors
    }
});
paymentSourceUI.render({
    elementId: 'payment-source-container', // required, parent HTML element ID
    showSubmit: true, // hide the Submit button
    hideSavedCards: false, // hide previously saved cards
    primaryColor: '#b29572' // theme primary color (HEX)
});
```

WARNING
If a valid `customerToken` is not provided, the payment source UI will create a **temporary** `cardPaymentSourceId` that will expire in 10 minutes.

### Optional: submit a payment source programmatically


```javascript
paymentSourceUI.render({
    ...options,
    showSubmit: false // hide the Submit button
});
paymentSourceUI.submit((paymentSource) => {
    if(paymentSource.cardPaymentSource) {
        // retrieve cardPaymentSourceId
        const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
    }
});
```

### The `paymentSource` object


```typescript
type CardPaymentSource = {
  cardPaymentSourceId: string;
  last4: string;
  cardBin: string;
  brand: '' | 'American Express' | 'MasterCard' | 'Visa';
  funding: 'credit' | 'debit' | 'chargecard' | 'prepaid' | 'deferreddebit' | 'unknown';
  expMonth: number;
  expYear: number;
  country: string;
}
type PaymentSource = {
  cardPaymentSource?: CardPaymentSource;
}
```

Merchants can also retrieve a signed in customer `paymentSource` from the April checkout `paymentData` object, as described [here](/developer-portal/checkout-integration#the-paymentdata-object).

## Processing payments using a card payment source

### Steps

1. Create a new order by calling [Create Order](/openapi/april-public/orders/createorder) to retrieve a `orderId`.
2. Request a card payment by calling [Create Payment Token](/openapi/april-public/payment-tokens/createpaymenttoken) `CreatedSavedCardToken` action with a `cardPaymentSourceId` to retrieve a `paymentTokenId`.
3. Pay for an order by calling [Pay Order](/openapi/april-public/orders/payorder) `PayByCard` action with an `orderId` and `paymentTokenId`.